Custom background colors for products, pages and collections

Shopify Discussion
1

I am looking to implement custom background colors for products, pages and collections using my template editor. Is there a way this can be done?

2

mics_0-1676999827451.png
mics_0-1676999827451.png354×580 18.1 KB

  1. Log in to your Shopify admin and go to Online Store > Themes.

  2. Click on the “Customize” button for the theme you want to edit.

  3. In the left-hand menu, click on the “Theme settings” option.

  4. Scroll down to the “Colors” section and click on the “Background” option.

  5. Click on the “Select color” button to choose a color or enter a custom color code in the field provided.

  6. If you want to apply the background color to all pages, products, and collections, click on the “Apply to all” checkbox. If you only want to apply the background color to specific pages, products, or collections, you can skip this step.

  7. Click on the “Save” button to save your changes

    If you want to apply a custom background color to a specific page, product, or collection, you can do so by editing the liquid templates for that page. Here’s how you can do it:

    1. In the Shopify admin, go to Online Store > Themes.

    2. Click on the “Actions” dropdown for the theme you want to edit and select “Edit code”.

    3. Locate the liquid template file for the page, product, or collection you want to edit. For example, the “product-template.liquid” file is used for individual product pages.

    4. Open the liquid template file and locate the HTML element that corresponds to the area you want to add the background color to. For example, the “body” tag might be used for the overall page background.

    5. Add a “style” attribute to the HTML element and set the “background-color” property to the color you want to use. For example:

      html:
      <body style="background-color: #F8F8F8;">

    6. Save the changes to the liquid template file.

    Repeat this process for any other pages, products, or collections that you want to add a custom background color to. Note that if you’re not comfortable editing liquid templates, it’s a good idea to create a backup of your theme before making any changes.

3

I am using the “impulse” theme, and after following your instructions there only appears to be a .json file for the template I am trying to edit.

4

If you’re using the Impulse theme, you may need to locate and edit the appropriate JSON file to apply custom background colors to your products, pages, and collections. Here’s how you can do it:

  1. In your Shopify admin, go to Online Store > Themes.
  2. Click on the “Customize” button for the Impulse theme.
  3. In the left-hand menu, click on “Theme settings.”
  4. Click on “Colors.”
  5. Click on the “Select color” button to choose a color or enter a custom color code in the field provided.
  6. If you want to apply the background color to all pages, products, and collections, click on the “Apply to all” checkbox. If you only want to apply the background color to specific pages, products, or collections, you can skip this step.
  7. Click on the “Save” button to save your changes.

If you want to apply a custom background color to a specific page, product, or collection, you can do so by editing the appropriate JSON file in the theme editor.

  1. In your Shopify admin, go to Online Store > Themes.

  2. Click on the “Actions” dropdown for the Impulse theme and select “Edit code.”

  3. In the left-hand menu, click on the folder for the type of template you want to edit. For example, if you want to edit the product template, click on “Sections” and then click on “product.liquid.”

  4. Locate the JSON data for the element you want to add the background color to. For example, if you want to add a background color to the product description, you may need to edit the “product-description” JSON data.

  5. Add a new key-value pair to the JSON data, like this:

    json
    "background-color": "#F8F8F8"

    Replace “#F8F8F8” with the color code you want to use.

  6. Save the changes to the JSON file.

  7. Preview your changes to make sure the background color is applied correctly.

Repeat this process for any other pages, products, or collections that you want to add a custom background color to. Note that if you’re not comfortable editing JSON data, it’s a good idea to create a backup of your theme before making any changes.

5

Hello @personalfears
I would like to give you the recommendation to support you so kindly follow steps below:

  1. Go to your Online store > Themes > Edit code
  2. Open your theme.liquid file
  3. Paste the below code before 

I hope the above is useful to you.
Best regards,
GemPages Support Team