Product grid background wont change colour

Topic summary

Issue: Custom colors in the Refresh theme wouldn’t apply to the product grid and product information areas; links remained blue instead of white.

Key steps and changes:

  • Store URL shared. Helper provided CSS in base.css to set the product page section background to #250301 and make product titles/prices white. OP confirmed success on those areas.
  • Additional CSS applied to make product descriptions and the collection filter sidebar text white, and to set the product-grid padding background to #250301. Most pages then matched the desired colors.
  • Further CSS targeted remaining blue elements: product tax links, the share button, and the main page title (H1), changing them to white.
  • CSS for filters/dropdowns added: facet containers, checkbox icons, and price filter inputs/options were given the #250301 background.

Current status: After the last filter-related CSS, a new visual issue appeared in the price filter area (shown in a screenshot). OP is unsure which change caused it.

Notes:

  • Screenshots and CSS snippets are central to understanding the fixes and the new issue.
  • Discussion remains open; further CSS adjustments are needed for the filters/price UI and any remaining blue links/titles.
Summarized with AI on January 17. AI used: gpt-5.

Hey, I’m having an issue with the product grid background, it won’t change colour from the Refresh themes light grey.

Ive tried to set my own theme colours and everything changes apart from the product grid colour on every product page. Also, I want to change the text colour from blue to white it won’t do that either.

I want to change the background image to the colour behind “Fudge”.

To add to this even the product pages’ Product Information sections are the Refresh colour, I don’t understand why the rest of the website is the colours I want apart from product info and product grid.

Can anyone help?

1 Like

Hi @GraemeC

Would you mind to share your Store URL website? with password if its protected. Thanks!

Hello, my website URL is www.devil-delights.co.uk

The background colour for filters for each collection is white and links are blue and I’m unable to change them, also I still have the same issues as yesterday.

Sorry for the late reply!

1 Like

Thank you for the information.

Try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
section#shopify-section-template--20993090912539__main {
    background: #250301;
}
product-info#ProductInfo-template--20993090912539__main {
    color: white;
}
.product__title>* {
    color: white;
}
.price.price--large.price--show-badge {
    color: white;
}
1 Like

Hey,

Yup that worked thanks very much!

Only issue I have now is that the Filter/Sort by is still blue text with a light greyish background.

Also, there’s some H1, H2, description texts, and links that won’t change from blue.

Is there a way I can make ALL text on the website white?

Thanks

1 Like

Oh, I see. Try this one then.

Same Instruction.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.product__description.rte.quick-add-hidden * {
    color: white;
}
.section-template--20993090093339__product-grid-padding {
     background: #250301;
}
aside#main-collection-filters * {
    color: white;
}
1 Like

Hey, thats those pages are fixed now! just a few things like titles, h1, and links are still blue but I think I can figure those out after looking at the code you sent.

thanks!

Which one still blue? the shipping and the share link I didnt change it, cause you said before leave the link with blue color. Maybe Im wrong. :sweat_smile:

Did i? My mistake :persevering_face: It looks like most links a blue but id like them white.

Also if you click on Allergen Information there’s a few things that are blue aswell that wont go white its a bit of a nightmare!

1 Like

Check this one. Same Instruction.

.product__tax.caption.rte a {
    color: white;
}
button.share-button__button {
    color: white;
}
h1.main-page-title.page-title.h0.scroll-trigger.animate--fade-in {
color: white;
}

And Save.

1 Like

Try this one also for the drop down in the filters.

div#Facet-2-template--20993090093339__product-grid,
div#Facet-1-template--20993090093339__product-grid {
    background: #250301;
}
.facet-checkbox>svg {
    background: #250301;
}
input#Filter-Price-GTE,
input#Filter-Price-LTE,
option {
    background: #250301;
}

And Save.

1 Like

im not sure if that changed this but this has happened.