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 |
---|---|
145 | |
96 | |
76 | |
69 | |
69 |
This blog post is a recap of the webinar Getting Ready For BFCM: How To Run A Flash Sal...
By Jacqui Oct 3, 2023Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023