How can I change my product page color to a darker theme?

Store Design
, , ,
1

Hi,

I’ve been trying to change my product pages from the original white color to a darker theme, however everything i’ve tried has messed up, I just want my product pages to be black with white text on the variant pickers and other options. This image is what happens every time I’ve tried. As you can see, the “6 Reviews” is also gray and the options are invisible. I would also like help with the cart page, as that also shows up in white

Screenshot_31.png
Screenshot_31.png620×836 25.9 KB

1 Like
2

Hi @FashionCoveAZ ,

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

3

Hello @FashionCoveAZ ,

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code

Go to Sections → product-template.liquid file

Add this following code at the bottom of page

body.product-template {
  background-color: #000;
  color: #fff;
}

.product-form__input {
  background-color: #000;
  color: #fff;
}

.product-form__input:checked + label {
  background-color: #fff;
  color: #000;
}

Save and preview

Hope this can help.

Transcy

1 Like
4

I’m not seeing the product-template.liquid file anywhere, under sections i see other liquid files but nothing with the product-template.

5

FashionCoveAZ.com and there is no password protection on it.

1 Like
6

Thank you for the information. Try this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. 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:
  4. And Save.
span.header_reviews_number.reviews_rating_title * {
    color: white;
}
.product-form__input input[type=radio]:checked+label {
    color: black;
}
quantity-input.quantity * {
    color: black;
}

If this wont work, would you mind to share the preview?

I hope it help.

7

Yeah, this solution did not make any difference as well. Here’s the preview of it.
https://6e2fe3uwzbx75k4y-79845392699.shopifypreview.com

1 Like
8

Did you paste it on the Base.Css? Can you try to paste it on the section-main-products.css i think its on the still on the Asset folder.

9

Pasting it under section-main-products.css didn’t work either, and yes I tried pasting it on the Base.css aswell.