Creating dropdown variant picker dropdown

Technical
1

I would like to create variant picker dropdown like in the image for different bundles, currently we are using custom code for the button to direct to shopify checkout. How can we create dropdown like this but then with a checkout button leading to shopify checkout (not funnelish checkout)

2

Hi @Thanh_Tra_Nguyen :waving_hand: welcome to the community!

Thanks for reaching out! We don’t see any attached image, reference link, or funnel URL in your post — could you please share that with us? That will help us understand exactly what type of dropdown you’re trying to create.

Once we can see the design or reference, we’ll be able to suggest the best way to build a dropdown variant picker that connects to your Shopify checkout. :rocket:

Looking forward to your update!

3

Please check it here. The dropdown variant pickers, in 2 cases: 1 variant (like color), and 2 variants (color and size)

4

Hi @Thanh_Tra_Nguyen :waving_hand:

Thanks for sharing the screenshot.

Yes, you need some custom HTML, CSS, and JavaScript. The dropdown will hold your variants (color, size, etc.), and when user selects, the script can set parameters and send them to Shopify checkout link.

Example flow:

  1. Create <select> dropdowns for color and size.
  2. On change, capture selected value with JS.
  3. Add those values as URL parameters to your Shopify checkout link.

This way the right variant goes to Shopify checkout. :rocket: