Choose Options on Shopify Dawn Collections Page

Store Design
,

Topic summary

A Shopify store owner using Dawn theme 14.0.0 is experiencing styling issues with the “Choose Options” popup that appears on collection pages for products with multiple variants.

Main Issues Identified:

  1. Product title color - Appears in blue, needs to be black ✓ Resolved
  2. Variant selection visibility - Selected size variants have white background with white text, making them unreadable
  3. Discount percentage display - Wants to show discount percentages for variants on the collection page based on whichever variant/price is displayed

Current Status:

PageFly-Richard provided a custom CSS solution to add to theme.liquid above the </head> tag, which successfully resolved issue #1. The user confirmed this worked and is now requesting solutions for problems #2 and #3. The discussion remains open with two issues still unresolved.

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

In the Dawn 14.0.0 version

On the collection page, if a product has more than one variant, it has two options - CHOOSE OPTIONS and ADD TO CART. When a user clicks on the ‘Choose Options’ to choose a product variant, a pop up opens up. I have the following issues in the popup.

  1. Product title is in Blue color and I need it to be in Black color.
  2. Background of size variants and variant text is same - WHITE → so when a size is chosen, text is not visible so I need to change the background of selected variant to BLACK.
  3. I want to show % discount on products in collection page. In case of variants, whichever price and variant is shown on collection page, I would like to show the discount percentage for that variant.

Image for reference:

subhashkpr_0-1716381462738.png
subhashkpr_0-1716381462738.png1750×680 128 KB

Please help with customised code to resolve the two issues.

Link to store: https://7b04e4-80.myshopify.com/collections/bestsellers

Thanks in advance!

2

Hi @subhashkpr

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the

PageFlyRichard_0-1716953225675.png
PageFlyRichard_0-1716953225675.png1336×953 125 KB

Hope this can help you solve the issue

Best regards,

Richard | PageFly

3

Hi @PageFly-Richard Thanks for your response. Your solution worked for problem 1 and 2. Can you please suggest a solution for problem 3 as well? Thanks in advance.