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.

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.

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

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

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 %}
11

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

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

14

Hi @Tilda_Falth :raising_hands:

Hi, this setup can still be done without using an app. However, building it manually usually requires some additional setup so the different selections can switch smoothly between separate product pages.

A simpler and much easier-to-manage approach is to create separate products for each color/style, then connect them together so they behave like variants on the storefront.

With Easify Product Options, you can create Color Swatches or Image Swatches so customers can switch between different versions directly from the product page in a much more visual way.:smiling_face_with_three_hearts:

I’ve created a similar demo to help you better visualize how it works:

  • This is the result:

image
image1920×1006 288 KB

  • This is the app setting:

image
image1920×1006 158 KB

Then, in the Add/Edit Cross-product links section, you can connect each swatch to its corresponding product by selecting the matching product or attaching the product URL directly to each option value.

image
image1920×1006 216 KB

For example, when customers click the Black swatch, they’ll be redirected to the Black product page, and when they select White, they’ll be taken to the White product page instead. This way, each option can still have its own image gallery, content, pricing, and product details while the overall experience still feels like a unified variant selector :blush:

image
image1920×1006 241 KB

Once the setup is complete, clicking a different swatch will automatically redirect customers to the matching product page along with its own images and product information.

This approach works especially well when each version needs its own dedicated gallery or content while still keeping the browsing experience clean and intuitive like a normal variant selector. The setup is also quite beginner-friendly, so you can configure everything directly inside the app without needing coding knowledge.:pink_heart: