Appearance
Checkout
This guide describes the Theme settings > Checkout menu options. Use the settings to customize parts of your store's Checkout page.
In the previous image, on the right side, a custom logo image is displayed at the top of a store's Checkout page On the left side, in Theme settings > Checkout, the custom logo image is set using the Logo image selector.
For general guidance with adjusting a theme setting, refer to Settings overview and Shopify help: Theme settings
Customize your store's checkout
To customize your store's Checkout page:
Go to Theme settings > Checkout.
Select a setting described in the following table.
| Setting name | Description |
|---|---|
| Banner > Background image | Use the Background image selector options to setup a background image for the Checkout page's banner area. The recommended image dimensions are 1000px x 400px (pixels). Refer to Setup images. |
| Logo > Custom image | Use the Custom image selector options to setup a custom image for the Checkout page's logo area. Refer to Setup images. |
| Logo > Position | Use the Position dropdown to set a position for the logo image, inside the Checkout page's logo area. The options are Left, Center or Right. |
| Logo > Logo size | Use the Logo size dropdown to set a size for the logo image, inside the Checkout page's logo area. The options are Small, Medium or Large. |
| Main content area > Background image | Use the Background image selector options to setup a background image for the Checkout page's main content area. The image is repeated vertically and horizontally. Refer to Setup images. |
| Main content area > Background color | To set a background color for the Checkout page's main content area, select Background color, and then use the color picker, enter a hex color value, or choose a Currently used color. |
| Main content area > Form fields | Use the Form fields dropdown to set a background color for the data entry fields, inside the main content area's data submission form, on the Checkout page. The options are Transparent or White. |
| Order summary > Background image | Use the Background image selector options to setup a background image for the Checkout page's order summary area. The image is repeated vertically and horizontally. Refer to Setup images. |
| Order summary > Background color | To set a background color for the Checkout page's order summary area, select Background color, and then use the color picker, enter a hex color value, or choose a Currently used color. |
| Typography > Headings | Use the Headings dropdown to select a font for heading (title) text on the Checkout page. |
| Typography > Body | Use the Body dropdown to select a font for body text on the Checkout page. |
| Colors > Accents | To set a color for the Checkout page's accented text, select Accents, and then use the color picker, enter a hex color value, or choose a Currently used color. The color applies to links, highlights, and checkmarks on the Checkout page. |
| Colors > Buttons | To set a color for the Checkout page's buttons, select Buttons, and then use the color picker, enter a hex color value, or choose a Currently used color. The color applies to Gift card, Discount, and Next step buttons on the Checkout page. |
| Colors > Errors | To set a color for checkout error message, select Errors, and then use the color picker, enter a hex color value, or choose a Currently used color. The color applies to error and invalid field messages on the Checkout page. |
| Checkout settings > Visit the admin | Follow the link Visit the admin to open the Checkout page in your store's Admin. Use the page to adjust Checkout options set by Shopify, refer to Shopify help: Customizing the style of your checkout |
Setup images
To setup images on your store's Checkout page.
Go to Theme settings > Checkout.
In the Checkout menu area, locate the image selector for the type of image you want setup.
Use the following image selector options to setup an image.
- To add an image, choose Select image, and then upload an image or select an image file from your store's file library.
- To edit an uploaded image, select Edit in the image selector’s thumbnail preview area. Refer to Edit an image inside a section or block.
- To replace an image, choose Change > Change image, and then select or upload a new image.
- To remove an image, select Change > Remove image.
- Select the Add alt text link, and then enter a brief description of the image into the Image alt text box. The description improves search engine optimization (SEO), and provides greater accessibility for customers who use screen-reading tools. The text is saved immediately. Refer to Shopify help: Adding alt text to media