Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
Store URL: Solesart.us
PASSWORD: 1234
Hello everyone. The variant buttons need to be uniform like the screenshot attached. I would greatly appreciate it if someone could provide the code 🙂
Like this 🡻🡻
As of now, variant buttons look like this 🡻🡻
Store URL: Solesart.us
PASSWORD: 1234
Solved! Go to the solution
This is an accepted solution.
Please add this code at the bottom of your theme.css file to do it
.variant-input {
width: calc(25% - 10px);
margin: 0 5px;
text-align: center;
}
.variant-input-wrap label {
width: 100%;
background-color: #ddd !important;
}
.variant-input-wrap input[type=radio]:checked+label {
background-color: #fff !important;
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
This is an accepted solution.
Please add this code at the bottom of your theme.css file to do it
.variant-input {
width: calc(25% - 10px);
margin: 0 5px;
text-align: center;
}
.variant-input-wrap label {
width: 100%;
background-color: #ddd !important;
}
.variant-input-wrap input[type=radio]:checked+label {
background-color: #fff !important;
}
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Thank you so much @Dan-From-Ryviu . codes work as expected 🙂
Additionally, I always used your app when any of my clients requested a free review app 🙂
Happy I could help 😁
- Helpful? Like and Accept solution! OR Buy me coffee ❤️
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.
Could you please help me with this @Dan-From-Ryviu ?
Check : https://community.shopify.com/c/shopify-discussions/hide-some-product-price-on-collection-page/m-p/2...
I will highly appreciate your help 🙂
Hello @Digital_Imran
Its Artzen Technologies! We will be happy to help you today.
Follow the Below Steps:
1) Go to your Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following CSS at the bottom of the file above </body>
<style>
label.variant__button-label {
width: 100px;
border-radius: 6px;
background-color: gainsboro;
}
.variant-input-wrap input[type=radio]:checked+label {
background-color: #fff;
}
</style>
AFTER ADDING ABOVE CSS THE RESULT:
Let me know if need further assistance
Regards,
Artzen Technologies
Thank you for the reply @Artzen_tech . However , the issue has already been fixed. Thank you so much for your time and help 🙂
Hello @Digital_Imran
Css !important property doesn't use general purpose. It's not a good practice. If you are using !important property it can cause more problems for your store.
And everytime important CSS does not work, sometimes it may effect other CSS on the whole website.
If helpful, please Like and Accept this Solution to help others
Could you please help me with this?
Check : https://community.shopify.com/c/shopify-discussions/hide-some-product-price-on-collection-page/m-p/2...
I will highly appreciate your help 🙂
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024