Link variant button to product page?

Store Design
1

Hi!

Is it possible to link variant button to a product page without app? I want a product that has 3 different variants but the variants have their own product page. On the main product page the variants should have an image as the variant button instead of text and under the image should be the name of the variant. When a customer selects a variant it should take them to the variants product page. On each product variants page there should be image swatches for the other variants if the customer wants to switch to another one.

This is the vision I have:

(Main product):

Screenshot_2026-03-19_at_15.43.33
Screenshot_2026-03-19_at_15.43.331920×932 122 KB

Variant product:

Screenshot_2026-03-19_at_15.43.33 2
Screenshot_2026-03-19_at_15.43.33 21920×932 131 KB

Is this possible to do without app? I’m using Horizon theme.

1 Like
2

Hi Tilda, If you are on a Shopify Plus plan then you can use official Shopify Combined Listings app. If not you will need to implement some custom coding solution. Unfortunately there is no native way of doing it without code or app.

2 Likes
3

Hi @Tilda_Falth

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder :laptop:

4

Hi! My website seoulsound.se

1 Like
5

Hi @Tilda_Falth

Your website has variant products added, and when we click on a color variant, the product for that specific color should open right?

6

Yes, I want it to switch to a product page when clicking on a swatch

1 Like
7

I don’t have Shopify plus but I don’t mind doing it through code

8

Hi @Tilda_Falth

Okay, could you please send me the collaborator code so I can implement this in your store?

9

Hey @Tilda_Falth this is exactly possible. Check this site they have using the variants as a product.

Here is the reference site url: Heavy Shaker Sweater – Chez Rien

10

Hi @Tilda_Falth ,
You can do this cleanly using product metafields in

  1. Create a product metafield (type: Product list) → e.g. related_variants
  2. Add all variant products (A, B, C) into this metafield
  3. In your product template, loop through it:
{% for product in product.metafields.custom.related_variants.value %}
<a href="{{ product.url }}">
<img src="{{ product.featured_image | image_url: width: 200 }}">
<p>{{ product.title }}</p>
</a>
{% endfor %}
1 Like
11

Thank you! Could explain it a bit more into detail?

1 Like
12

Hi @Tilda_Falth

Because it’s technically doable without an app, but it’s best to use separate products and not true variants. Create each variant as a separate product, then add a custom swatches section on the product template that shows images that link to the other product URLs. This simulates variant switching and allows you to have a separate product page for every item.

13

Yes this is possible on the Horizon theme. I have coded this very functionality for https://slidepods.co.uk

Simply create a custom liquid block and add the code as detailed by @oscprofessional