Dawn Theme - scaling the variant picker

Solved
ecom33
New Member
3 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)

Accepted Solutions
diego_ezfy
Shopify Partner
2299 413 539

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

Replies 3 (3)
dmwwebartisan
Shopify Partner
9765 2228 3064

@ecom33 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
diego_ezfy
Shopify Partner
2299 413 539

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

◦ Slideshow images cutting off? Try the Slideshow (PRO) section. No apps required. | Replace apps with copy/paste code snippets & save money. Examples here.

View solution in original post

ecom33
New Member
3 0 0

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