Help
Log in

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.

On this page

Considerations for customizing the style of your checkout and customer accounts

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.

Create a color palette for your checkout and customer accounts

You can create a color palette as a quick way to reuse colors across multiple settings in your checkout and accounts editor. When you change a color from the color palette, all settings that use that color dynamically update to the new color. It also means that you don't need to remember hexadecimal codes when you want to use a color more than one time.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Settings to access the Settings sidebar.

  4. In the Color palette section, click + to select a color to add to the palette.

  5. Optional: To remove a color that you no longer need in your palette:

    1. Click the color and then click Delete color.
    2. Select a replacement color to replace the deleted color wherever it's used in your checkout.
    3. Click Confirm.

  6. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 palette section, tap + to select a color to add to the palette.

  6. Optional: To remove a color that you no longer need in your palette:

    1. Tap the color and then tap Delete color.
    2. Select a replacement color to replace the deleted color wherever it's used in your checkout.
    3. Tap Confirm.

  7. Tap Save or ✓.

Using the color picker in the checkout and accounts editor

When customizing a field in the checkout and accounts editor that requires a color, you can use the color picker to help you choose the color that you want. In the color picker, you can select a color in any of the following ways:

  • Use the color slider to change the hue of available colors in the picker preview.
  • Use the hexadecimal field to enter a code for a particular color, such as #0000FF for a standard, pure blue.
  • Use Eye Dropper to pick a specific color using your cursor from anywhere on your screen.
  • Use Grid Icon to narrow the number of available colors in the picker preview to 40.

The Color palette section displays all the color swatches that you've added to the color palette in the checkout and accounts editor.

If you've manually selected any colors previously during the session in the checkout and accounts editor, then you can also select from your Recently used color swatches.

Customize the colors for the header

At the top of each checkout and customer account page, a header displays your store name. You can change the background color of that banner. Choose a color that matches your brand.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Settings to access the Settings sidebar.

  4. In the Header section, make any of the following color customizations:

    • Use Background to set a color for the background of the header.
    • Use Accent to set a color for the cart icon and links in the header.

  5. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 Header section, make any of the following color customizations:

    • Use Background to set a color for the background of the header.
    • Use Accent to set a color for the cart icon and links in the header.

  6. Tap Save or ✓.

You can add your store logo to the checkout pages. You can align your logo on the left, right, or center of the banner area on the checkout pages.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Settings to access the Settings sidebar.

  4. In the Logo section, click the Image field.

  5. Click Select from library to select an existing image from your library.

  6. Optional: In the Logo section, adjust your logo with the following settings:

    • Use Width to select a size for the logo, in pixels.
    • Use Alignment to select whether your logo displays on the left, center, or right of the banner.

  7. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 the Image field.

  6. Tap Select from library to select an existing image from your library.

  7. Optional: In the Logo section, adjust your logo with the following settings:

    • Use Width to select a size for the logo, in pixels.
    • Use Alignment to select whether your logo displays on the left, center, or right of the banner.

  8. Tap Save or ✓.

Add a background color to the main content area

You can add a background 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.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click the gear icon to access the Settings sidebar.

  4. In the Main section, click Color to open the color picker, then choose a color or enter a hexadecimal code.

  5. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 Main section, tap Color to open the color picker, then choose a color or enter a hexadecimal code.

  6. Tap Save or ✓.

Change the color of the form fields

You can change the color of the form fields in your checkout. You can also change the color of error messages to make them white or transparent. Make sure that you can clearly read the text in the fields.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Settings to access the Settings sidebar.

  4. In the Input fields section, make any of the following customizations:

    • To change the color of input fields, go to Input, and then click Transparent or White.
    • To change the color of the error messages, click the Error field and then select a color.

  5. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 Input fields section, make any of the following customizations:

    • To change the color of input fields, go to Input, and then tap Transparent or White.
    • To change the color of the error messages, tap the Error field and then select a color.

  6. Tap Save or ✓.

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:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Settings to access the Settings sidebar.

  4. In the Order summary section, click order summary.

  5. Add a background color or image:

    • To add a color, click Background to open the color picker, and then choose a color or enter a hexadecimal code.
    • To add an image, click Image > Select. Click Select from library to select an existing image from your library.

  6. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 Order summary section, tap order summary.

  6. Add a background color or image:

    • To add a color, tap Background to open the color picker, and then choose a color or enter a hexadecimal code.
    • To add an image, tap Image > Select. Tap Select from library to select an existing image from your library.

  7. Tap Save or ✓.

