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 checkout and accounts editor. You can add your company logo, change the colors, or choose a new font to make the checkout match your business.

Some of the branding that you choose for your checkout pages also applies to your new customer account pages.

Tip

If you're on the Shopify Plus plan, then you can use Checkout Blocks to make advanced checkout branding customizations without making API calls.

Considerations for customizing the style of your checkout

Before you customize the style of your checkout, review the following considerations:

• The Configurations area in the Checkout settings section of the admin is hidden until after you've chosen a plan and created your first product.
• If you're on the Shopify Plus, then you can use the Checkout Branding API for advanced checkout branding customizations.
• If you need help customizing the style of your cart and checkout, then you can hire a Shopify Partner. Learn more about hiring a Shopify Partner.
• 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.

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 display best with a resolution of 1000 x 400 pixels.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Settings.
5. In the Checkout header section, tap Add image on the Background image option.
6. Tap Add images to upload an image file, or select an existing image from your library.
7. Tap Save.

Add a logo to the checkout page

You can add your store logo to the checkout pages. If you use a banner image, then the logo displays on top of it. You can align your logo on the left, right, or center of the banner area on the checkout pages.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Settings.
5. In the Logo section, tap Add image.
6. Tap Add images to upload an image file, or select an existing image from your library.
7. Optional: In the Checkout header section, adjust your logo with the following settings:
   • Use Logo max width to select a size for the logo, in pixels.
   • Use Logo alignment to select whether your logo displays on the left, center, or right of the banner.
   • Use Logo position to select where on the checkout the logo displays.
8. Tap 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 enter their shipping and payment information, so make sure that you can clearly read the fields against the background.

Smaller images repeat vertically and horizontally in the background, similar to tiles. You can't add both a background image and color.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Settings.
5. In the Background 1 section, add a background color or image.
   • To add a color, tap Background color to open the color picker, then choose a color or enter a hexadecimal code.
   • To add an image, in the Background image section, tap Add image. Tap Add images to upload an image file, or select an existing image from your library.
6. Tap Save.

Change the color of the form fields

You can change the color of the fields to make them white or transparent. You might want to make the fields transparent so a background image is visible. Make sure that you can clearly read the text in the fields.

Plan requirement

If you set a custom value for form fields using the Checkout Branding API, then an additional Custom (Set via API) option displays as an option. This is available to stores on the Shopify Plus plan only.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Settings.
5. In the Color section, go to Form field and card background, and then tap Transparent or White.
6. Tap 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 displays. You can add a background image or color to the order summary. You can click Show order summary on the preview in the theme editor to make sure that you're satisfied with the way the order summary displays.

Smaller images repeat vertically and horizontally in the background, similar to tiles.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Settings.
5. In the Background 2 section, add a background color or image:
   • To add a color, tap Background color to open the color picker, then choose a color or enter a hexadecimal code.
   • To add an image, in the Background image section, tap Add image. Tap Add images to upload an image file, or select an existing image from your library.
6. Tap 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.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Settings.
5. Under the image that you want to replace, tap Change to select one from your library, or explore free images.
6. Tap Save.

To remove an image, click Change > Remove image. This doesn't delete the image from Shopify.

Add image alt text

After you add images to your checkout pages, you can add image alt text. This text can help with accessibility and SEO. Learn more about search engine optimization.

Steps:

1. On the image that you want to add alt text to, click Edit.
2. Under Alt text, 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.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Settings.
5. In the Typography section, tap the Headings drop-down menu or the Body drop-down menu, and then select a font.
6. Tap Save.

Change button and accent colors on the checkout page

You can change the color of the buttons, error messages, and accents such as 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:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Settings.
5. In the Colors section, tap the color box beside Accents, Buttons, or Errors to open the color picker, then choose a color or enter a hexadecimal code.
6. Tap Save.

Change your checkout layout

By default, the checkout layout on your store is set to be a one-page checkout. You can switch between one-page checkout and three-page checkout from your Shopify admin. Review the differences between the one-page and three-page checkouts before changing your checkout layout.

When you switch your checkout layout, the preview in your checkout and accounts editor doesn't display in real time. After you save your changes, navigate to your storefront checkout to view your new checkout layout.

Steps:

Android

1. From the Shopify app, tap the … button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize.
4. In the checkout and accounts editor, tap the gear icon to access the Settings sidebar.
5. In the Checkout layout section, tap One-page checkout or Three-page checkout to set the checkout layout.
6. Tap Save.

Display the discount code field by default on mobile devices

Note

This feature is available only to stores on the Shopify Plus plan.

By default, when a customer checks out on a mobile device, the order summary and discount code field are hidden. The customer can tap Show order summary to expand their full order summary details and display the discount code field, so they can add a discount code or gift card code to their order.

You can change the default behavior to always display the order summary and discount code field when checking out on a mobile device. The customer can tap Hide order summary to hide the discount code field.

Your checkout must be using the three-page checkout layout to access this setting.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, tap Sections.
5. On the Information, Shipping or Payments page, tap Order summary.
6. Activate the Always show discount code field setting.
7. Tap Save.

Add app blocks to your checkout pages

You can add features such as custom banners or loyalty rewards to your customer checkout experience using app blocks. Some checkout apps, including those that customize the information, shipping, and payment pages in checkout, are available only to stores on the Shopify Plus plan. Refer to checkout app availability when choosing an app to add to your checkout.

Learn more about customizing your checkout configurations with apps.

Steps:

Android

1. From the Shopify app, tap the ☰ button, and then tap Settings.
2. In the Store settings section, tap Checkout.
3. In the Configurations section, tap Customize on the checkout that you want to customize.
4. In the checkout and accounts editor, select the page that you want to add an app to, and then tap Sections.
5. Tap ⊕ Add app block.
6. In the Apps available for this page section, tap the app that you want to add to your checkout. The app is automatically placed in the recommended area on the page.
7. Tap Save.