My Shopify Product Page Color Issue - Dawn Theme

Store Design
, , ,

Topic summary

Goal: change specific product-page element colors in Dawn without altering the site-wide color scheme.

Requested per-element changes:

  • View my cart button: inverse style (white background, black text, black border).
  • Check out button: set to green (#58b42d).
  • Size Chart (Printify): change to #121212 for readability.
  • Share button (bottom): change to white (#fff).

Updates and guidance:

  • One responder asked for the store URL and password to inspect; the owner provided them.
  • A concrete solution was shared using targeted custom CSS selectors with !important to avoid global theme changes:
    • a#cart-notification-button → white background, black text, black 1px border.
    • button.button.button–primary.button–full-width → background #58b42d.
    • table#size-guide → background #121212.
    • button.share-button__button → text color #fff.
  • Instructions: add the CSS to the theme’s custom CSS area or via a Custom CSS app, and back up theme files before editing.

Artifacts: a product page screenshot was attached to illustrate the issue.

Status: a specific CSS-based fix was provided; no confirmation yet from the requester, so resolution remains pending.

Summarized with AI on January 31. AI used: gpt-5.
1

Hi everyone,

I’m having some trouble with the default colors given in my theme. I want to change some of the colors on the product page, but I don’t want to change the color scheme for the whole site because it will affect other pages.

Specifically, I want to change the following colors:

  • “View my cart” button: I want to make it inverse, with a white background, black text, and black border.
  • “Check out” button: I want to change the color to #58b42d (Green).
  • Size Chart (Printify): I want to change the color to #121212 so it’s readable.
  • Share button (located at the bottom): I want to change the color to white (#fff).

I’ve tried looking for solutions online, but I haven’t been able to find a way to change these colors separately without affecting the rest of the site.

Can anyone help me with this? I’m not very familiar with CSS, so any guidance would be much appreciated.

Thanks in advance for your help!

Product Page.png
Product Page.png483×730 25.4 KB

1 Like
2

Hello There,

Please share your store URL and password.
So that I will check and let you know the exact solution here.

1 Like
3

website url
password

4

To change the colors of specific elements on your product page without affecting the rest of the site, you can use custom CSS. Here is the CSS code you can use to achieve the desired changes:

For the “View my cart” button:

css
a#cart-notification-button { background-color: #fff !important; color: #000 !important; border: 1px solid #000 !important; }

 

For the “Check out” button:

css
button.button.button--primary.button--full-width { background-color: #58b42d !important; }

 

For the Size Chart (Printify):

css
table#size-guide { background-color: #121212 !important; }

 

For the Share button (located at the bottom):

css
button.share-button__button { color: #fff !important; }

 

You can add this code to your theme’s custom CSS file or use a third-party app like Custom CSS to add the CSS code to your store. Just make sure to backup your theme files before making any changes to the code.

mics_0-1676527946087.png
mics_0-1676527946087.png415×413 15 KB

1 Like