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 pretty simple. Your customers will use these pages to set up 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 too much attention from the words on the page.

Checkout url

As of July 20, 2017, your primary domain URL will appear on your online store's checkout page. For example, if your primary domain is set to yourstorename.com, then merchants will see that URL when they enter checkout. You can change your primary domain from the Domains page in your Shopify admin.

Grow your business

Want a domain name that reflects your brand? You can purchase a custom domain name to give your customers a completely branded experience.

Note

Links to abandoned checkouts will not be affected by this change.

Upload a background image for the banner

At the top of each checkout page, a banner features 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.

To upload a background image:

  1. In the Style section, click Customize checkout to open the theme editor.

  2. In the BANNER section, click Upload image, or select an image that you have already uploaded to your library.

  3. Click Save.

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 will appear on top of it. You can position your logo on the left, right, or center of the banner area on the checkout pages.

To add the logo:

  1. In the Style section, click Customize checkout to open the theme editor.

  2. In the LOGO section, click Upload image, or select an image that you have already uploaded to your library.

  3. Select a position for the logo.

  4. Select a size for the logo.

  5. Click Save.

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 will 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.

To add a background image or color:

  1. In the Style section, click Customize checkout to open the theme editor.

  2. In the MAIN CONTENT AREA section, add a background color or image.

  • If you're adding a color, then click the box beside Background color to open a color picker, then choose a color or enter a hexadecimal code.

  • If you're adding an image, then click Upload image, or select an image that you have already uploaded to your library. Smaller images will repeat vertically and horizontally on the background, like tiles.

  1. Click Save.

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.

To change the color of the form fields:

  1. In the Style section, click Customize checkout to open the theme editor.

  2. In the MAIN CONTENT AREA section, click the Form fields drop-down to select the color you want.

  3. Click Save.

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. Be sure to 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.

To add a background image or color:

  1. In the Style section, click Customize checkout to open the theme editor.

  2. In the ORDER SUMMARY section, add a background color or image.

  • If you're adding a color, then click the box beside Background color to open a color picker, then choose a color or enter a hexadecimal code.

  • If you're adding an image, then click Upload image, or select an image that you have already uploaded to your library. Smaller images will repeat vertically and horizontally on the background, like tiles.

  1. Click Save.

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.

To change an image:

  1. In the Style section, click Customize checkout to open the theme editor.

  2. Under the image that you want to replace, click Update and choose whether to upload an image or select one from your library.

  3. Click Save.

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.

To add image alt text:

  1. Under an image, click Update, then select Edit image.

  2. Enter alt text for the image. Choose a short, descriptive title for the image.

  3. 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.

To choose heading and body fonts for the checkout page:

  1. In the Style section, click Customize checkout to open the theme editor.

  2. In the TYPOGRAPHY section, click the Headings drop-down or the Body drop-down, and then select a font.

  3. Click Save.

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.

To choose colors for the buttons, error messages, and accents:

  1. In the Style section, click Customize checkout to open the theme editor.

  2. In the COLORS section, click the color box beside Accents, Buttons, or Errors to open a color picker, then choose a color or enter a hexadecimal code.

  3. Click Save.

Want to discuss this page?

Visit the Shopify Community

Ready to start selling online with Shopify?

Try it free