Skip to main content

Add Background Image or Color to the Order Summary

Last updated: November 18 2024

Written and researched by experts at Avada Learn more about our methodology

Want to create a checkout page that's beautiful and on-brand for your Shopify store? Discover how to easily add a background image or color to your order summary—a small change that can make a significant difference in your customers' experience!

Below is my writing on how to add a background image or color to the order summary on Shopify. I hope you read these instructions carefully and practice them in your store.

How to Add Background Image/Color to the Order Summary on Desktop

Improving your Shopify store's checkout experience involves creating a visually cohesive brand identity and leading to increased sales. Let's begin by exploring how to add a background image or color to your order summary on a desktop.

Step 1: Select “Customize” in Online Store

First, log in to your Shopify account and navigate to your store management section. In the left-hand dashboard, under Sales Channels, select "Online Store," then click "Customize."

How to Add Background Image shopify 1

Step 2: Choose Theme Settings

When you enter the theme editor, click on the “⚙️” icon (Theme settings) to access the theme settings.

How to Add Background Image shopify  2

Step 3: Click “Checkout”

In the Theme settings, scroll down and select the "Checkout" section.

How to Add Background Image shopify   3

Step 4: Edit “Background image or color” in Order Summary

Continue scrolling down until you find "Order Summary." Here, you can choose the image you want to replace and select your preferred background color.

How to Add Background Image shopify   4

Step 5: Select Save

After making your edits, click "Save" to keep your changes.

How to Add Background Image shopify   5

How to Add Background Image/Color to the Order Summary on iOS

To create a consistent brand experience, maintaining visual consistency across all devices is crucial. Let’s go through the steps to add a background image or color to the order summary on iOS.

Step 1: Select Online Store; Click Customize

First, log in to your Shopify admin panel. Then, select "Online Store." Next, click on "Customize."

Step 2: Choose “Checkout” in Theme Settings

After accessing the Customize section, you will be directed to your store's theme. Here, tap on the "..." icon, then select "Theme settings," and click on "Checkout."

Step 3: Add “Background Image or Color” in the Order Summary

In the "Checkout" section, scroll down to the Order Summary area and add your Background image and Background color.

Step 4: Select Save

Once you have finished editing, click "Save." You have now completed all the steps to add a Background Image/Color to the Order Summary on iOS.

How to Add Background Image/Color to the Order Summary on Android

In addition to adding a background image or color to the order summary on iOS, you should also do this on Android. This will ensure a smooth checkout experience across all platforms. Here’s how to do it:

Step 1: Access “Customize”

Begin by logging into your Shopify admin dashboard. From there, navigate to the "Online Store" option in the menu. Once you’re in, click on "Customize" to enter the theme editor.

Step 2: Select Checkout

Within the Customize interface, you'll find your store's theme settings. Look for the "..." icon and click on it. From the dropdown menu, choose "Theme settings," and then proceed to select "Checkout."

Step 3: Adding background image or color

In the "Checkout" section, scroll down until you reach the Order Summary area. Here, you can upload a background image or select a background color to enhance the visual appeal of your checkout page.

Step 4: Save your changes

After you’ve made your desired edits, don’t forget to click "Save." Congratulations! You have successfully customized the background image or color for the Order Summary on your Shopify store.

Bottom Line 

The information above will give you a complete view of how to add a background image or color to the order summary in Shopify. I hope you found this tutorial helpful and that it improves your store's look. 

If you're interested in more customization, you might also want to learn how to change the color of form fields, which is another useful topic for improving your store's design.

Related Posts:

Sam
linkedin
Sam Nguyen is the CEO and founder of Avada Commerce, an e-commerce solution provider headquartered in Singapore. He is an expert on the Shopify e-commerce platform for online stores and retail point-of-sale systems. Sam loves talking about e-commerce and he aims to help over a million online businesses grow and thrive.