How To Add More Product Options

[martujv]

Hi!

In my website, I will be selling 3 tracksuits (jacket + pants) in 3 different colors. I would like to have just 3 different products (one per color) instead of 9 (individual jacket or pants for each color).

Ideally, once you click on each tracksuit color and you go to its product page , you should be able to buy (in the same color) either the jacket, the pants, or the full set, individually. Of course the prices would change too. It should be one more “variant option”, just like “Size” or “Color”.

How can I set this up? Thanks in advance!!

[MiracleWebsoft]

How to set it up (native Shopify)

Create 3 products only (one per color):

• Tracksuit – Black

• Tracksuit – Blue

• Tracksuit – Grey

For each product, add 2 variant options:

Option 1: Size

• S, M, L, XL

Option 2: Set Type

• Jacket

• Pants

• Full Set

Each variant can have:

• Different price

• Different SKU

• Same images (or variant-specific if needed)

LIMITATION (Important)

• Inventory is per variant, not shared
  (Jacket stock & Full Set stock are separate)

Otherwise you need use a product builder app which will do this for you.

[martujv]

Thanks for your reply! That solved a big part of it, however, I can’t manage to link the 3 tracksuits (black, white and grey) to their respective variant buttons. For example, if you are on the product page of the black tracksuit, and you click on the white variant, it should take you to the product page of the white variant, where you can see all the images and videos of the white tracksuit. Any solution for this? Thanks again!

[oscprofessional]

Hi @martujv ,
Use variants, not separate products.

Create 3 products (one per color).
For each product, add two variant options:

• Size (S, M, L, etc.)
• Set Type (Jacket only / Pants only / Full set)

Set different prices per variant.
This lets customers buy jacket, pants, or full set on the same product page without creating 9 products.

[martujv]

Hi! Yes, I did that, but I also need customers to switch colors / products easily. For example, if you are on the product page of the black tracksuit, and you click on the white variant, it should take you to the product page of the white variant, where you can see all the images and videos of the white tracksuit. Any solution for this?

[oscprofessional]

Keep 1 product per color (Black / White / Blue), NOT color variants.

Then:

• Use Size + Set Type (Jacket / Pants / Full set) as variants
• Add color swatches that link to other products

So when a customer clicks White, they are taken to the White tracksuit product page with:

• White images
• White videos
• White pricing & inventory

This is exactly how many premium Shopify stores handle color changes.

[martujv]

I don’t know how to link swatches to separate products, I was looking for some tutorials but they just add normal swatches, not ones that are connected to other products.

[oscprofessional]

1. Create a metafield to store color products

Go to
Settings → Custom data → Products → Add definition

• Name: Color siblings
• Namespace & key: custom.color_products
• Type: Product list
• Accept multiple values:

Save.

2. Link the colors together

For each tracksuit product (Black / White / Blue):

• Open the product in Admin
• In Color siblings, select the other color products

Example for Black tracksuit:

• White tracksuit
• Blue tracksuit

3. Add swatches to the product page

In main-product.liquid (or equivalent), add this where variants are shown:

{% if product.metafields.custom.color_products != blank %}
  <div class="product-color-swatches">
    {% for color_product in product.metafields.custom.color_products.value %}
      <a
        href="{{ color_product.url }}"
        class="color-swatch"
        title="{{ color_product.title }}"
      >
        {{ color_product.title | split: ' - ' | last }}
      </a>
    {% endfor %}
  </div>
{% endif %}

4. Style them like real swatches (optional)

.product-color-swatches {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.color-swatch {
  padding: 6px 12px;
  border: 1px solid #ccc;
  text-decoration: none;
  font-size: 14px;
}

.color-swatch:hover {
  border-color: #000;
}

[Easify-Jennifer]

Hi @martujv

If your goal is to sell tracksuits by color (one product per color) while still allowing customers to choose between Jacket, Pants, or Full set with different pricing directly on the product page, then Easify Product Options can fully handle this without any custom Liquid or theme code edits.

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

• This is the result:

• This is the app setting:

For your case, you can create a Set Type option using buttons or radio buttons (Jacket / Pants / Full set) so customers can select the product type directly on the product page, instead of splitting them into multiple separate products. Then, simply enter the corresponding price for each option using the Add price feature.

To make the color selection redirect to the correct product page, you can click on Add Options details, enable it, and insert the URL for each corresponding color.

You can still keep other options like Size, Color as usual without being affected by Shopify’s variant limitations.

All selected options will be saved along with the order, making it easy for you to review and process later.

The setup is simple, requires no coding, and is a clean and efficient way to handle “product type selection + dynamic pricing” for cases like tracksuits.