Re: Dawn Theme - scaling the variant picker

Solved

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

ecom33
Tourist
7 0 0

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.

Accepted Solution (1)

diego_ezfy
Shopify Partner
2969 571 909

This is an accepted solution.

@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

View solution in original post

Replies 5 (5)

dmwwebartisan
Shopify Partner
12321 2552 3729

@ecom33 

Please share store URL!

Thanks!

diego_ezfy
Shopify Partner
2969 571 909

This is an accepted solution.

@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

ecom33
Tourist
7 0 0

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

ecom33
Tourist
7 0 0

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

center.JPG

Please, help if you can! Best regards.

Checkit
Visitor
2 0 0

Hi Diego,

 

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

 

 

 

Checkit_0-1706390805392.png

 

Please let me know if its possible.

 

thx.

 

regards

 

 

danny