How to Show all products separately and also on each product page show it's variant with Picture

[holygrails_in]

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 %}

[wo]

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"
}
]

[holygrails_in]

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 

[devmont-digital · Accepted solution]

Hello @holygrails_in,

If you want to show product variations as per the given link, follow these steps:

• Go to Dashboard -> Settings -> Custom Data -> Products. Add a definition and name it "Product Separate Variant." Select type as "products" and choose the list of products, then save.

• Navigate to Online Store -> Edit Code. Search for the file main-product, and after "type": "title", paste the above code. Again, search for {% render block %}, and paste the above code there. A screenshot is attached for your reference.

{
    "type": "separate-variant",
    "name": "Product Seperate Variant",
    "limit": 1
},

{%- when 'separate-variant' -%}
{% render 'product-separate-variant' %}

• Create a new snippet file named product-separate-variant and paste the above code into it.

<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 %}

• Go to Online Store -> Customize -> Product -> Default Product. Add a block, search for "Product Separate Variant," and drag and drop it where you want it to appear.

• Finally, to show the variation on the products page, go to the products, scroll to the bottom of the page, find the metafield, and select the products you want to display as variations.

[holygrails_in]

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?

[devmont-digital]

Basically, you were supposed to create a snippet, but you made a section instead, which is why an error is showing.

[holygrails_in]

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?

[devmont-digital]

Add this code to set the height or width.

<img src="{{ get_the_look.featured_image | img_url: '90x90' }}" width="90" height="90">

[holygrails_in]

Thank you very much for the help 🙏💯💯 @devmont-digital 

[holygrails_in]

Hey Sorry, @devmont-digital  I found the error and made correction. Thank you very much for the support 🙏❤️💯💯💯