How can I resize the variant picker on a product page in Dawn Theme?

Store Design
1

Hello!

I wish to resize the variant picker on the product page. What code do I need to add to make those icons smaller?:

ecom33_0-1637571649223.jpeg

Is there a similar way as it is with Add To Cart button, where to edit it I just need to paste the code like below to the bottom of base.css:

ecom33_1-1637571649113.jpeg

Thank you for help.

2

@ecom33

Please share store URL!

Thanks!

3

@ecom33 , do this to fix it in 20 seconds:

  1. In your Shopify Admin go to: online store > themes > actions > edit code
  2. Find Asset > base**.css** and paste this at the bottom of the file:
.product-form__input input[type='radio'] + label[for*='template']{
    padding: 10px 25px !important;
    font-size: 14px !important;
}

@media (max-width: 749px){
.product-form__input input[type='radio'] + label[for*='template']{
    padding: 9px 24px !important;
    font-size: 13px !important;
}

}

You can customize the values as per your wish:

10px = height
25px = width
14px = font size

9px = height (mobile)
24px = width (mobile)
13px = font size (mobile)

In this particular case, setting up a height and width via padding works much better since the content’s width varies depending on the variant’s name.

Kind regards,
Diego

3 Likes
4

Works 100% or better! @diego_ezfy … you are awesome!

5

@diego_ezfy Can you please add the information on how to leave “Color”- on the left, but center those 4 options?

center.JPG
center.JPG523Ă—126 7.55 KB

Please, help if you can! Best regards.

6

Hi Diego,

i would like to make the variant section smaller and both variants (color+size) side by side.

Checkit_0-1706390805392.png
Checkit_0-1706390805392.png913Ă—266 47.7 KB

Please let me know if its possible.

thx.

regards

danny