How can i design this type of variation selector on my collection page? is there any app?

[gckishan]

I want to create variant selector like these website? how can i do that please help me if anyone know about this?

[Dotsquares]

Hi @gckishan,

To create a variant selector option on the product listing page in a Shopify store like the one shown in the image (where users can choose variants such as quantity or packaging type directly on the product listing page), you can implement it using custom Liquid code and a bit of JavaScript.

Step-by-Step Implementation Guide:

1. Modify the Product Card Snippet
Locate the snippet that renders each product in the collection (usually something like product-card.liquid or product-grid-item.liquid).

Add this code where you want the variant selector dropdown to appear:

{% assign first_variant = product.variants.first %}

<form method="post" action="/cart/add">
<input type="hidden" name="id" value="{{ first_variant.id }}" class="variant-id">

<select name="id" class="variant-selector" onchange="updateVariantId(this)">
{% for variant in product.variants %}
<option value="{{ variant.id }}">
{{ variant.title }} - {{ variant.price | money }}
</option>
{% endfor %}
</select>

<button type="submit">Add to cart</button>
</form>

2. Add JavaScript to Update Variant ID
You can include this in your theme.liquid file or in a separate JS file.

<script>
function updateVariantId(selectElement) {
const form = selectElement.closest('form');
const hiddenInput = form.querySelector('.variant-id');
hiddenInput.value = selectElement.value;
}
</script>

3. Style the Selector (Optional)
Use CSS to style the dropdown so it matches your store's theme.

.variant-selector {
padding: 8px;
border-radius: 6px;
border: 1px solid #ccc;
margin-bottom: 10px;
}

Important: you should know how and where to paste this code.

Hope this will help creating this variant option. Let me know if you need more help.

Regards,

[Mahfz_ShopiDevs]

Yes there is an app called easyDisplay Product Showcase. which exactly same layout design. you can visit this link easy-layout with Varient 

[Mahfz_ShopiDevs]

I forgot to add the image, but you can use this app to create a exactly similar variant visibility setup. There are many templates to choose from, and you can tweak variant visibility along with other features to control the swatch display as a dropdown, image grid, and more.

[namphan]

Hi @gckishan,

What theme are you using? Please send me the theme name, I will check it.

In addition, you can also refer to the following apps:

- STKY ‑ Sticky Add To Cart

- SEOAnt ‑ Sticky Add To Cart

- ....

[gckishan]

I am using Dawn theme

[namphan]

Hi @gckishan,

I checked and the current Dawn theme does not support this, so if you want it, you need to customize the code again.

It will be a complex requirement and you need to have experience in Liquid, CSS and JS coding. You can refer to the following steps:

- Step 1: Go to snippets > card-product.liquid file, and add code Liquid show form. You can refer to the code in the buy-buttons.liquid file.

- Step 2: Add CSS and JS code to make it display well.

[Easify-Jolie]

Hi @gckishan 

If you want to show a size dropdown (or other variant selectors) directly on the collection page, you could take a look at the Easify Product Options app. It’s a no-code tool that lets you create custom option fields—including dropdowns—and display them even outside the product page. Super handy if you want to let customers choose options without extra clicks! Here's how it works:

• This is the result:

• This is the app setting: You just have to set Size Dropdown

Then, you apply the option set for your collection, or you can select products manually.

Finally, go to Settings tab in the app, in the Other pages section, select collection like this: 

I hope this answer helps solve the problem. If you need further assistance, feel free to reach out to Easify anytime! 🤗