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

Solved

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

holygrails_in
Excursionist
16 0 2

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

holygrails_in_0-1719821812740.png

 

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

Accepted Solution (1)

devmont-digital
Shopify Partner
132 31 34

This is an 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.

2.PNG

1.png

3.PNG

 

  • 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
},

 

 

2.PNG

 

 

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

 

1.png

 

 

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

 

1.png

 

  • 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.

1.png

 

  • 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.

 

1.png

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io

View solution in original post

Replies 9 (9)

wo
Shopify Partner
139 32 29

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
Excursionist
16 0 2

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
Shopify Partner
132 31 34

This is an 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.

2.PNG

1.png

3.PNG

 

  • 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
},

 

 

2.PNG

 

 

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

 

1.png

 

 

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

 

1.png

 

  • 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.

1.png

 

  • 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.

 

1.png

 

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
holygrails_in
Excursionist
16 0 2

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.

holygrails_in_0-1719834253723.png

Can you take a look again?

devmont-digital
Shopify Partner
132 31 34

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

Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
holygrails_in
Excursionist
16 0 2

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: 

holygrails_in_0-1719835707251.png

 

Can you with this also?

devmont-digital
Shopify Partner
132 31 34

Add this code to set the height or width.

<img src="{{ get_the_look.featured_image | img_url: '90x90' }}" width="90" height="90">
Found our answer helpful? If so, Don't forget to show your support by liking and accepting the solution.
Looking for more help and expert consultation? Feel free to contact us at Shopify Expert or visit our website www.devmontdigital.io
Hire us for your project by simply emailing us at sales@devmontdigital.io
holygrails_in
Excursionist
16 0 2

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

holygrails_in
Excursionist
16 0 2

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

holygrails_in_0-1719834814625.png