I recently posted on the Shopfy forum of a simple method to customize your Shopify checkout pages. This provides an easy way to keep the look of the checkout pages whilst adding your own logo / telephone number and help text.
Even for those with limited css / image editing skills you should be able to do this during your lunch.
Here’s a step-by-step guide of what to do:
- Download the checkout.css file and save to your desktop
- Create a graphic in your favoured image editing software with a white background that is 750px wide then add your logo and any other relevant details (phone number / help text).
- Remember to make a note of the image height as this is required in the css file
- Save the image to your desktop
- Edit the checkout.css file in your favoured editor and change the image height to match your image. If your image isn’t called checkout.png then change the name as well.
- Login to your Shopify site and go to Assets -> Theme Editor
- Scroll down to the Theme Assets section and click Upload a new theme asset
- Upload your image and checkout.css files into the theme assets
- Thats’ it. Your done – add items to your basket and go to your new checkout page.
{ 2 comments… read them below or add one }
Hi Stuart,
That’s excellent – thanks! I followed your instructions to put up a graphic with our logo and our telephone number.
One issue, perhaps Shopify have changed it since you wrote this, is that the order confirmation screen is different from the other checkout pages. It’s narrower and this means that the checkout graphic on the final screen is only partially been shown.
I’ve put up a screenshot at this address:
http://cdn.shopify.com/s/files/1/0065/3432/files/payment-complete.jpg?1025
Have you come across this before? Any idea how to get around it?
Hi Thomas,
Your quite right and I should probably update the post now. There’s a different class on the order confirmation screen. I think it’s called ‘narrow’ or ‘thin’ from memory. You can either add a different logo for that class or alternatively you could try the ‘vanilla’ checkout.css which makes it white and style from there.
This is the actual css I use on my b2b store collateit.co.uk
/*
Vanilla checkout css for Shopify (white page, white boxes with grey borders, grey/black text, red errors)
*/
/* @group Reset */
/* Undo background and gradiant */
body, #main, #container, #header, #footer {
background: #fff;
}
#main #overview > * {
border: none;
}
#main #thumbs div {
border: none;
}
/* Undo overview background and borders */
#main #overview {
background: #fff;
border: none;
}
/* center the title */
#header > h1{
text-align:center;
}
/* @end */
/* @group Globals */
body {
color: #000;
text-align: center;
background: #EEF7FB url(pattern.png) repeat fixed;
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
}
#container {
background: #fff;
border: 1px solid #e3e4e1;
width: 805px;
}
#content {
padding: 0px;
}
/* @end */
/* @group Info Bar */
#info-bar {
border-bottom: none;
background: #6CC761;
font-size: 13px;
font-weight: bold;
}
/* @end */
/* @group Order Summary */
/* Insert your own logo (upload separatly) */
#logo {
height: 54px;
width: 100%;
background: url(logo.png) center no-repeat;
}
#wallet{
padding-top: 40px;
background-color: #fff !important;
}
#thumbs td {
padding: 20px;
}
#thumbs h3 {
color: #000 !important;
clear: both;
font-size: 13px;
line-height: 120%;
}
#thumbs span, #thumbs h3 span {
color: #000;
font-size: 13px;
line-height: 120%;
}
#container.slim #overview table#thumbs td {
padding: 10px;
}
#cost, #order-num {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
color: #000;
font-weight: bold;
line-height: 120%;
}
#steps {
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
line-height: 120%;
font-size: 13px;
}
/* @end */
/* @group Address+Emails+Buttons */
#main #overview, #email, #addresses, .group, #marketing-box, .address-notification {
background: #fff;
border: 1px solid #e3e4e1;
}
#buttons {
background:#f9f9f9;
border-bottom:1px solid #e3e4e1;
border-top: 1px solid #e3e4e1;
margin:0;
padding:10px;
}
.group h3, .pgroup h3 {
color: #333;
border-bottom:1px solid #e3e4e1;
}
.group input{
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif !important;
padding: 3px;
font-size: 13px;
border: 1px solid #e3e4e1;
}
#container.slim {
width: 440px;
}
#container.slim #header, #container.slim #main, #container.slim #footer {
background-image: none;
}
#container.slim a:hover {
color: #ff809d;
}
/* @end */
/* @group Footer */
#footer p {
display: none;
}
/* @end */
/* @group Errors */
.field-with-errors{
margin-bottom: 20px;
border: 1px solid #FBC2C4;
background: #FBE3E4;
padding: 10px 5px;
}
.field-with-errors .error-message {
color: #8a1f11;
}
/* @end */