How can I add a variant dropdown box on Gecko theme product page?

Store Design

Topic summary

  • Goal: On a Gecko theme product page, replace the standard swatch buttons with a dropdown for certain variant types.

  • Current behavior: Color variants display as image swatches (preferred). Non-color variants (e.g., size, fragrance) show as text swatches, which look messy when there are many options.

  • Request: A code-based solution to conditionally render a dropdown selector for any non-color variant, while keeping image swatches for color variants.

  • Notes: An attached image illustrates the current variant layout, useful for context but not essential.

  • Status: No responses or solution provided yet; the issue is open and unresolved.

Summarized with AI on February 17. AI used: gpt-5.
1

Hi,

I use the Gecko theme and am needing some code to add a variant dropdown box on the product page in place of the standard swatch button for certain variants.

Currently, for variations that are colour related, the variant swatch will show the image of the variant (which is what I like) but when the variant is anything other than a colour eg. a size or a fragrance etc, the swatch shows as text only. Is there a way to replace the swatch with a dropdown box or any items NOT a colour variant as the text boxes can look very messy, especially when there are multiple variants? Please see image below.

I hope that makes sense?

Product Variants.png
Product Variants.png893×703 177 KB