How to add Filter by Size variant

[busyXploring]

Hi There - I cannot find where to add the 'Filter by Size' variant option for my website (www.busyxploring.com). Is there an app anyone suggests or an easy way to add coding to do this?

I have seen some website that use shopify have this option and I cannot find out how to add it that way customers can shop items in stock in their size.
(for example, https://www.happyearthapparel.com/collections/short-sleeve-tees has the Filter size/fit)

I use the paid version of the Archetype IMPULSE theme. 

[PeanutButter]

Hi there,

option1 - with no apps and using products tags

The only way to filter a Shopify collection without an app (which seems what the site you sent is doing) is by filtering by tags.
Here you can find the official Shopify tutorial on how to implement filtering by tags: https://shopify.dev/tutorials/customize-theme-filter-collections-with-product-tags

If you prepend any tag handle to a collection you will get that collection filtered by that tag, for example, this is a collection of the site you send:

https://www.happyearthapparel.com/collections/short-sleeve-tees

and if you prepend small to it, it filters the collection by products tags as small:

https://www.happyearthapparel.com/collections/short-sleeve-tees/small

So really it is not tagging by the variant option size but by a product tag

options 2 - using apps

There are a lot of apps which do this. The one I've used in more projects is https://apps.shopify.com/product-filter-search. Works great and loads results super fast.  Also has search with auto-suggestion

If you only want to implement 1 

Then there are apps which do this 

[kate-nel]

Hello @busyXploring 

You can add filter by product tags or options. The Impulse theme has the feature to add filters by tag groups. https://archetypethemes.co/blogs/impulse/how-should-i-organize-my-products-and-filters  However, you need a smart tag app to automatically tag your products in your Shopify store based on available size variants. 

The theme filter doesn't allow multiple filter selection of the same type. If customers want to select both S and M, they have to go back and forth to apply separate values. Ultimate Filter & Search app offers dynamic product filtering with easy set up and the most lightweight codes. It has many tools to help you improve conversion such as Search merchandising, Instant Search with product suggestion.

[PeanutButter]

@kate-nel I didn't know about the smart-tags app, pretty cool! thanks for sharing

[PeanutButter]

@busyXploring did you check our suggestions? 

Do you need any further help?

[busyXploring]

@PeanutButter @kate-nel Thank you both so much! After weighing my options/budget, I decided on the tags option. Now I just have to get through all my products and remember to update them when I get new inventory! 

Have a great week!

[karan90]

Hello

How were you able to have the sizes show up in non alphabetical order? That's what I'm currently struggling with.

[PaulNewton]

For stores using a theme compatible with Online Store 2.0

Review and setup storefront filtering https://help.shopify.com/en/manual/online-store/themes/os20/customize/filters 

For vintage themes you will to customizate your themes search for a specific property https://help.shopify.com/en/manual/online-store/storefront-search ( i.e. variant.title)

[ErSanjay]

@PaulNewton  @busyXploring 

I have prestige theme i am using a filter from the shopify built by 2.0 with search and discovery app, 

all are working fine but I want to create multiple filter using the code so I can add any where in storefronts. 

r

[PaulNewton]

---

@ErSanjay wrote:

I want to create multiple filter using the code so I can add any where in storefronts. 

---

What code , there is no code in this thread.

To DIY implement storefront filtering in themes see the dev docs.

https://shopify.dev/docs/themes/navigation-search/filtering/storefront-filtering 

[ErSanjay]

@PaulNewton  thanks for the your replay.

I am referring the code for 

<form is="facets-form" {% if update_on_change %}update-on-change{% endif %} section-id="{{ section.id }}" method="GET" action="{{ request.path }}" class="facets">
....

...

[PaulNewton]

Off topic for this post , Make a dedicated post in the design or technical form depending on what the actual question is.

Adding filtering anywhere on a site is an advanced customization.

Realize others will have no idea what that code is for as you are not providing actual detail to understand what's being attempted.

Be descriptive, provide references, etc in a dedicate post.

Good Hunting.