How can I change the colors in the product information section?

Store Design

Topic summary

A user needed to change the colors in the product information section of their online store, specifically wanting a white background with black elements (text, buttons, etc.).

Solution Found:

  • The issue was resolved by adding custom CSS code to the main-product.liquid file
  • This works for the Dawn theme
  • The code targets specific elements:
    • Sets body background to white
    • Changes product tax links to black
    • Adjusts quantity input and button colors
    • Modifies foreground colors to black

Status: Resolved - The user confirmed the solution worked and shared the code to help others facing the same issue.

Summarized with AI on November 24. AI used: claude-sonnet-4-5-20250929.
1

Hello, can someone please show us how to adjust the colors in the “Product Information” section?

As shown in the image below, it’s for the section where arrows are pointing. We would love to make this section with white background + black elements such as text, buttons, etc. Can someone please assist us?

Example link: https://swish.eu/products/dc72 (this should work across all pages)

Screenshot (70).png
Screenshot (70).png995×432 141 KB

Kind Regards,

2

We added code to main-product.liquid and it worked. Hope it helps someone else. Dawn theme

Code:

body { background-color: white!important; --color-foreground: black; } .quantity__button, .quantity__input { color: white; } .rte a { color: black!important; } .product__tax a { color: black; }