FROM CACHE - en_header

Dawn Theme - scaling the variant picker

Solved
ecom33
New Member
5 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
2799 528 729

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 4 (4)
dmwwebartisan
Shopify Partner
11014 2377 3400

@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 | Click here GemPages The most powerful Shopify page builder.
diego_ezfy
Shopify Partner
2799 528 729

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
New Member
5 0 0

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

ecom33
New Member
5 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.