Checkout and customer accounts

LOCATION

Checkout can be found in the Theme settings ↗ section. Theme settings control the colors, typography and other common elements of your online store.

⬇️ On this page:

  1. Checkout: overview
  2. Managing checkout:
    1. Upload a background image for the banner
    2. Add a logo to the checkout page
    3. Add a background image or color to the main content area
    4. Change the color of the form fields
    5. Add a background image or color to the order summary
    6. Change or remove an image from the checkout page
    7. Change the font on the checkout page
    8. Change button and accent colors on the checkout page

Checkout: overview


You can use the secure Shopify checkout to accept orders and take payments online. After customers add products to their cart, they use your checkout to enter shipping and payment details, and place their order. Customers can also review your store policies from your checkout.

You can view and change your checkout settings, including how you collect customer email addresses for promotional marketing, from the Checkout settings page in your Shopify admin. If you have an online store, you can also change the appearance and layout of the checkout pages by editing your online store theme.

When a customer completes any step of the checkout, their cart is checked against your store's inventory. If the inventory is available, the customer can proceed through the checkout steps. If the inventory has become unavailable, an error message is displayed. Inventory is held only when the customer submits their payment information. If a payment fails, the hold is released until the customer reaches the payment method page again.


Shopify's resources:

  1. Checkout in Theme settings ↗
  2. Shopify checkout ↗

Managing checkout

Steps

  1. From your Shopify admin, go to Online Store > Themes ↗.
  2. Find the theme that you want to edit, and then click Customize.
  3. Click Theme settings > Styles.
  4. Using the drop-down menus, select your theme style options.
  5. Click Save.


Note

If you need more information about the checkout process, you can visit the Shopify Checkout page ↗. Whether you have questions about payment methods, shipping options, or return policies, the Shopify Checkout page has got you covered. Happy shopping!


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

  1. From your Shopify admin, go to Settings > Checkout ↗.
  2. In the Checkout style section, click Customize checkout to open the theme editor.
  3. In the theme editor, click the gear icon to access the Theme settings.
  4. Click Checkout.
  5. In the Banner section, click Select image.
  6. Click Add images to upload an image file, or select an image that you have already uploaded to your library.

  7. Click Save.


Add a logo to the checkout page


You can add a logo to the checkout pages. If you're using a banner image, the logo appears on top. Position it left, right, or center.


Steps

  1. From your Shopify admin, go to Settings > Checkout ↗.
  2. In the Checkout style section, click Customize checkout to open the theme editor.
  3. In the theme editor, click the gear icon to access the Theme settings.
  4. Click Checkout.
  5. In the Logo section, click Select image.
  6. Click Add images to upload an image file, or select an image that you have already uploaded to your library.
  7. Select a position for the logo.
  8. Select a size for the logo.
  9. Click Save.


Add a background image or color to the main content area

You can style the main content area of the checkout pages with a background image or color. Ensure that the fields on the background are still easily readable. It's not possible to use both a background image and color simultaneously.


Steps

  1. From your Shopify admin, go to Settings > Checkout ↗.
  2. In the Checkout style section, click Customize checkout to open the theme editor.
  3. In the theme editor, click the gear icon to access the Theme settings.
  4. Click Checkout.
  5. 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 Select image > Add images to upload an image file, or select an image that you have already uploaded to your library. Smaller images repeat vertically and horizontally on the background, like tiles.
  6. Click Save.


Change the color of the form fields

You can change the field color to white or transparent. This allows the background image to be visible. Ensure the text in the fields is legible.

Steps

  1. From your Shopify admin, go to Settings > Checkout ↗.
  2. In the Checkout style section, click Customize checkout to open the theme editor.
  3. In the theme editor, click the gear icon to access the Theme settings.
  4. Click Checkout.
  5. In the Main content area section, click the Form fields drop-down to select the color you want.
  6. Click Save.


Add a background image or color to the order summary


When a customer clicks on 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.

Steps

  1. From your Shopify admin, go to Settings > Checkout ↗.
  2. In the Checkout style section, click Customize checkout to open the theme editor.
  3. In the theme editor, click the gear icon to access the Theme settings.
  4. Click Checkout.
  5. 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 Select image > Add images to upload an image file, or select an image that you have already uploaded to your library. Smaller images repeat vertically and horizontally on the background, like tiles.
  6. 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.

Steps

  1. From your Shopify admin, go to Settings > Checkout ↗.
  2. In the Checkout style section, click Customize checkout to open the theme editor.
  3. In the theme editor, click the gear icon to access the Theme settings.
  4. Cick Checkout.
  5. Under the image that you want to replace, click Change to select one from your library, or explore free images.
  6. Click Save.

Note

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

  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 choose fonts for your checkout pages. Text color cannot be modified on the checkout page.


Steps

  1. From your Shopify admin, go to Settings > Checkout ↗.
  2. In the Checkout style section, click Customize checkout to open the theme editor.
  3. In the theme editor, click the gear icon to access the Theme settings.
  4. Click Checkout.
  5. In the Typography section, click the Headings drop-down or the Body drop-down, and then select a font.
  6. Click Save.


Change button and accent colors on the checkout page

You can customize button, error message, and link colors on checkout pages. Ensure that the text is legible against the main content area and order summary backgrounds.


Steps

  1. From your Shopify admin, go to Settings > Checkout ↗.
  2. In the Checkout style section, click Customize checkout to open the theme editor.
  3. In the theme editor, click the gear icon to access the Theme settings.
  4. Click Checkout.
  5. 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.
  6. Click Save.

Still need help? Contact Us Contact Us