I want customers to be able to shop by variant and have that variant selected on product page

New Member
1 0 0

I have a yarn company, and my products are organized by colorway and then there are variants for the various yarn bases (types of products that the colors can be put on.) I have collections set up for each base, and want customers to be able to shop by base and have that specific base be the selected variant on the product page when they click on a product from the collection page.

Basically, if you think of it like a t-shirt company where the "colorway" is the color of a shirt, and the "yarn base" is the size, I want people to be able to shop by their size, and I want that size to be the selected variant when they go to that product. Currently, it selects the first in-stock variant.

Here's the scenario I want to achieve:

Sally is a size XL and wants to see all shirts that are currently in-stock in her size. She clicks the "View All XL Shirts", it takes her to a collection with all in-stock XL shirts. She clicks on the red shirt that she loves, and it automatically selects the XL. Is this possible? Currently, it will select the first size that is in-stock, and she might not realize that before checking out.

Thank you in advance!


150 8 15

Hello @TravelingYarn 

Shopify only includes the products in the collections, so you need an app to accomplish this. I recommend trying the Merchandising tool in Ultimate Filter & Search app to exclude irrelevant variant options from the collection. For example, you create an "XL Shirt" collection and use Merchandising tool to exclude other options like "X, M, L" from this "XL" collection. Users will only see the available XL items on the collection. When they click on one item from the collection page, it will show the selected variant on the product page. It will work like their demo store https://usf-vertical.myshopify.com/collections/red-shirts