Dawn Theme: Changes to product site dropdown variant selectors

Store Design
, , , , ,

Topic summary

Main issue: Styling Dawn theme product variant dropdown “pills” to match the width and rounded corners of Add to Cart / Buy It Now buttons.

Recent updates:

  • A CSS fix was provided to make the variant selector full width by editing base.css: set .product-form__input .select { max-width: 100% !important; }. The requester confirmed this solved the width.
  • For rounded corners, another CSS snippet was suggested: .select:after { border-radius: 50px !important; }.

Technical notes:

  • Changes are applied via Online Store → Theme → Edit code → base.css.
  • border-radius is a CSS property that rounds element corners; applying it to the correct selector (the dropdown or its pseudo-element) is key.

Artifacts:

  • An image attachment illustrates the desired look and is central to understanding the goal.

Status:

  • Width issue resolved. Corner rounding solution proposed; awaiting confirmation on effectiveness. No disagreements reported; discussion appears ongoing.
Summarized with AI on January 14. AI used: gpt-5.
1

Hello.

I have this problem of not being able to make my variant selector dropdown pills look good. I need help making the same widht, as the “add to cart” and “buy it now” buttons. Also I want to make them more round, just like the buttons I talked about.

This is the way i want them to be.

Help.JPG
Help.JPG1348×881 99.7 KB

A quick help would be appreciated!

https://b5c644-3.myshopify.com/

Password: 1111

Thanks in advance! :slightly_smiling_face:

2

Hello.

I tried both, but couldnt change anything for some reason.

3

Hi @Piirretty

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

.product-form__input .select {

max-width: 100% !important;

}

Hope that my solution works for you.

Best regards,

Henry | PageFly

1 Like
4

Hello.

Thank you very much, it helped with the widht.

Now is there a code to make the corners round?

Thanks in advance!

5

You can try again with this code:

.select:after{
border-radius: 50px !important;
}