Discuss and resolve questions on Liquid, JavaScript, themes, sales channels, and site speed enhancements.
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!
Solved! Go to the solution
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.
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!
@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.
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 🙂
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.
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!
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024