How to change background color for product grid and product information

[marissaduh]

Hi! I’m having some issues changing the background color on the product grid and product information pages.

I have my brand colors set with the background color as Accent 5 but these two page backgrounds will not change.

Additionally, I can’t seem to update the price text color on the product grid and the product description text color on the product information page.

I’m trying to have the background color to be #fffbf1 and the text color #ea005b. Any help would be greatly appreciated!

P.S. I’m using a theme I purchased on Etsy, if that helps with anything.

[Moeed]

Hey @marissaduh

Welcome to Shopify Community!

I appreciate all the information you shared but sadly that’s not enough, I need to have a look at your theme so share your store URL if your theme is live, if it’s not live then share a preview URL of the draft theme.

Additioanlly, if you can also highlight in your screenshot that what background and what text color are you referring to, then I can provide you an accurate code that actually works. Appreciate your cooperation.

Cheers,
Moeed

[liquidshop.co]

Hi, Please share more details so we can help.

[marissaduh]

Hi Moeed! Thanks for your reply!

The theme I’m working on is technically active - it’s a copy of my current theme but it won’t go live until Sunday. I’m not sure how to share a preview URL of that. The page that displays when I click “View” is the current theme.

For the colors, I’d like the background where the purple arrow is to be the same color as the background where the purple box is. The color I used there is #fffbf1.

I’d also like the text color for the pricing in the blue circle to be the same color are the pink menu bar where the blue arrow is pointing. The color used there is #ea005b.

[marissaduh]

Hi @OrderMAX thank you for the reply! The CSS doesn’t appear to have worked.

My url is https://sunbeamshopco.com/ It doesn’t have any of the edits in my screenshots but the themes and codes are the same.

[Moeed]

Okay got it, thanks for the information and yes I would need to see the preview of your draft theme so for that go to Online Store and click 3 dots and click on preview and then in the bottom you’ll see a “Share Preview” button. See the attached screenshot below.

PS: Ignore that other reply, it’s not going to work as it’s just AI generated gibberish.

Best,
Moeed

[marissaduh]

Hi @Moeed Got it! Does this link work?

[Moeed]

Not sure if you shared the preview URL of the right theme because this is how I see your collection, not as shown in your screenshot.

[marissaduh]

I’m working on a copy of that theme but it doesn’t “rollout” until Sunday.

I’m not sure if that affects the preview. The theme and codes are the same, though.

[Moeed]

Not sure if this would work or not but worth giving it a try.

Follow these Steps:

1. Go to Online Store
2. Edit Code
3. Find theme.liquid file
4. Add the following code in the bottom of the file above </ body> tag

<style>
.section-template--20677234196549__product-grid-padding {
    background: #fffbf1 !important;
}
.product-card-wrapper .card--card, .product-card-wrapper .card--standard .card__inner {
    border-color: #fffbf1 !important;
}
.price {
    color: #ea005b !important;
}
</style>

---

Hope that helps! If it did, a Like and Marking it as Solution goes a long way and helps others find the fix faster too.

Best,
Moeed

[marissaduh]

@Moeed

<style>
.section-template--20677234196549__product-grid-padding {
    background: #fffbf1 !important;
}
.product-card-wrapper .card--card, .product-card-wrapper .card--standard .card__inner {
    border-color: #fffbf1 !important;
}
.price {
    color: #ea005b !important;
}
</style>

It worked for the price text color but not the background. So kind of a win? lol

[NKCreativeSoulutions]

Heya!
I went into the main.min.css file and under the part of
body {
margin:0;
box-sizing:border-box;
background-color: black; <— I added this line (change black to #fffbf1)
}

I’m pretty sure that’s what you wanted, right?
I hope it helped!

[marissaduh]

@OrderMAX

<style>
#MainContent {
    background: #fffbf1;
}
</style>

That worked! Thank you! What can I do to change the text color for the product descriptions (in the blue squares on the attached image)?

Right now, they’re a green color and I don’t have an option to change it. I’d like it to be color #4c0e33.

[marissaduh]

@marissaduh

#4c0e33

Yep, that worked! Thank you!

I have, maaaybe, two more questions. Is is possible to change the selection box and quantity box colors (in the blue boxes in the attached)? And how would I go about changing the font?

[marissaduh]

Sure!

In the blue box: background #ffc6d8 and text #ff7b3b.
In the purple box: text #ff7b3b (background can stay the same)
In the green box: the quantity border, number, plus and minus #550d3a

[SectionKit]

Still you are able to Share the preview link. So you need to follow the steps shared by @Moeed

After that you simply need to share the preview link.

Or you can simply watch this tutorial to make sure you can share the preview link with me: https://www.youtube.com/watch?v=H1_f1LdbbO8

Thanks

[marissaduh]

@OrderMAX

.product-form__input input[type=radio]:checked+label {
   background-color: #ffc6d8 !important;
   color: #ff7b3b !important;
}
.product-form__input input[type=radio]+label {
   color: #ff7b3b !important;
}
.quantity {
   color: #550d3a !important;
}
.quantity__button:not(:focus-visible):not(.focused), .quantity__input:not(:focus-visible):not(.focused) {
   color: #550d3a !important;
}
</style>

OBSESSED! Thank you so much for all your help!