Remove Theme Background Image from Product and Collection Pages

Store Design

Topic summary

A background image on product and collection pages could not be removed through theme customization settings, including changing the main background image/color, adding a blank image, adding CSS overrides, and deleting the old file.

The key fix came from editing the theme code directly. In the themeā€™s stylesheet (styles.scss / style.scss.liquid), a hardcoded body { background-image: url(...) } rule was found and removed.

Outcome:

  • Suggested workaround: add body { background: none; } at the bottom of styles.scss
  • Actual resolution: locate and delete the existing background-image rule in the stylesheet
  • Status: resolved

The issue was theme-specific to the Infinit Shopify theme, where the background image was set in code rather than controlled only by the theme editor.

Summarized with AI on March 8. AI used: gpt-5.4.
1

Hi,

We are in process of improving our theme UI, and one of the steps involves removing the background image for all the page types.

As of now, we have tried below but nothing seems to be working for us:

  1. Online store > Themes > Customize > Theme settings > Color Variable > Remove Main Background Image

  2. Online store > Themes > Customize > Theme settings > Color Variable > Add Main Background Color (to #ffffff)

  3. Online store > Themes > Customize > Theme settings > Color Variable > Add Blank White Background Image

  4. Online store > Themes > Actions > Edit code > Added CSS to not display CSS with ā€˜Importantā€™

  5. Settings > Files > Deleted Old Background Image

We are currently on ā€œInfinit - Multipurpose Responsive Shopify Themeā€, here is a product page URL for reference: https://homesbykikkli.com/products/blue-platters

Would really appreciate if someone from the community can help us in removing the theme background image.

Thanks in advance for your help

Regards | Sho

2

You can at the bottom of styles.scss put :

body{
  background: none;
}
1 Like
3

Thanks for the tip ChoosiZon.

Accessed the style.scss.liquid file on your suggestion and found the culprit code.

body
{
background-image:url('https://cdn.shopify.com/s/files/1/0417/7887/2471/files/Background_1.jpg?v=1593768201 ');
}

Removed it, Worked for me.

Appreciate your help :slightly_smiling_face: