Pipeline Theme – Show Variants as Separate Products on Collection Page

Store Design
, ,
1

Hi everyone,

I’m using the Pipeline theme and I’m trying to figure out if it’s possible to show product variants as separate products on the collection page.

For example:

  • Each variant (like size, material, or color) would display as its own product in the collection grid.

  • But when a customer clicks into any of them, it should still lead to the same main product page (not duplicate products).

Has anyone done this with Pipeline before, or know if this can be set up directly in the theme? Would it require custom development or an app?

Thanks so much!

2

Hello @Chloe_M ,

I hope you are doing well!

Yes, it’s possible to show product variants as separate products on the collection page in Shopify, even while keeping the link to the same main product page. This would involve a bit of customization, both in your theme’s liquid code and possibly some JavaScript, but it can be done.

Here’s a general approach on how to achieve this:

1. Duplicate the Product Variants on the Collection Page

You can loop through the variants of a product and display them as individual items in the collection grid. For each variant, Shopify can create a new “product” that behaves like a regular product, but when clicked, it redirects to the main product page.

2. Edit the Collection Template (Liquid)

In the theme’s collection template, you will modify the loop that generates each product on the collection page. You’ll use Liquid to loop through the variants of each product and display them as separate “products” in the collection grid.

3. Link Each Variant to the Main Product Page

Each variant will need to link back to the main product page using a custom URL. You can generate a link to the main product using the product’s URL, or you can generate the URL for the specific variant, but it should redirect to the product detail page.

3

Hey,
in order to show the Product variant as a Separate product the you need to use a Custom Shopify product info block for this. Like create a new template then create the fake variants with circular and then assign a link of the product variants that you add as a new product the separate one.
This is the work around you can use.
If you could share your store url and 4 digits collab code in the p/m then I can setup it for you.
Thanks

4

Hey @Chloe_M , Welcome to Shopify Community!

In the Pipeline theme, displaying each variant as a separate product on the collection page isn’t supported by default. To set this up, you would need some custom development or use an app that handles variant-based listings.

You can approach it in two ways:

  1. Custom Development – By using metafields or a script, you can map variants and show them in the collection grid while linking them back to the main product page.

  2. Apps – Some apps allow you to create variant listings that appear separately but redirect customers to the original product page when clicked.

If you want, you can invite me to your Shopify store and I’ll set it up for you - no worries! You can check my work here: https://www.rajatweb.dev/.

Thanks!

Rajat

5

Third-party apps make it easy to separate variants. I own the Stamp – Collection Variants app , and we help merchants display variants separately on the collection page and home 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

6

Hey :waving_hand:, Have you been able to get the pipeline theme for your store?

7

Just a heads up for anyone considering the “create fake variants” or “duplicate as separate products” approach mentioned above, that can cause real issues down the line. You end up with inventory that’s hard to track, potential duplicate content problems for SEO, and a lot of manual work every time you add a new product.

What @Chloe_M described is actually a pretty common need: variants displayed as individual cards in the collection grid, but all clicking through to the same product page. No duplication, no workarounds.

Variantify does this natively. It works at the display level only, your product data, inventory, and URLs stay exactly as they are. Each variant just gets its own card on collection pages with the matching image and price. It’s theme-agnostic, so Pipeline or any other OS 2.0 theme should work fine.

8

Hi @Chloe_M :raising_hands:

Yes, this is possible, but there are a couple of important distinctions to consider.

Pipeline, like most Shopify themes, normally renders products in the collection grid rather than individual variants. So if you have:

Hoodie
→ Black
→ White
→ Navy

Shopify will normally render one product card for the Hoodie rather than three separate cards.

To display each variant as its own card while keeping them under the same product, you would need to customize the collection/product-card logic so that it loops through the relevant variants and renders a card for each one. The card would also need to pass the variant ID in the product URL, for example: /products/hoodie?variant=123456

That way, clicking “Black” can still open the same Hoodie product page with the Black variant selected.

The tricky part is that this isn’t just a visual change. Once you start rendering variants as collection items, you also need to consider pagination, collection sorting, filters, product counts, inventory, and how the card gets its image, price, and availability from the selected variant. That’s why a simple Liquid modification sometimes works for a basic collection but causes issues with other collection functionality.

If you only need a visual way for customers to move between colors, I’d actually consider a different approach: keep the variants within the same product and use color/image swatches on the product card or product page.

If each color really needs to behave like an independent item throughout the collection, another approach is to use separate products and connect them as related products. This gives you much more control over collection cards, images, inventory and URLs.

I’ve seen merchants use Easify Custom Product Options for the latter type of setup when they want visual color/image choices that can link customers to specific Shopify products. For example, Black, White and Navy can each be represented visually and connected to their corresponding products, without requiring customers to understand how the products are structured behind the scenes.

So I’d choose based on the goal:

Same product + variants displayed separately → custom Pipeline collection-card development.
Separate products that behave like one product family → linked products + visual swatches can be much easier to maintain.

If you specifically need every native variant to appear as an independent collection card without creating duplicate products, I’d lean toward custom development rather than trying to force an app to change Pipeline’s underlying collection loop.:heart: