Change Size Selector from Button to Dropdown - Gecko theme

Store Design
1

Hi,

Would appreciate some help, I need to change the size selector from buttons to dropdown on product page. Unfortunately there does not seem to be an option with this theme. I am using Gecko Theme.

If there is any easy way to do this or to code, Please let me know.

Thanks :slightly_smiling_face:

website: pawcopets.co.uk/calmingbed

Right now:

Screenshot 2022-04-26 at 17.39.53.png
Screenshot 2022-04-26 at 17.39.53.png1259×660 363 KB

What I need: (this website uses Gecko as well, I don’t know if it’s coded)

Screenshot 2022-04-26 at 17.33.52.png
Screenshot 2022-04-26 at 17.33.52.png1407×689 124 KB

2

@thomasmrgn99

oh sorry for that issue can you try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/pre_theme.min.css ->paste below code at the bottom of the file.
.swatch__list_pr {
display: flex;
    align-items: center;
}
.variations.style__circle .swatch.is-label .swatch_pr_item 
{
flex: 1;
}
3

Thanks :slightly_smiling_face: @KetanKumar :slightly_smiling_face:

4

@thomasmrgn99

its my pleasure to help us

5

Would appreciate some help with this if you have time @KetanKumar

https://community.shopify.com/post/1572352

Thank you! :blush:

6

@thomasmrgn99

yes, sure i will check and update

7

Do you have the coding to do from dropdown to buttons?