Solved

How to change button size in variant selector

X-DREAM
Excursionist
29 0 3

How do I change the button size in variant selector? and if possible to remove the character inside the button as well. thanks

 

www.x-dream.com.au

password:666

 

Capture.PNG

 

Accepted Solution (1)
yashgarg
Shopify Partner
102 26 32

This is an accepted solution.

Add this to the css file, that should remove the name

 

.\#product-options-radio-item-media + .\#product-options-radio-item-value {
  display: none;
}
 
Thanks
Yash Garg
If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com

View solution in original post

Replies 8 (8)

yashgarg
Shopify Partner
102 26 32

Hey @X-DREAM ,

 

You can change the button size by modifying the CSS for the respective selectors

 

Please follow the following steps

1) Go to your online store and select Themes from left panel

2) Press 3 dots menu in center (on the left of Customize button) and then Edit Code

3) Open the file product-options-radio.css (you can search for it)

4) Search for this .\#product-options-radio-item-input.\!sold-out+.\#product-options-radio-item-body

5) Here you can add new properties like width and height and tweak their values to get desired effect

 

Your final code should have 2 new entries like this 

yashgarg_0-1705333239065.png

 

This will change variant picker size like this (you can play with values of width and height)

yashgarg_1-1705333265942.png

 

Thanks

Yash Garg

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
X-DREAM
Excursionist
29 0 3

I don't want change the size of the pic inside the button, I want make the whole button smaller.

 

Thanks

yashgarg
Shopify Partner
102 26 32

In that case you can choose a smaller value of widht and height

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
X-DREAM
Excursionist
29 0 3

ok I see. 

so how about the name inside the button, can be removed??

yashgarg
Shopify Partner
102 26 32

This is an accepted solution.

Add this to the css file, that should remove the name

 

.\#product-options-radio-item-media + .\#product-options-radio-item-value {
  display: none;
}
 
Thanks
Yash Garg
If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
X-DREAM
Excursionist
29 0 3

It works perfect, the name been removed and button can change to smaller, but the picture inside the button is too small, if anyway can make the pic inside the button bigger? I tried the below code, it not working.

Thanks

 

XDREAM_0-1705338493835.png

 

 

yashgarg
Shopify Partner
102 26 32

Search for this .\#product-options-radio-item-media in that css file

You will see a single width property in that

Increase it as per requirement

If this works for you, please give it a like and mark it as the solution! Thanks 🙂
Feel free to contact me for Shopify tech support
Email: yashgarg.tech@gmail.com
X-DREAM
Excursionist
29 0 3

that can increase the whole button size like below. or is that anyway maybe I can use the picture replace the button?

Thanks

 

Capture.PNG