How to Add & Change Background Color to Any Section on Shopify

You have the option of adding a Shopify background color or image to the checkout page’s main content area. Although it is the area where your customers enter their shipping information, keep in mind that you cannot combine the two since it will block the view of your customers. In order to avoid adding more than one, be careful.

Utilize Google Devtools To Check If It Functions.

Prior to adding a background color to any Shopify section, you must first test the source code to see if it works. Follow the steps below

  • Locate the section where you need to add background color on your Shopify website.
  • Next, right-click the page and select Inspect
  • The pages can now be viewed on computers, smartphones, or tablets by selecting the Device icon in the top bar. For ease of use when viewing the page on your computer, we advise choosing responsive.
  • Now select any Shopify section you want to change the background color of by clicking on the arrow icon as it is depicted below.
  • The class name for this section on Shopify will then appear after that. For this Shopify site, for instance, it displays div class=” trending products” under the elements. This is the class name for the section on this Shopify website.
  • Now click on the + (add new style rule) icon as shown below and then it will show the class of .trending-products { } on this Shopify site. Simply left-click this section, then choose a background color: any color you need. For instance, in this section of the Shopify website, we could add the code below to make the background color red.

.trending-products {

Background-color: red


How To Change The Section Background Color On Shopify

When you are confident that adding a background color to any Shopify section will be successful, you can add the background code to your Shopify CSS file. The actions listed below should be taken.

  • Select Themes from the Online store menu on your Shopify dashboard.
  • Now go to Actions and click on edit code
  • Locate the assets and select the theme.css.liquid CSS file. Sometimes, the CSS name may change.
  • Open the CSS file, and then add the last line of the CSS file with the background color code you just saved. then select the Save button.

How To Change Header Or Footer Background Color In Shopify

How to Add & Change Background Color to Any Section on Shopify

The solutions mentioned in this post can also be used to change the background color of the header or footer in Shopify. Simply press the keyboard shortcuts for Google DevTools and Elements to access them. Then, click + (add new style rule) after moving the mouse over the header or footer section to verify the header or footer class name. The background color can be added to your Shopify CSS file as previously mentioned after you locate the class name.

These are some basic guidelines for adding a background color to any Shopify section. We hope these solutions will be helpful to you because it is quite simple to accomplish.

Creating A Shopify Account

You must first register for a Shopify account before implementing the advice in this guide. There’s no need to select a plan right away; simply sign up for a free trial and start creating your new website right away. Just enter your email address and wait for Shopify to send you a verification email.

Once your Shopify account has been verified, log in and add your contact information and the name of your online store. The main menu and dashboard where you can start creating and customizing your site will then appear. For the purposes of this Shopify beginner’s guide, we’ll primarily focus on the options you can find under the “Customize theme” tab.

After clicking on the “Customize theme” tab, you’ll arrive at a screen for managing themes. If you then click on the “Customize” button, you’ll open The default theme for Shopify is referred to as “Debut.”” We’ll show you how to customize the “Debut” theme later on, but, for now, let’s discuss how to use themes other than the default.

If you scroll down this screen, you’ll see a “Theme library” section. Here, you can look through every theme that Shopify offers, both free and premium (paid). Alternatively, you can click on the “Upload theme” button to add your own flair to your Shopify online store.


In conclusion, the material above serves as my instructional writing on the subject of adding a background color or image to Shopify’s main content area. By including the background image or color in the main content area, you can easily improve the checkout page’s attractiveness over the previous version in just a few simple steps. If you found this guide to be helpful, please share it with others so they can also take advantage of Shopify’s useful functionality. Visit other tutorials to learn more about additional Shopify features for selling online.

Read More About Shopify Problems:

Ivy Smith

Leave a Reply

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

Back to top