Tinker Theme - Display variants as products on Collection Page

I’m trying to display the Variants as separate products on the Collection page. This is specifically with the Tinker theme which has this on their demo site - see below image.

I can’t seem to find any documentation on how to achieve this within the theme without editing the code (and the code edit version I found online seems to be outdated for this theme).

Hey! @bm-help ,

You’ll need to implement a custom code solution for this, as the Tinker theme does not provide built-in settings or official documentation for displaying product variants as separate items on the collection page.

Hello @bm-help ,

Please check the theme settings for the feature if not available you need to go with a developer to implement it.
or You can go with an app which provides similar functionality.

btw if you want to check a demo please visit my development store https://dev-variant.myshopify.com/collections/variants-as-products

Regards

Guleria

Hello @bm-help !

In the demo store for the Tinker theme, each product card is actually a separate product with its own unique product ID, not variants of the same product. As a result, they display as separate products in both the collections and search pages.

In order to display them as separate products on your stores, there are two options. The first would be to modify the theme files, specifically the collections code and the product card code, to display each variant instead of each product. However, this could prove complicated if you do not have knowledge of working with code.

The alternative would be to store these as separate products instead of variants of the same product. After that, you could use a variant app to link these separate products together, so you can switch products with swatches as if they were variants of the same product. In this case, the different colours will have separate product URLs, which is also great for SEO.

Two popular apps that do this are:

I hope this helps!

If my response helped you, please consider giving it a like ( :+1: ) and marking it as an accepted solution if it resolved your issue. Your feedback helps other community members with similar questions.

Regards,

Matthew from Swym

2 Likes

Third-party apps make it easy to separate variants. I own the Stamp – Collection Variantsapp , and we help merchants display variants separately on the collection page. You can customize the settings per collection to show or hide specific variants, filter variants, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-related variants.https://youtu.be/Pdk4JmfJjqQ

@bm-help products with similar titles are not automatically variants.

It’s an advanced theme customization to visually breakup a product into variants in a collection grid to be multiple cards , or requires paid apps.

To actually breakup a product into multiple products, aka sibling products , in the admin data, requires automation tools and or theme customizations to then still display them as a single product once back on the product page.

Often though it can be better to do this as swatches on the individual product card.

If you want this customization or automations then contact me for services.
Contact info in forum signature below :down_arrow: :down_arrow: :down_arrow:.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.