How do I change the product background colour for all products on my Shopify store?

Store Design

Topic summary

Goal: Apply a light grey background behind all product images across the store.

Key steps and context:

  • Store URL shared; password provided. Initial access issues resolved via correct link and password entry.
  • Helper advised adding custom code in theme.liquid (before the tag). Note: product images need transparent backgrounds for the effect to show.
  • Merchant added the code (to the second tag) and confirmed it worked on listing pages.

Issues raised:

  • Grey background disappeared on product detail pages and on hover states. Screenshots were provided to illustrate.

Resolution:

  • Due to the broader scope (product pages and hover), collaborator access was requested and granted (via Shopify collaborator code). The helper implemented additional custom code.
  • Merchant confirmed the background is now consistently grey across the site and on hover.

Open item:

  • Merchant asked how to preserve these changes when updating the theme (theme updates can overwrite edited files). No answer yet.

Status: Functionality achieved; guidance on making changes update-safe (e.g., documenting edits, using a duplicate theme or child-like approach) still pending.

Summarized with AI on December 16. AI used: gpt-5.
1

Good day,

Is there a code for changing the product background colour for all the products on my Shopify store? If so, please share it with the instructions for effecting the said changes. I want the product background to be a light grey colour.

Kind regards

2

Hi, @Ngadlangadla

Can you please share the store URL so that I can assist you?

3

Dear AnneLuo,

Thank you, I appreciate your prompt feedback. My Store URL is www.cloudandfire.co.za. The store is password protected at the moment. Will you require the password to assist me?

Kind regards

4

Dear AnneLuo,

Thank you, I appreciate your prompt feedback. My Store URL is
www.cloudandfire.co.za. It is password protected at the moment. Will you
require the password to assist me?

Kind regards

5

Yes. Please provide the password so that I can assist you.

6

Dear AnneLuo,

The password is rtaint7890.

Kind regards,

Mnqobi

7

I couldn’t find the password entrance. Where is it?

AnneLuo_0-1728463346990.png
AnneLuo_0-1728463346990.png1451×732 114 KB

8

Dear Anneluo,

I apologise for the inconvenience. Please use the following website link, https://cloudandfire.co.za/

9

Do you want to change it like this?

AnneLuo_0-1728471511521.png
AnneLuo_0-1728471511521.png1372×590 247 KB

10

Dear AnneLuo,

Yes please, that is what I am hoping to achieve. For all products, across all areas on Shopify wherein the product appears.

Kind regards,

Mnqobi

11

I can help you with it. But implementing this requires adding some custom code. So I need to access your store as a collaborator if possible.

12

AnneLuo hello, I would appreciate it. How would we be able to accomplish this? Please give me a step-by-step guide and the best way to sort this out.

13

Dear AnnLuo,

Are you still with me?

Kind regards,

Mnqobi

14

Hey, @Ngadlangadla

I can’t enter your store now. After I enter the password, it won’t go to the homepage. It still in the password page.

15

Dear AnneLuo,

Thank you for getting back to me. Please try accessing the store now.

Kind regards,
Mnqobi

16

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the tag

Note: the background of the product images must be transparent.
Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

1 Like
17

Dear Anneluo,

I found the theme.liquid. In the file there are two tags. Should I add the code to the first or second one?

Kind regards,

Mnqobi

18

Dear AnneLuo,

Thank you it worked. I added to the second tag.

Your help is very much appreciated. Have a good day further.

Kind regards,

Mnqobi

19

Dear Anneluo,

I just realised that the grey disappears when I enter the product page. I want the code to be maintained even in the product view page. Please help me in this regard.

Kind regards,

Mnqobi

20

Which part on the product page? Can you take a screenshot to describe?