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

Technical Q&A
,
1

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 :slightly_smiling_face:
Like this ??

I want like this
I want like this715×474 19.8 KB

As of now, variant buttons look like this ??

Current buttons.
Current buttons.1276×510 128 KB

Store URL: Solesart.us
PASSWORD: 1234

2

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
Screenshot 2023-10-11 at 14.37.48.png1525×699 93.3 KB

1 Like
3

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

AFTER ADDING ABOVE CSS THE RESULT:

Artzen_tech_1-1697010349363.png
Artzen_tech_1-1697010349363.png1350×600 158 KB

Let me know if need further assistance
Regards,
Artzen Technologies

1 Like
4

Thank you so much @Dan-From-Ryviu . codes work as expected :slightly_smiling_face:

Additionally, I always used your app when any of my clients requested a free review app :slightly_smiling_face:

1 Like
5

Happy I could help :grin:

6

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

7

Could you please help me with this?
Check : https://community.shopify.com/post/2263147

I will highly appreciate your help :slightly_smiling_face:

8

Could you please help me with this @Dan-From-Ryviu ?
Check : https://community.shopify.com/post/2263147

I will highly appreciate your help :slightly_smiling_face:

9

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