Help on Background theme

Technical Q&A

Topic summary

Main issue: Change the background of product and product list (collection) pages to white to match the homepage on a Shopify store.

Context and steps taken:

  • The requester shared the store URL upon being asked.
  • First suggestion: add custom CSS to theme.liquid above to set product card text to white and the card background to a dark color (#191326). A screenshot of the result was provided. This appears to conflict with the goal of a white background.

Latest, more aligned solution:

  • Add a conditional CSS block in theme.liquid right after that targets specific templates (collection, search, product) and sets body { background: #fff !important; } using Liquid’s template.name check. This directly enforces a white background on the relevant pages without affecting the homepage.

Status:

  • No confirmation from the requester yet; outcome unverified and the thread remains open.

Notes:

  • Images were shared to illustrate results but are not essential to apply the fix.
Summarized with AI on December 11. AI used: gpt-5.
1

IMG_9881
IMG_98811320×2868 472 KB

I’m trying to change the theme of the product page & product list page. I want the background white like the homepage. I’ve googled & used Shopify’s bot & cannot figure it out. I think it’s the collection list & product page

1 Like
2

Hey @Megistailored

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

3

Hello! Yes, my shop is www.tailoredbodyjewelry.com

4

Hey @Megistailored

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>
.card__information * {
    color: white !important;
}
.card__content:has(.quick-add) {
    background: #191326 !important;
}
</style>

RESULT:

image
image1140×524 123 KB

If you require any other help, feel free to reach out to me. If I managed to help you then a Like would be truly appreciated.

Best,
Moeed

5

Please add this code to theme.liquid file after <head> and check

{%- if template.name == 'collection' or template.name == 'search' or  template.name == 'product'  -%}
<style>
    body {  background: #fff !important; }
</style>
{%- endif -%}