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

[Ngadlangadla]

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

[AnneLuo]

Hi, @Ngadlangadla 

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

[Ngadlangadla]

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

[Ngadlangadla]

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

[AnneLuo]

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

[Ngadlangadla]

Dear AnneLuo,

The password is rtaint7890.

Kind regards,

Mnqobi

[AnneLuo]

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

[Ngadlangadla]

Dear Anneluo,

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

[AnneLuo]

Do you want to change it like this?

[Ngadlangadla]

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

[AnneLuo]

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. 

[Ngadlangadla]

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.

[Ngadlangadla]

Dear AnnLuo,

Are you still with me?

Kind regards,

Mnqobi

[AnneLuo]

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.

[Ngadlangadla]

Dear AnneLuo,

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

Kind regards,
Mnqobi

[AnneLuo · Accepted solution]

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 </head> tag

<style>
.hdt-card-product .hdt-card-product__media, .hdt-pr-style7 .hdt-card-product__media .hdt-card-product__media-wrapp {
    background: lightgray;
}
</style>

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!

[Ngadlangadla]

Dear Anneluo,

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

Kind regards,

Mnqobi

[Ngadlangadla]

Dear AnneLuo,

Thank you it worked. I added to the second </head> tag.

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

Kind regards,

Mnqobi

[Ngadlangadla]

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

[AnneLuo]

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

[Ngadlangadla]

Dear AnneLuo,

Please see the attached screenshot. This is the view after you select the product. If possible, I want the grey to be visible even in this view mode.

kind regards,

Mnqobi

[Ngadlangadla]

Dear Annluo,

Additionally, I notice that the grey disappears when I hover over the product. I would like the grey to not disappear when I hover over the product. I would like for the grey to be a constant background.

Kind regards,

Mnqobi

[Ngadlangadla]

Dear AnneLuo,

May you assist me please.

Kind regards,

Mnqobi

[AnneLuo]

Implementing this requires adding some custom code. So I need to access your store as a collaborator if possible. 

[Ngadlangadla]

Dear AnneLuo,

Please access my store as a collaborator.

Kind regards,
Mnqobi

[AnneLuo]

Please share me your collaborator code. I will check it for you.

[Ngadlangadla]

Dear AnneLuo, the code is 0141.

[AnneLuo]

I have applied the access. Please accept. I'm busy now. So I will help you with it later.

[Ngadlangadla]

Dear AnneLuo, the request came from Shinetech Changchun. Is that you?

[AnneLuo]

Yes.

[Ngadlangadla]

Alright thank you for the clarity.

[AnneLuo]

Hi, @Ngadlangadla 

Have changed the background color of the products for your store. You can view on your online store.

[Ngadlangadla]

Dear AnneLuo,

Thank you. It is perfect. How would I ensure the changes do not disappear
when updating my theme?

Kind regards,
Mnqobi