Re: Uniform variant button Impulse theme

Solved

How can I make variant buttons uniform in the Impulse theme?

Digital_Imran
Shopify Partner
225 2 35

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  🡻🡻

image (68).png

 


As of now, variant buttons look like this 🡻🡻

screenshot 6.png

 

Store URL: Solesart.us
PASSWORD: 1234

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.
Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10155 2018 2082

This is an accepted solution.

Hi @Digital_Imran 

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;
}

Screenshot 2023-10-11 at 14.37.48.png

 

- 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.

View solution in original post

Replies 8 (8)

Dan-From-Ryviu
Shopify Partner
10155 2018 2082

This is an accepted solution.

Hi @Digital_Imran 

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;
}

Screenshot 2023-10-11 at 14.37.48.png

 

- 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.

Digital_Imran
Shopify Partner
225 2 35

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 🙂

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.
Dan-From-Ryviu
Shopify Partner
10155 2018 2082

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.

Digital_Imran
Shopify Partner
225 2 35

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 🙂

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.

Artzen_tech
Shopify Partner
552 113 112

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:

Artzen_tech_1-1697010349363.png

 

Let me know if need further assistance
Regards,
Artzen Technologies

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Digital_Imran
Shopify Partner
225 2 35

Thank you for the reply @Artzen_tech . However , the issue has already been fixed. Thank  you so much for your time and help 🙂

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.
Artzen_tech
Shopify Partner
552 113 112

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

If helpful, please Like and Accept this Solution to help others
Artzen Technologies | A Shopify Development Agency
WhatsApp - 9877983930

Book FREE CONSULTATION who want to migrate to Shopify or want to start an eCommerce business with Shopify
Digital_Imran
Shopify Partner
225 2 35

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 🙂

Problem Solved? ✔Accept and Like solutions to help future merchants.

Do you need high converting Shopify store? with customized graphical banners, hire me.
Message me now to get started. My response time is lightning fast.