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

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:

What I currently have:

Is this possible?

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

@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.

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

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

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

Hi @owenmyk2896 ,

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

Thank you

How would we go about doing that?

HI @owenmyk2896 ,

Here is the preview URL:

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

Password: upwork

Thank you

Hi @kingbeanz,

I hope you are doing well. If you are open to trying a third-party app, you can try the Inkybay – Product Personalizer app to show the color variants as a swatch and the size variants as a dropdown.

With Inkybay’s Product Option feature, you can create the size option as a single-choice dropdown. You can show the size option as a radio/swatch/dropdown. Also, you can create a color swatch or an image swatch option.

Inkybay also lets you add other advanced options such as short and long text fields, file upload options, and custom free size/ preset size. You can also add extra pricing for your options. Customers will be able to see the dynamic pricing on the product page after each option selection. All customer selections are automatically saved with the order, so you receive everything clearly in the order file.

The best part is that no coding is required, and a simple setup. It offers a free 21-day trial so you can explore it and see how it works for your product.

Hi @kingbeanz :raising_hands:

If you’d like to display Color as swatches while keeping Size as a dropdown selector, this can be set up quite easily with Easify Product Options :blush:

To give you a better idea of how the setup would look in practice, I’ve also prepared a similar demo for reference:

  • This is the final result:

  • This is the app setting:

For the Color option, you can simply create an option using the Color Swatches display type and then add your color values such as Black, White, Blue, and so on :blush: Once configured, the app will automatically display them as clickable swatches directly on the product page for a more visual selection experience.

For the Size option, you can create a separate option using the Dropdown display type and then add your size values such as XS, S, M, L, XL :blush: This will display the size selector as a clean dropdown menu on the product page instead of using pills or button-style selectors.

As shown in the demo above, both display styles can work together seamlessly on the same product page, helping you create a cleaner and more modern product layout without needing any custom coding :blush:

The app is also quite beginner-friendly, so the entire setup can usually be configured visually inside the app with just a few simple steps.:heart:

Yes, you can absolutely keep your hardcoded color swatches while having your size options display cleanly as a dropdown!

The easiest, code-free way to achieve this setup on Ella 6.0 is to use Misk Variant & Product Options.

Dropdown for Sizes: Inside the app dashboard, use the Option Set Builder to drag and drop a clean Dropdown menu onto your layout. Populate it with your specific size values (S, M, L XL).

Add Extra Colors Easily: You can use the app to assign additional color swatches or options to a single product or mass-apply them across different products using collections or tags all without writing or breaking any theme code.