Shopify themes, liquid, logos, and UX
Hello!
I wish to resize the variant picker on the product page. What code do I need to add to make those icons smaller?:
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:
Thank you for help.
Solved! Go to the solution
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
Please share store URL!
Thanks!
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
@diego_ezfy Can you please add the information on how to leave "Color"- on the left, but center those 4 options?
Please, help if you can! Best regards.
User | RANK |
---|---|
124 | |
98 | |
77 | |
68 | |
39 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022