How can I increase the variant picker size for Dawn theme?

Store Design
,

Topic summary

A merchant upgraded from a Shopify 1.0 theme to the Dawn 2.0 theme and encountered an issue with product variant pickers. Previously, the variant dropdown box automatically adjusted its width to display full variant descriptions (which include packaging details and pricing information). After upgrading to Dawn 2.0, the variant text gets cut off in the dropdown.

Current workarounds observed:

  • Hovering over variants reveals the full text
  • Switching to pill-style variant picker displays complete wording

Proposed solution:
One user suggested navigating to Online Store > Themes > Customize, then editing the “assets/stylesheet.css” file. The recommendation is to locate the .product-form__variants code block and adjust “width” or “max-width” properties to expand the dropdown, while being careful not to make it too wide for smaller screens.

Another user requested the store URL to provide a tailored solution. The issue remains unresolved pending further technical implementation.

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

In October I upgraded from a 1.0 theme to 2.0 Dawn theme. I just noticed this issue…

Each of my products has variants - different options for packaging of my products which each has its own price. So, I include a bit of wording for each variant to be extra clear with my customers. With my 1.0 theme, the variant pulldown box would adjust its width based on the length of the wording. After I upgraded to 2.0, the wording in the variant gets cut off. If I switch to the pill style variant picker, all the wording shows. If you hover over the variant, you can see all of the wording … but the customer doesn’t know that.

Is there someplace I can adjust this so that all of the wording appears?

Any help would be greatly appreciated.

1 Like
2

Navigate to Online Store > Themes > Current Theme > Customize.

open the file named “assets/stylesheet.css”. Look for the code snippet that styles the product variant dropdown. This might be something like .product-form__variants. Within the relevant code block, look for properties like “width” or “max-width”. Try increasing these values slightly to expand the dropdown width. Be careful not to increase the width too much, as it could look visually awkward on smaller screens.

3

Hi @jenok

Can you please provide your store URL and password as well if applicable, so that I can provide you solution that can work for your store.

Best regards

Sahil