Setting up your checkout branding

You can customize the branding of your checkout pages in the checkout editor. You can add your brand's logo, add a background image, change the colors, and choose a new font to make the checkout page match your business. For advanced checkout branding customizations, refer to Checkout Branding API.

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

Your customers use the checkout page to enter their shipping and payment information for their orders. Most businesses keep the checkout's design simple to make it easy to read and to avoid distracting customers. Choose colors with high contrast, and images that don't draw attention from the words on the page.

You can add a logo to the header of your checkout. You can adjust the logo's size, alignment, and position.

Steps:

  1. From your Shopify admin, go to Settings > Checkout.
  2. In the Customize your checkout section, click Customize next to the checkout that you want to edit.
  3. Click the gear icon.
  4. In the Logo area, add your logo:
    1. Click Select image.
    2. Click Add images to upload a new image or select an image that you've already uploaded to your library.
    3. Click Done.
  5. In the Logo max width area, adjust the size of your logo.
  6. In the Logo alignment area, select a left, center, or right alignment of your logo.
  7. In the Logo position area, select a checkout form, order summary, or full width position for your logo.
  8. Click Save.

Add a background image or a color to your checkout form

You can add a background color or an image to your checkout form. You can add only a background color or an image, but not both.

After you add a background color or an image, make sure that your checkout fields can be clearly read.

Steps:

  1. From your Shopify admin, go to Settings > Checkout.
  2. In the Customize your checkout section, click Customize next to the checkout that you want to edit.
  3. Click the gear icon.
  4. In the Background 1 section, add a background image or a color:
    • To add a background image, do the following:
      1. Click Select image.
      2. Click Add images to upload a new image or select an image that you've already uploaded to your library.
      3. Click Done.
    • To add a background color, do the following:
      1. Click the color circle next to the Background color to open a color picker.
      2. Choose a color or enter a hexadecimal color code.
  5. Click Save.

Add a background image or a color to your order summary

You can add a background color or an image to your order summary. You can add only a background color or an image, but not both.

After you add a background color or an image, make sure that your checkout fields can be clearly read.

Steps:

  1. From your Shopify admin, go to Settings > Checkout.
  2. In the Customize your checkout section, click Customize next to the checkout that you want to edit.
  3. Click the gear icon.
  4. In the Background 2 section, add a background image or a color:
    • To add a background image, do the following:
      1. Click Select image.
      2. Click Add images to upload a new image or select an image that you've already uploaded to your library.
      3. Click Done.
    • To add a background color, do the following:
      1. Click the color circle next to the Background color to open a color picker.
      2. Choose a color or enter a hexadecimal color code.
  5. Click Save.

Customizing the colors of your checkout

You can change the color of your checkout buttons, error messages, and accents. You can also make your checkout fields white or transparent.

After you change any colors of your checkout page, make sure that you can clearly read the text against the backgrounds of the order entry and order summary areas.

Change accent, button, and error colors

  1. From your Shopify admin, go to Settings > Checkout.
  2. In the Customize your checkout section, click Customize next to the checkout that you want to edit.
  3. Click the gear icon.
  4. In the Color section, choose the colors:
    1. Click the color circle next to Accent, Buttons, or Error to open a color picker.
    2. Choose a color or enter a hexadecimal color code.
  5. Click Save.

Change the color of the form fields

  1. From your Shopify admin, go to Settings > Checkout.
  2. In the Customize your checkout section, click Customize next to the checkout that you want to edit.
  3. Click the gear icon.
  4. In the Color section, click the Form field and card background drop-down menu, and then select white or transparent color. If you set a custom value for form fields using the Checkout Branding API, then an additional Custom (Set via API) option displays.
  5. Click Save.

Customize the font of your checkout

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

Steps:

  1. From your Shopify admin, go to Settings > Checkout.
  2. In the Customize your checkout section, click Customize next to the checkout that you want to edit.
  3. Click the gear icon.
  4. In the Typography section, change the font of your checkout text headings and body:
    1. In the Headings or Body area, click the font name to open a drop-down menu.
    2. Select the font that you want to apply to your checkout.
  5. Click Save.
Ready to start selling with Shopify?Try it free