Change or remove an image from the order summary

You can change or remove the image that you've added to the order summary.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Settings to access the Settings sidebar.

  4. In the Order summary section, click order summary.

  5. Under the image that you want to replace, click Change to select one from your library, or explore free images.

  6. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 Order summary section, tap order summary.

  6. Under the image that you want to replace, tap Change to select one from your library, or explore free images.

  7. Tap Save or ✓.

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

Change the font on the checkout page

You can select from a list of fonts to customize your checkout pages.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Settings to access the Settings sidebar.

  4. In the Typography section, click the Headings drop-down menu or the Body drop-down menu, and then select a font.

  5. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 or ✓.

Change button and accent colors on the checkout page

You can change the color of the buttons 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:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Settings to access the Settings sidebar.

  4. In the Accent and buttons section, click the color box beside Accents or Buttons to open the color picker, then choose a color or enter a hexadecimal code.

  5. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 Accent and buttons section, tap the color box beside Accents or Buttons to open the color picker, then choose a color or enter a hexadecimal code.

  6. Tap Save or ✓.

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:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click the gear icon to access the Settings sidebar.

  4. In the Checkout layout section, click the current layout to open the checkout layout options.

  5. Click One-page checkout or Three-page checkout to set the checkout layout.

  6. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 or ✓.

Manage the Buy again button

A Buy again button displays on your order status page to let customers reorder items that they've purchased.

Steps:

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click the Settings icon.

  4. In the Buy again button section, turn the button on or off.

Display the discount code field by default on mobile devices

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:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click the sections icon to access the Sections sidebar.

  4. On the Information, Shipping or Payments page, click Order summary.

  5. Activate the Always show discount code field setting.

  6. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings 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 or ✓.

Add blocks to your checkout pages

You can add features such as custom banners or loyalty rewards to your customer checkout experience using 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.

You can add existing blocks directly to sections on pages using the Sections sidebar or the Apps sidebar.

Learn more about customizing your checkout configurations with apps.

Add blocks using the Sections sidebar

You can add blocks from apps that you've installed to the page you're currently viewing using the Sections sidebar. Only blocks that are available to be installed on a page or section display as selectable options.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, select the page that you want to add an app to, and then click Sections to access the Sections sidebar.

  4. Click ⊕ Add block in the section you want to add an app to.

  5. Click the block that you want to add.

  6. Customize the block as necessary:

    • To re-arrange the location of the block, drag and drop the block up or down in the Sections list, or use the move buttons in the preview window.
    • Click the block to configure any block settings.

  7. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings Settings.

  2. In the Store settings section, tap Checkout.

  3. In the Configurations section, tap Customize on the checkout configuration 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 block in the section you want to add an app to.

  6. Tap the block that you want to add.

  7. Customize the block as necessary:

    • To re-arrange the location of the block, drag and drop the block up or down in the Sections list, or use the move buttons in the preview window.
    • Tap the block to configure any block settings.

  8. Tap Save or ✓.

Add blocks using the Apps sidebar

You can add blocks from apps you've installed to the page you're currently viewing using the Apps sidebar. Only pages that are available to have specific blocks installed on them display as options when adding a block.

Learn more about using the Apps sidebar in the checkout and accounts editor.

Steps:

Desktop

  1. From your Shopify admin, go to Settings > Checkout.

  2. In the Configurations section, click Customize next to the configuration that you want to customize.

  3. In the checkout and accounts editor, click Apps to access the Apps sidebar.

  4. Next to the block that you want to add, click ⊕.

  5. In the Add to pop-out, click the page that you want to add the block to.

  6. Customize the block as necessary:

  7. Click Save.

Mobile

  1. From the Shopify app, tap Menu, and then tap Settings Settings.

  2. In the Store settings section, tap Checkout.

  3. In the Configurations section, tap Customize on the checkout configuration that you want to customize.

  4. In the checkout and accounts editor, tap Apps.

  5. Next to the block that you want to add, tap ⊕.

  6. In the Add to pop-out, tap the page that you want to add the block to.

  7. Customize the block as necessary:

  8. Tap Save or ✓.