All things Shopify and commerce
I want to show product Variation like this but also I don't want to create variation of any product and show all products separately. (Inspired from - https://thecaistore.com/products/peach-cushy-thong-heels)
I Search the internet and found the following code show below but it's not working as it should be (The section got created but I can't give input separately for each product and also it is a SECTION but it should be a Section BLOCK to be showing at the right position) FYI using Dawn theme:
{% comment %}
This is a Shopify Liquid section for displaying alternate color options for a product.
{% endcomment %}
{% schema %}
{
"name": "Product Alternate Colors",
"settings": [],
"blocks": [
{
"type": "product_handle",
"name": "Product Handle",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
}
]
}
],
"presets": [
{
"name": "Product Alternative Colors",
"category": "Product"
}
]
}
{% endschema %}
<div class="product-block">
<p style="margin-bottom:10px;"><strong>Also Available In:</strong></p>
<div class="product-alt-colours">
{% for block in section.blocks %}
{% assign product = all_products[block.settings.product] %}
{% if product %}
<a href="{{ product.url }}" title="{{ product.title }}" data-bss-pl="active" data-handle="{{ product.handle }}">
<img
src="{{ product.featured_image | image_url: '90x90' }}"
alt="{{ product.title }}"
width="90"
height="90"
style="margin-left: 5px; border: 1px solid #264a5d;"
>
</a>
{% endif %}
{% endfor %}
</div>
</div>
{% if section.blocks.size == 0 %}
<p>No alternate colors available.</p>
{% endif %}
Solved! Go to the solution
This is an accepted solution.
Hello @holygrails_in,
If you want to show product variations as per the given link, follow these steps:
{
"type": "separate-variant",
"name": "Product Seperate Variant",
"limit": 1
},
{%- when 'separate-variant' -%}
{% render 'product-separate-variant' %}
<style>
.getthelook-products {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.getthelook-products-wrapper{
padding-top:75px;
}
</style>
{% if product.metafields.custom.product_separate_variant != blank %}
<div id="get-the-look" class="getthelook-products-wrapper">
<div class="page-widths">
<div class="getthelook-products">
{% assign get_the_looks = product.metafields.custom.product_separate_variant.value %}
{% for get_the_look in get_the_looks %}
<div class="prduct-wrapper">
<a href="{{ get_the_look.url }}"><img src="{{ get_the_look.featured_image | img_url: '92x92' }}" ></a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
You should modify main-product.liquid to add a block instead of adding a section.
Find {%- case block.type -%} and add
{% when 'product_alternate_colors' %}
<div class="alternate-colors">
{% for product in block.settings.product %}
<a href="{{ product.url }}">
<img src="{{ product.featured_iamge | image_url }}" width="90" height="90">
</a>
{% endfor %}
</div>
Then add a block schema code to the corresponding position
{
"type": "product_alternate_colors",
"name": "product alternate colors",
"settings": [
{
"type": "product",
"id": "product",
"label": "Product"
}
]
Showing error in json schema file for the type property.. Can you check the code again? and also what do you mean by corresponding position? @wo
This is an accepted solution.
Hello @holygrails_in,
If you want to show product variations as per the given link, follow these steps:
{
"type": "separate-variant",
"name": "Product Seperate Variant",
"limit": 1
},
{%- when 'separate-variant' -%}
{% render 'product-separate-variant' %}
<style>
.getthelook-products {
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
}
.getthelook-products-wrapper{
padding-top:75px;
}
</style>
{% if product.metafields.custom.product_separate_variant != blank %}
<div id="get-the-look" class="getthelook-products-wrapper">
<div class="page-widths">
<div class="getthelook-products">
{% assign get_the_looks = product.metafields.custom.product_separate_variant.value %}
{% for get_the_look in get_the_looks %}
<div class="prduct-wrapper">
<a href="{{ get_the_look.url }}"><img src="{{ get_the_look.featured_image | img_url: '92x92' }}" ></a>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
Hello, Thanks for the response @devmont-digital but at the end it shows an error.
Firstly I have added this block after price & before variant picker, but it is show below the Buy / Share button.
Secondly, It doesn't give the desired output it say there is an error in the code.
Can you take a look again?
Basically, you were supposed to create a snippet, but you made a section instead, which is why an error is showing.
Yes I understand and troubleshoot the error now it's working. Thank you very much. i need one more help with this line of code I mentioned below, I want to show images in a 90x90 dimension but when i do that image doesn't load.
Code used:
<a href="{{ get_the_look.url }}">
<img
src="{{ get_the_look.featured_image | image_url: '90x90' }}"
width="90"
height="90"
style="display: block;"
>
</a>
Result:
Can you with this also?
Add this code to set the height or width.
<img src="{{ get_the_look.featured_image | img_url: '90x90' }}" width="90" height="90">
Hey Sorry, @devmont-digital I found the error and made correction. Thank you very much for the support 🙏❤️💯💯💯
In today’s interview, we sat down with @BSS-TekLabs to discuss practical strategies for...
By JasonH Nov 13, 2024The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024