Shopify How-To: Customizing the Checkout Page

Customizing the checkout page on your Shopify web store to match your company’s corporate identity adds professionalism which helps incentivize shoppers into completing their purchases.

Before You Begin Customizing Your Checkout Page, Consider These

  • The Configurations area under the Checkout Settings portion of the admin area is unavailable until you’ve chosen a Shopify plan and created your first product listing.
  • Shopify Plus users can use the Checkout Branding API for extended checkout branding customization options.
  • Keep your design simple. Adding your company logo and corporate imagery can make for a more professional presentation, but too many loud and vivid colors and/or visual distractions can and will distract your customers from completing their purchases. Be sure to NOT draw attention AWAY from the main goal, which is order completion.
  • If you’re unsure of how you wish to custom design your checkout page, you can hire a Shopify Design Partner (such as Diztinct) for assistance.

Uploading the Background Banner Image

The store name is displayed at the top of every checkout page in a banner. Choose a background image of the banner to match your brand. For example, imagery that’s relevant with the type of merchandise your business sells or associated within your specific market. Banner images with a resolution of 1000 x 400 pixels are optimal.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. In the Checkout Header section, click Select Image on the option for Background Image.
  5. Click on Add Image to upload an image file or, if you’ve already uploaded images, choose a presaved image from your Image Library.
  6. Save.

Add Your Logo

In addition to a background banner image, you can also add your company logo to the checkout page. If you use a background banner image, the logo will appear on top of it. The logo can be aligned left, center, or right of the banner area on the checkout page.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. Under Logo, click on Add Image to upload an image file or select a presaved image from your Image Library.
  5. Save.

Optional Enhancements

You can adjust the logo size and alignment in the Checkout Header section.

  • Adjust the size of the logo (in pixels) with Logo Max Width.
  • Align the logo left, center, or right of the banner with Logo Alignment.
  • Choose where the logo will display on the checkout page with Logo Position.

Add a Background Image or Color to the Main Content Area

Spruce up your checkout page by adding color or a background image to the main content area. Be careful not to add any loud, garish colors or images that can distract your shoppers from completing their purchases. Any and all important text should still be visible, legible, and easily identifiable even with the added color/image in the main content area.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. Under Background 1, add your background color/image.
    1. If adding color, click the box for Background Color and choose a color from the color picker or enter a hexadecimal code.
    2. If adding an image, go to Background Image > Add Image to either upload an image from your hard drive or select a presaved image from your Image Library. Note that smaller images will repeat vertically and horizontally like tiles.
  5. Save.

Change the Color of the Form Fields

The fields can be made white or transparent. If you make them transparent, you might be able to see the background image. Make sure the text in the fields is clearly legible.

NOTE FOR SHOPIFY PLUS USERS: If you use the Checkout Branding API to set a custom value for form fields, an additional Custom (Set via API) option will appear. This pertains to Shopify Plus users only.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. Under Color, click on Form Field and Card Background to reveal the drop-down menu and select your color from there.
  5. Save.

Add Color or a Background Image to the Order Summary

In the checkout page, when customers click Show Order Summary, a list of the products they’re buying appears. The order summary can be customized with a background image or color. Check that you are satisfied with the way the order summary displays by clicking Show Order Summary on the preview in the theme editor.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. Under Background 2, add your background color/image.
    1. If adding color, click the box for Background Color and choose a color from the color picker or enter a hexadecimal code.
    2. If adding an image, go to Background Image > Add Image to either upload an image from your hard drive or select a presaved image from your Image Library. Note that smaller images will repeat vertically and horizontally like tiles.
  5. Save.

Change or Delete Your Image From the Checkout Page

Any images you add to the checkout pages can be replaced or deleted.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. Find the image you want to change or delete. Click Change to select a presaved image from your Image Library,
  5. Save.

Deleting an Image From the Checkout Page

To delete an image, click Change > Remove Image. The image is not fully removed from Shopify, it’s only prevented from appearing on the checkout page.

Add Alt Text to an Image

Alt tags help with accessibility and improve SEO. It’s a good idea to add alt tags to all of your images.

  1. Choose the image that you want to add alt text and click Edit.
  2. Under Alt Text, enter a short, descriptive title for the image.
  3. Save.

Modify the Font on the Checkout Page

Choose from a list of fonts to lightly customize the text on your checkout page. You can only change the typeface, not the color of the text.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. Under Typography, click on Headings or Body to bring down the corresponding drop-down menus.
  5. Select a font from the drop-down menu(s).
  6. Save.

Modify the Layout of the Checkout

By default, one-page checkout is selected. One-page (or one-click) checkouts are the most preferred options by shoppers as it streamlines the checkout process. Merchants also like one-page checkouts because they expedite and optimize the checkout process which helps prevent shoppers from abandoning their carts. Shopify allows for the switching between one-page and three-page checkouts in the admin area, though unless you have good reason to not use one-page checkout, it’s best to leave this option alone.

NOTE: When you change your checkout layout in your checkout and accounts editor, the preview does not display in real time. You can view your new checkout layout in the storefront only after you save your changes.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. In Checkout Layout, click the current layout to show the options for checkout layout.
  5. Choose from One-Page Checkout or Three-Page Checkout.
  6. Save.

Turn On Display Order Summary by Default for Mobile Users (Shopify Plus)

For mobile customers shopping on a Shopify Plus-powered web store, the order summary (list of the items in their cart, their subtotal, and the discount code and gift card field) is set to hidden by default. The mobile customer can still access the order summary by tapping on Show Order Summary.

If your store is on a Shopify Plus plan, you can set the default behavior of the order summary to show on default. Then, the customer can hide their order summary by tapping Hide Order Summary.

This will only work if your store is using Three-Page Checkout.

NOTE: This option is only available for Shopify Plus merchants.

  1. From the Shopify Admin, go to Settings > Checkout.
  2. Go to the Configurations section, find the checkout configuration you want to customize and click Customize.
  3. In the Checkout and Accounts Editor, access the Settings sidebar by clicking the gear icon.
  4. In either the Information; Shipping; or Payments pages, click on Order Summary.
  5. Click on Always Show Discount Code Field.
  6. Save.

Add Supplementary Apps to your Checkout Pages

One of Shopify’s major advantages over other eCommerce platforms is its library of add-ons and supplementary apps that expand upon Shopify’s own base feature set. The checkout experience of your customers can be enhanced with features such as custom banners and loyalty rewards using app blocks. Certain checkout apps, including those that customize the payment; shipping; and information pages, are only available for upper-tier users such as Shopify Plus users. Verify the availability of checkout apps before choosing one.

Leave a Reply

Your email address will not be published. Required fields are marked *