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

Also Available In:

{% for block in section.blocks %} {% assign product = all_products[block.settings.product] %}

{% if product %}

<img
src=“{{ product.featured_image | image_url: ‘90x90’ }}”
alt=“{{ product.title }}”
width=“90”
height=“90”
style=“margin-left: 5px; border: 1px solid #264a5d;”

{% endif %} {% endfor %}

{% if section.blocks.size == 0 %}

No alternate colors available.

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

{% for product in block.settings.product %}

{% endfor %}

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]

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.

{% if product.metafields.custom.product_separate_variant != blank %}
 
    
      

        

          {% assign get_the_looks = product.metafields.custom.product_separate_variant.value %}
          {% for get_the_look in get_the_looks %}
            

            
          

          {% endfor %}
        

      

    

 
{% 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?

[holygrails_in]

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

[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:

Result:

Can you with this also?

[devmont-digital]

Add this code to set the height or width.

[holygrails_in]

Thank you very much for the help @devmont-digital

[rookieee]

Hi Devmont Digital,

I have the impulse theme so cannot find the main-product liquid. How can I go around this?

[onlyweb]

Group products as style variants on the product page using a “Style Name”. This approach helps you streamline your catalog by showing grouped styles together on the storefront and display like variants. By consolidating similar products under one style name, this app also helps

You can use App: Product as Variants

If you still want we can help

[Variant-Robot]

Hi @holygrails_in

The app Variant Robot can automatically link your seperate listed products, that are presented as variants on your shop, without having to insert any code:
https://apps.shopify.com/variant-robot

Variant Robot can automatically link seperate products together, based on your product data.

The app also supports multiple display modes such as: Images, blocks, dropdowns, or auto-color swatches.

No need for any manual mapping, this is an automated solution that only requires one-time setup.

Best regards
Kristoffer

[BerkOnur]

Third-party apps make it easy to separate variants I own the Stamp – Collection Variants app , and we help merchants display variants separately on the collection page and home page. You can customize the settings per collection to show or hide specific variants, filter variants, or separate them by specific options. For example, you can create a “Gold” collection and display only gold-related variants.

New Stamp Update: Customize Variant Display Per Collection on Shopify!

[Siva_Baskara]

If your goal is mainly to show each variant (like color or size) as a separate product on the storefront, without actually splitting them in your Shopify admin, there’s a no-code way to do it.

The app Variantify keeps your original product structure (all variants under one product), but displays each variant as an individual product card on your collection pages.

It’s useful if you only want a cleaner, variant-based layout for customer, for example, showing all color options separately, while keeping your catalog organized in the back office.