linked variations in products - enterprise theme

Solved

linked variations in products - enterprise theme

enterprise123
Tourist
5 1 0

Hello, I want to have linked variations.

If I have for example a product in 10 different colors. each color has it's own name, SKU and description. I already made each color as a single product as I need all of them to be available in collections, however, i want to have them all linked with each other, so for example, if customers opens red product, they will see all the other colors in variants (brown, yellow etc.) but what is important is that the variants' SKU is connected to a single product due to inventory tracking . So basically, I need the products LINKED with each other. and seen as variants. This is the example of what i want to achieve: https://concept-theme-tech.myshopify.com/products/air-beats-gold-tone

How can I achieve that? 

I tried adding metafield values (type: product; list of products), but I didn't find a way to show that on my product page. I use Enterprise theme. 

Any help would be much appreciated, preferably if I can do it myself or with a free app!

Accepted Solutions (2)
Finer
Shopify Partner
2561 545 889

This is an accepted solution.

@enterprise123 you can try the code by pasting it into a custom-liquid block.

{% assign siblings = product.metafields.custom.variation_products.value %}
<ul>
{% for sibling in siblings %}
<li><a href="{{ sibling.url }}">{{ sibling.title }}</a></li>
{% endfor %}
</ul>

There was a small typo in the code — it should be "product.metafields" and not "product.metafield".

 

Regarding the Image:

{% assign siblings = product.metafield.custom.variation_products.value %}
<div style="display:flex;">
{% for sibling in siblings %}
<a href="{{ sibling.url }}" style="display:flex;flex-direction:column;margin-right:15px;">
{{ sibling.featured_image | image_url: width: 50 | image_tag }}
<span>{{ sibling.title }}</span>
</a>
{% endfor %}
</div>

This should display the images of the products (in one row), but you'll have to modify the styling.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency

View solution in original post

enterprise123
Tourist
5 1 0

This is an accepted solution.

Awesome, I made some changes to make it work for me, added tootip and styling and this is the final code, in case someone else needs help. 

{% assign siblings = product.metafields.custom.variation_products.value %}
<style>
  .product-variations {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom:20px;
  }
  .product-variation-item {
    position: relative;
    display: inline-block;
  }
  .product-variation-item img {
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    width: 70px;
    height: 70px;
    transition: transform 0.2s;
  }
  .product-variation-item img:hover {
    transform: scale(1.1);
  }
  /* Tooltip styling */
  .tooltip-text {
    visibility: hidden;
    background-color: #e5e5e5;
    color: #232323;
    text-size:10px;
    text-align: center;
    border-radius: 4px;
    padding: 8px;
    position: absolute;
    bottom: 120%; /* Positions the tooltip above the image */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
  }
  /* Show tooltip on hover */
  .product-variation-item:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
</style>

<div class="product-variations">
  {% for sibling in siblings %}
    <a href="{{ sibling.url }}" class="product-variation-item">
      <img src="{{ sibling.featured_image | img_url: '100x100' }}" alt="{{ sibling.title }}" />
      <span class="tooltip-text">{{ sibling.title }}</span> <!-- Tooltip text here -->
    </a>
  {% endfor %}
</div>

 

Thanks a lot @Finer , your help is much appreciated!

View solution in original post

Replies 4 (4)

Finer
Shopify Partner
2561 545 889

@enterprise123 the Theme "Concept" (your example) as well as “Be Yours” have a build in feature for this. 

 

If you want to do it by yourself, you'll have to use the product reference (list) metafield, link the products and display them via custom liquid code.

 

This is an example of how the code should look like to display the variants as a list including a link.

{% assign siblings = product.metafield.[namespace].[key].value %}
<ul>
{% for sibling in siblings %}
<li><a href="{{ sibling.url }}">{{ sibling.title }}</a></li>
{% endfor %}
</ul>

Please replace namespace and key with your definitions

 

When you are assigned the variants of a product, you have to repeat this process for each variant.

If you want to display the color instead of the product title, you'll have to modify the code.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
enterprise123
Tourist
5 1 0

Hello @Finer,

Your code worked, except there was a small mistake at the beginning (it should be product.metafields.[name]..., instead of product.metafield.[name]...) but I was able to figure that out. Thanks a lot!!! 


Also, are you able to help me achieve the displaying first product image of the variant instead of the list? 

 

 


That would fix all my problems 🙂 

Finer
Shopify Partner
2561 545 889

This is an accepted solution.

@enterprise123 you can try the code by pasting it into a custom-liquid block.

{% assign siblings = product.metafields.custom.variation_products.value %}
<ul>
{% for sibling in siblings %}
<li><a href="{{ sibling.url }}">{{ sibling.title }}</a></li>
{% endfor %}
</ul>

There was a small typo in the code — it should be "product.metafields" and not "product.metafield".

 

Regarding the Image:

{% assign siblings = product.metafield.custom.variation_products.value %}
<div style="display:flex;">
{% for sibling in siblings %}
<a href="{{ sibling.url }}" style="display:flex;flex-direction:column;margin-right:15px;">
{{ sibling.featured_image | image_url: width: 50 | image_tag }}
<span>{{ sibling.title }}</span>
</a>
{% endfor %}
</div>

This should display the images of the products (in one row), but you'll have to modify the styling.

- Did my answer help? Mark my post with a like
- Did I solve your problem? Mark my post as an accepted solution.
- You need professional help? Contact our Shopify Partner Agency
enterprise123
Tourist
5 1 0

This is an accepted solution.

Awesome, I made some changes to make it work for me, added tootip and styling and this is the final code, in case someone else needs help. 

{% assign siblings = product.metafields.custom.variation_products.value %}
<style>
  .product-variations {
    display: flex;
    gap: 10px;
    margin-top: 10px;
    margin-bottom:20px;
  }
  .product-variation-item {
    position: relative;
    display: inline-block;
  }
  .product-variation-item img {
    border-radius: 50%;
    border: 1px solid #e5e5e5;
    width: 70px;
    height: 70px;
    transition: transform 0.2s;
  }
  .product-variation-item img:hover {
    transform: scale(1.1);
  }
  /* Tooltip styling */
  .tooltip-text {
    visibility: hidden;
    background-color: #e5e5e5;
    color: #232323;
    text-size:10px;
    text-align: center;
    border-radius: 4px;
    padding: 8px;
    position: absolute;
    bottom: 120%; /* Positions the tooltip above the image */
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
  }
  /* Show tooltip on hover */
  .product-variation-item:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
  }
</style>

<div class="product-variations">
  {% for sibling in siblings %}
    <a href="{{ sibling.url }}" class="product-variation-item">
      <img src="{{ sibling.featured_image | img_url: '100x100' }}" alt="{{ sibling.title }}" />
      <span class="tooltip-text">{{ sibling.title }}</span> <!-- Tooltip text here -->
    </a>
  {% endfor %}
</div>

 

Thanks a lot @Finer , your help is much appreciated!