Change color of product titles only - Dawn Theme

Store Design
,

Topic summary

A user wants to change product title colors in the Dawn theme, separate from body text colors, noting this isn’t available in the theme’s color scheme settings.

Two solutions provided:

  1. Same color for all products: Add custom CSS to the Product Information section targeting .product__title h1 with desired color code

  2. Different colors per product: Create a custom metafield definition in Settings > Custom Data > Products (type: Color, name: Title Color), then add liquid code to the product template to reference product.metafields.custom.title_color

Alternatively, simpler CSS can be added to base.css file targeting product titles across various pages.

Additional requests resolved:

  • Changing H2 headings: Use h2 { color: #code; } or combine selectors with commas: h1, h2 { color: #code; }
  • Homepage Featured Collection heading: Same approach, may need !important flag
  • Using browser’s “Inspect Element” tool helps identify correct CSS selectors

Issue confirmed: Color schemes in Dawn apply one color to all text including headings, requiring custom CSS to differentiate title colors from body text.

Summarized with AI on November 10. AI used: claude-sonnet-4-5-20250929.
3

@Jodiebe Please follow below steps to change the color of the product title. Let me know whether it is useful for you.

  1. From admin, go to “Online Store” → “Themes”.
  2. Click action button from the current theme and select “Edit code”.
  3. Search “base.css” file.
  4. If you want to change the product title color only for product page, paste below code at the bottom of the file.
.product .product__info-wrapper .product__title h1{
    color:#0000ff;
}

Vinsinfo_3-1713421199685.png
Vinsinfo_3-1713421199685.png1866×817 113 KB

  1. Else, if you want to change the product title color for the collection page, cart page, product page and search page, paste below code at the bottom of the file.
.product .product__title h1, .card__information .card__heading.h5 a.full-unstyled-link, .cart-item .cart-item__details .cart-item__name {
    color: #0000ff;
}

Vinsinfo_4-1713421211086.png
Vinsinfo_4-1713421211086.png1904×846 116 KB

NOTE: You can change the color as per you need.

Result will be like,

Vinsinfo_0-1713421169886.png
Vinsinfo_0-1713421169886.png1832×624 32.7 KB

Vinsinfo_2-1713421187583.png
Vinsinfo_2-1713421187583.png1878×744 99.7 KB

Vinsinfo_1-1713421176842.png
Vinsinfo_1-1713421176842.png1869×676 23.1 KB

Please provide your support by click “Like” and “Accepted” if our solution works for you. Thanks for your support.