Customizing the style of your checkout
If you sell your products using an online store, then you can customize the style of your checkout pages in the theme editor. Add your company logo, change the colors, or choose a new font to make the checkout match your business.
Although you might want to add a lot of color and interest to your checkout pages, it's best to keep the design simple. Your customers use these pages to enter shipping and payment information for their orders, and you don't want to distract them or make the information hard to read. Choose colors with high contrast, and images that don't draw attention from the words on the page.
On this page
- Upload a background image for the banner
- Add a logo to the checkout page
- Add a background image or color to the main content area
- Change the color of the form fields
- Add a background image or color to the order summary
- Change or remove an image from the checkout page
- Change the font on the checkout page
- Change button and accent colors on the checkout page
- Add features to the post-purchase page at checkout
Upload a background image for the banner
At the top of each checkout page, a banner displays your store name. You can change the background image of that banner. Choose an image that matches your brand. For example, if you sell jewelry, then an image of colorful beads might be a good match. Banner images look best with a resolution of 1000 x 400 pixels.
Steps:
Add a logo to the checkout page
You can add your store logo to the checkout pages. If you're using a banner image, then the logo appears on top of it. You can position your logo on the left, right, or center of the banner area on the checkout pages.
Steps:
Add a background image or color to the main content area
You can add a background image or color to the main content area of the checkout pages. This is the area where your customers enter their shipping and payment information, so make sure that you can still clearly read the fields on the background. You can't add both a background image and color.
Steps:
Change the color of the form fields
You can change the color of the fields to make them either white or transparent. You might want to make the fields transparent so a background image shows through. Make sure that you can clearly read the text in the fields.
Steps:
Add a background image or color to the order summary
When a customer clicks Show order summary on a checkout page, a list of the products they're buying appears. You can add a background image or color to the order summary. Make sure you preview your choices to make sure that you're happy with the way the order summary looks. You can click Show order summary on the preview in the theme editor.
Steps:
Change or remove an image from the checkout page
You can change or remove any of the images that you add to the checkout pages.
Steps:
To remove an image, click Remove beneath the image. This doesn't delete the image from Shopify.
Add image alt text
When you're happy with the images on your checkout pages, it's a good idea to add image alt text. This text can help with accessibility and SEO. Learn more about search engine optimization.
Steps:
- Under an image, click Update, then select Edit image.
- Enter alt text for the image. Choose a short, descriptive title for the image.
- Click Save.
Change the font on the checkout page
You can select from a list of fonts to customize your checkout pages. You can't change the color of the text on the checkout page.
Steps:
Change button and accent colors on the checkout page
You can change the color of the buttons, error messages, and accents like links on the checkout pages. If you change the colors, then make sure that you can clearly read the text against the backgrounds of the main content area and order summary.
Steps:
Add features to the post-purchase page at checkout
You can add features such as customer surveys or upsell offers to your customer checkout experience using post-purchase apps. These apps add content after your customer completes their payment, but before they're presented with their order confirmation page.
To add features to your post-purchase page, you need to install and configure a checkout app, and then select that app to use on the post-purchase page in your checkout settings.
You can only use one checkout app to add post-purchase features at a time. If you have more than one app with post-purchase functionality installed, then you can select the app that you want to use in your checkout settings.
Install a checkout app to add post-purchase features
To add features to your post-purchase page, you need to use a third-party app that supports post-purchase features at checkout.
If you need help with a third-party app, then you need to contact the app developer.
Steps:
- Go to the Shopify App Store, and search for the post-purchase app that's right for your business.
- Click Add app. If you aren't logged in to your Shopify account, then you're prompted to log in.
- Click Install app.
- Go to the Apps section of your Shopify admin, and then click the name of your checkout app.
- Enter any configuration settings required.
Select an app to use on your post-purchase page
After installing and configuring a checkout app, you need to select that app to use on the post-purchase page in your checkout settings.
You can also change the app that you want to use in your checkout settings.
Steps:
- From your Shopify admin, click Settings.
- Click Checkout.
- In the Post-purchase page section, select the checkout app that you want to use.