How to Implement Linked Product Variant Pages Like Trendyol or Amazon (Cross-linked Product Variants)

Ask the community
, , , ,
1

Hi everyone,

I’m building an e-commerce store on Wix Studio and I want to implement a variant system similar to how Amazon and Trendyol (a large Turkish marketplace) display product variants.

Here’s exactly what I’m trying to achieve:

:small_blue_diamond: What I want:

Each product variant (color, size, etc.) should have:

  • Its own dedicated product page with unique URL
  • But still be linked together visually on the same product page
  • So the user can switch between variants (colors/sizes) from within the product page
  • And all variants are grouped by a shared model code or SKU

:small_blue_diamond: Real examples:

  1. Trendyol (Turkey) – Example:

https://www.trendyol.com/sr?q=Tuable%20Kareli%20Masa%20Örtüsü%20160x220cm&qt=Tuable%20Kareli%20Masa%20Örtüsü%20160x220cm&st=Tuable%20Kareli%20Masa%20Örtüsü%20160x220cm&os=1

  1. Amazon – Example:
    https://www.amazon.com/dp/B08N5WRWNW
    Each color has its own URL but they all appear as swatches on the same page.

You can see the color variants below the product image. Each one links to a separate product page but all are cross-linked.

:small_blue_diamond: What I’ve done in Wix:

  • I’ve created each variant as a separate product page (e.g. Macbook Red, Macbook Grey, etc.)
  • I have a custom collection in Content Manager with fields like:
    • modelCode, title, image, productPageUrl, color, size, etc.
  • I can show related items using a repeater or grid, filtered by the same modelCode

:cross_mark: But here’s the problem:

Wix Studio doesn’t automatically link these products like Trendyol or Amazon does.
I want to show other variants (same modelCode) on each product page, like a color picker or swatch.
When the user clicks a variant, they should be redirected to that variant’s own URL.

:magnifying_glass_tilted_left: What I’m asking:

  • Is there a best practice in Wix Studio or Velo for implementing “cross-linked product variants”?
  • How do I display all other variant pages that share the same model code on a product page?
  • Is there an official pattern or component for this?
  • Can I create a dynamic repeater or swatch area that links to the correct product variant pages?

:wrench: Tech stack:

  • Using Wix Studio + Velo
  • Product data in Content Manager
  • Varying number of variants per product (some have only size, some only color, some both)

Thanks in advance for any advice, examples, or best practices you can share!
This seems like a very common use case, but I couldn’t find an out-of-the-box solution.

:folded_hands:

2

Unfortunately, there is no out-of-the-box solution for this as of now. Using Velo you can still get the selected product variants and construct a URL using query params. But that is of no use in this case, since there is no option to ‘set’ a variant by default when the product page loads. So to achieve something like this, you will have to create your own custom product page and use Velo to create the variant selection logic that you’ve described.