How do I change the size selector from a dropdown to buttons?

I want to change the size selection part of our product page from a drop-down style to a button styling, where and what coding will I need to use for this?

Hi, @SarahAS . I’m happy to help you out with this! To clarify, are you building your own Shopify theme or are you working on a theme from the Shopify theme store?

If you’re using a theme from the Shopify theme store, the option to change variant selectors from a drop-down menu to a button is often built into the theme settings. You can get to your theme editor by going to Online store > Themes and clicking Customize next to the theme you’re working on. From here the settings can differ depending on the specific theme you’re using, but the setting is typically found by selecting your Default product template and locating the Variant picker block under the Product information section. You can see an example of what this looks like using the Dawn theme here:

I won’t have more information on how to code this if you’re trying to implement this on a theme you’re creating on your own. However, I can share some resources to help you do this. This guide on building Shopify themes is a good place to start. You may also find this tutorial on variant selectors for themes helpful.

Please let me know if you have any questions!

1 Like