Customising size selector button

Solved
Anonymous
Not applicable
1996 0 0

Hi, can somebody take a look at my html ( I can dm the site URL), because I'm trying to change this buttons color/width/text but I cant find the right code. And I've tried changing the colors in the customisation section. Thanks.

 

wrqq.JPG

Accepted Solution (1)

Accepted Solutions
Katy
Shopify Staff
771 43 170

This is an accepted solution.

Hi @Anonymous !

 

Katy here from Shopify - I hope all is well with you and that you are enjoying customizing your store!

 

This is certainly possible to do, though it will require some editing in your theme's CSS, rather than in the theme customizer. As you will be making adjustments to the code, I recommend testing this in a duplicate version of your theme first. We have info on how to do this here

 

For the customization, if you could log in to your Admin and then navigate to your: Online store > Themes > Actions > Edit Code > Assets > theme.scss.liquid.

From here, if you could scroll to the very bottom of this sheet and paste the following:

 

 

select#ProductSelect-product-template {
    padding: 5px ;
    background: red;
    font-family: helvetica ; 
    font-size: 15px;

}

 

These values are just as a sample, you can input your own preferred styles to suit your design preference.

 

I hope this helps - do feel free to let me know how it goes for you!

 

Cheers,
Katy

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

View solution in original post

Replies 4 (4)
Katy
Shopify Staff
771 43 170

This is an accepted solution.

Hi @Anonymous !

 

Katy here from Shopify - I hope all is well with you and that you are enjoying customizing your store!

 

This is certainly possible to do, though it will require some editing in your theme's CSS, rather than in the theme customizer. As you will be making adjustments to the code, I recommend testing this in a duplicate version of your theme first. We have info on how to do this here

 

For the customization, if you could log in to your Admin and then navigate to your: Online store > Themes > Actions > Edit Code > Assets > theme.scss.liquid.

From here, if you could scroll to the very bottom of this sheet and paste the following:

 

 

select#ProductSelect-product-template {
    padding: 5px ;
    background: red;
    font-family: helvetica ; 
    font-size: 15px;

}

 

These values are just as a sample, you can input your own preferred styles to suit your design preference.

 

I hope this helps - do feel free to let me know how it goes for you!

 

Cheers,
Katy

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

View solution in original post

Anonymous
Not applicable
1996 0 0

Hi It works thanks, how can I make it look more like this:

 

Capture.JPG

Katy
Shopify Staff
771 43 170

Thanks for your reply @Anonymous, and I hope it has helped you out. 

 

To achieve this exact style would require some custom coding which perhaps some of our community members can share their own thoughts. 

However, to add the 'select your size' text instead of auto-selecting of the first available variant, we do have a guide to help you out with this here

 

Do feel free to have a look, and let me know how you get on. I am happy to help where I can. 

 

Cheers,

Katy

Please note: This account is no longer regularly monitored.
 - If you need assistance please do start a new topic (referencing an older topic/post if you find this helpful).
 - Thank you for your understanding. We hope you enjoy exploring the Community.
 - To learn more visit the Shopify Help Center or the Shopify Blog.

vendors
Excursionist
11 0 5

Hello,

Can we hide the price in size variant dropdown button.

vendors_0-1635250138490.png