Dawn theme - size picker coding

Store Design
, , , , ,

Topic summary

A user seeks help customizing the default Shopify size picker on the Dawn theme to achieve a cleaner, more modern appearance. They want:

Desired changes:

  • Less padding on sides with smaller font
  • Outline on hover/select states
  • Bolder “Size” title (font-weight: 600)
  • Visual indication of which size is currently selected

Solution provided:
A community member offered custom CSS code targeting .product-form__input elements to:

  • Add black border to selected radio button labels
  • Reduce font size to 12px
  • Adjust padding (10px 12px)
  • Increase label font-weight to 600
  • Remove default borders

Instructions included adding the code to theme.css/base.css/style.css via the theme editor.

Ongoing issues:

  • The selected variant shows a solid black background (unintended)
  • A “shake” or vibration effect occurs when selecting sizes
  • Out-of-stock sizes (like “SX”) appear blank when selected instead of maintaining visibility
  • Request to display selected size next to the “Size” heading and show price under the title in the selector

The discussion remains open with troubleshooting in progress.

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

Hello, im using an app right now for swatches and size picker. Im currently working on swatches myself. BUT I need someone to help with the picker look, as I was unsuccessful.

This default shopify picker…

default picker.png
default picker.png498×174 4.12 KB

This what how I want it to look below…

custom picker.png

cleaner less bulky with hover/select outline, less padding sides than shopifys default, small font. Oh, and Size title bold 600. Also show what size is selected. Shopify default does not show what is selected.

CAn someone help, please?

Thanks :slightly_smiling_face:

2

Hi @xnyjyh this can only be done with the custom css and maybe little javascript as well, if you can provide your store URL then I can look into this and may be able to provide few code lines so that you can achieve the look.

Best Regards

Sahil

3

Hi @xnyjyh Thanks for providing the URL, Please add the code in your theme.css/base.css/style.css file which is available in your theme.

.product-form__input input[type=radio]:checked+label {
    color: black;
    background-color: white;
    border: solid 1px black !important;
}

.product-form__input input[type=radio]+label {
    font-size: 12px;
    border: unset !important;
    padding: 10px 12px 10px 12px;
}

legend.form__label {
    font-weight: 600 !important;
}

If you are not sure where is your theme.css/base.css/index.css/style.css file please follow the steps:

  1. Login in shopify admin.
  2. Click on the Online Store.
  3. Then click on the button next to Customize in live Theme.
  4. Click Edit Code.
  5. Search theme.css/base.css/index.css/style.css in the code in left hand side which ever is available in your theme.
  6. You can add the above code at the bottom of the file.

Result:

sahilsharma9515_0-1716962169894.png
sahilsharma9515_0-1716962169894.png1132×547 91.7 KB

If you will unable to implement the same then I’m happy to do this for you, let me know. I can implement the code changes so that this will work well for you.

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

Best Regards

Sahil

4

on my end the background of selected size variant was solid black.

5

Hi @xnyjyh Can you please send the screenshot what you are seeing, also where you have added the code in your theme.

Best Regards

Sahil

6

Its in Theme.liquid in style tag. It works but has a weird shake when selecting. like it vibrates lol. Any fix for that? other than that, It looks good. ANyway to show what size is selected? beside Size heading? Like ‘Size: S’

7

Just realized this happens too! the SX size is out of stock and it blank. cant that be fixed so when selected its still s show price under title and shows in selector like the 5xl?

blank.png
blank.png516×125 2.29 KB