Not able to add background image selector in product details page

Store Design
, , ,

Topic summary

A user is attempting to add a background image selector to their Shopify store’s product details page using the TASTE theme. They successfully implemented this feature across other sections (like rich-text) using a three-step process: adding schema code for checkbox and image picker settings, inserting CSS for background styling, and modifying the section’s class to include the background selector.

The Challenge:
The same approach fails on the product page (main-product.liquid) because multiple classes are being used, making it unclear where to apply the third step.

Solution Provided:

  • Add the schema settings to main-product.liquid
  • Insert the CSS code within the style block
  • Wrap the outermost div containing product details with a new wrapper that includes the conditional background class
  • If multiple layout containers exist, wrap all of them to ensure proper background application

Status: The issue appears resolved, with the helper confirming the solution worked for the user.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi everyone,

I have created a shopify store page using the TASTE theme - www.letsswap.in

I am trying to add background image selector for all sections - its working for all except the product information page. I followed the below process for each of the other sections:

  1. Added the schema code after “settings”: [ in that section for e.g rich-text.liquid for making this change in rich-text section

{

“type”:“checkbox”,

“id”:“enable-background”,

“label”: “Enable Background Image” },

{ “type”:“image_picker”,

“id”:“enable-background-image”,

“label”: “Select Background Image” },

  1. Added the CSS code after {%- style -%}

{% if section.settings.enable-background %}

.add-background-{{ section.id }}{

background-image: url({{ section.settings.enable-background-image | img_url: ‘master’ | width: 1440, height: 600 }});

background-size: cover;

background-position: center center;

background-attachment: local; }

{% endif %}

  1. Under the class for that section, modified the code to include the image selector

Changed this →

To this →

This helped me add background image selector in all sections but for the product detail page, I am not able to add this 3rd part as there are multiple classes being used.

Can someone guide me on how to do this for product page as well? I am trying to add this code in sections/main-product.liquid file

1 Like
2

1.Add Schema Settings
Open sections/main-product.liquid and add the following inside the “settings”: [ array in the schema at the bottom:

{
"type": "checkbox",
"id": "enable-background",
"label": "Enable Background Image"
},
{
"type": "image_picker",
"id": "enable-background-image",
"label": "Select Background Image"
}

2.Add the CSS for Background

Inside the {% style %} block (or create one at the top of the file if it doesn’t exist), add this:

{% if section.settings.enable-background %}
.add-background-{{ section.id }} {
background-image: url({{ section.settings.enable-background-image | img_url: 'master' | width: 1440, height: 600 }});
background-size: cover;
background-position: center center;
background-attachment: local;
}
{% endif %}
  1. Wrap the Product Section with the Background Class
    Find the outermost
    that wraps your product details. It might look like this:

Change it to this (you might need to wrap the existing div if no outer wrapper exists):

If the file has multiple layout containers or divs around the product info, try wrapping all of them with this wrapper to apply the background correctly.

2 Likes
3

Hello @theSWAPlife

Thank you for your response. It’s good to know that it’s worked for you. Kindly feel free to get back to me if you need any further assistance. If helpful, please like all posts.

1 Like