Hybrid Variant Picker: Color as Pills (swatches) + Sizes as Dropdown | Dawn Theme

Store Design

Topic summary

A user wants to customize their Dawn theme product page to display color options as visual swatches (pills) while keeping size options in a dropdown menu format, rather than having both variants displayed the same way.

Current Situation:

  • Successfully implemented color swatches
  • Seeking to add size dropdown alongside existing swatches
  • Provided example image showing desired layout

Solutions Offered:

  1. Basic approach: Navigate to theme customization → product page → product information dropdown → variant picker section → select dropdown style for variant picker

  2. Custom code solution: Requires updating product-variant-picker.liquid and product-variant-options.liquid files (estimated 2 hours of work). A developer provided a preview URL demonstrating the hybrid implementation.

  3. Video tutorial: YouTube guide referenced for implementing size dropdowns

Status: Multiple users expressed interest in this same customization. Custom coding assistance offered to implement the solution, with working preview examples shared (password: upwork).

Summarized with AI on November 8. AI used: claude-sonnet-4-5-20250929.
1

Hi,
Title says it.

I’ve coded my site to the point where I can have the colours as swatches.

Is it possible to keep this whilst ALSO having the sizes as dropdown?

This will be the cleanest option of all.

Example of what I desire:

Screen Shot 2024-06-03 at 9.09.11 am.png
Screen Shot 2024-06-03 at 9.09.11 am.png892×636 38.7 KB

What I currently have:

Screen Shot 2024-06-03 at 9.12.20 am.png
Screen Shot 2024-06-03 at 9.12.20 am.png1252×460 45.2 KB

Is this possible?

URL: https://www.vntura.com/products/ultra-light-down-puffer-jacket
PWD: smeared

2

@kingbeanz

please refer to the steps below

  1. Click on theme customization on your online store.
  2. Open product page in customization.
  3. Open product information dropdown.
  4. Click on variant picker section.
  5. Select variant picker style dropdown.
  6. Click on save button.
3

Hi @kingbeanz ,

We need to update the product-variant-picker.liquid and the product-variant-options.liquid and it will take 2hrs.

Reference URL: https://u9wdfqe5wieade4a-68574249208.shopifypreview.com/products/the-collection-snowboard-hydrogen?variant=45271959372024

password: upwork

Let me know if you need any assistance.

Thank you

4

I have the same goal with Dawn 14.0. Can you please help me?

5

Then this one for the dropdown for sizes: https://www.youtube.com/watch?v=BJIb9YE6OwE&ab_channel=AmazingLearning

6

Hi @owenmyk2896 ,

Let’s get connected so that I can help you with the custom code.

Thank you

7

How would we go about doing that?

8

HI @owenmyk2896 ,

Here is the preview URL:

https://5zdvcogwlldvhz5s-68574249208.shopifypreview.com/products/the-collection-snowboard-hydrogen?variant=45271959372024

Password: upwork

Thank you