How do I showcase different images for each collection from same product?

Highlighted
New Member
10 0 0

Hello Everybody!

I would like to show a product on different collections, in each collection tho I would like to show a different picture based on category. To be more precise (ex):

I have 1 product with 5 variants. Let's say those variants are colors, I wantto show in the "yellow collection only yellow images (variants) but at the same time when u click on it the actual product page itself have to contain all the other colors coming from other variants and so other collections.

I am kinda doing this already by splitting the product by variant with oberlo import, but I dont have all the pictures from the product since by splitting it it creates a single product with that variant.

I am sure it is easy task but I am kinda entangled in my brains today :(

please suggestions ?

0 Likes
Highlighted
Shopify Expert
2684 67 846

Hi Francesco,

I've answered similar question in this thread 

Check the "COMPANY LIGHTWEIGHT | BLACK" product  (the first one) in this collection https://shopmovesociety.com/collections/women and in this: https://shopmovesociety.com/collections/kids

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
10 0 0

Thanks @tim but cannot quite go around it yet.

 

So, I'll try to explain myself better (or maybe I just cant see the obvious answer :) ) 

Id like to reach a point in that goes like

 

there are 12 different collections (zodiac signs) and every product has 12 variants (zodiac signs still). how to put it like:

If in collection #xx show product image variant #xx

then

open url that goes directly to same variant and not on the first image of product (would that be possible?)

 

I would immensly appreciate any help

 

edit: maybe a better way would be 

if Variant.Name contains Collection.Title then use Variant.Image

 

but where and how do I implement this?

0 Likes
Highlighted
Shopify Expert
2684 67 846

The idea from that thread is how to show different image for the one product when listed on the collection page of the different collections.

On the product page, there are two options to pursue:

1. Show the collection-relevant picture on opening the product page

2. Select the relevant variant (which will also show the proper picture)

For the first option the solution can be similar to this:

find this line of code:

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

and add the following code below:

{% if collection %}
  {% for variant in product.variants %}
    {% assign var_title_lc = variant.title | handle %}
    {% if var_title_lc contains collection.handle %}
        {% if variant.image %}
          {% assign featured_image = variant.image %}
        {% endif %}
        {% break %}
    {% endif %}
  {% endfor %}
{% endif %}

Second options is also possible, but will require more serious modification to code.

It is also possible to use similar code in the product-grid-item.liquid Snippet to change the product link to automatically select relevant variant (probably the best option):

find this line

  <a href="{{ featured.url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">

 and replace with this code:

{% assign featured_url = featured.url %}
{% if collection %}
  {% for var in featured.variants %}
    {% assign var_title_lc = var.title | handle %}
    {% if var_title_lc contains collection.handle %}
      {% assign featured_url = var.url %}
      {% break %}
    {% endif %}
  {% endfor %}
{% endif %}
<a href="{{ featured_url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
10 0 0

I found the line under section: product-template.liquid

It has that line twice :

 {% if section.settings.product_thumbnails_position == 'below' or product.images.size < 2 %}

          <div class="product-single__photos" id="ProductPhoto">
            {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
            <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg"{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}{% if section.settings.product_image_zoom_type == 'lightbox' %} class="zoom-lightbox"{% endif %} data-image-id="{{ featured_image.id }}">
          </div>

          {% if product.images.size > 1 %}

            <ul class="product-single__thumbnails grid-uniform" id="ProductThumbs">
              {% for image in product.images %}
                <li class="grid__item wide--one-quarter large--one-third medium-down--one-third">
                  <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                    <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                  </a>
                </li>
              {% endfor %}
            </ul>

          {% endif %}

        {% else %}

          <div class="grid">

            <div class="grid__item four-fifths product-single__photos" id="ProductPhoto">
              {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
              <img src="{{ featured_image | img_url: '1024x1024' }}" alt="{{ featured_image.alt | escape }}" id="ProductPhotoImg"{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ featured_image | img_url: '1024x1024' }}"{% endif %}{% if section.settings.product_image_zoom_type == 'lightbox' %} class="zoom-lightbox"{% endif %} data-image-id="{{ featured_image.id }}">
            </div>

            <div class="grid__item one-fifth">

              <ul class="grid product-single__thumbnails" id="ProductThumbs">
                {% for image in product.images %}
                  <li class="grid__item">
                    <a data-image-id="{{ image.id }}" href="{{ image.src | img_url: '1024x1024' }}" class="product-single__thumbnail">
                      <img src="{{ image.src | img_url: 'grande' }}" alt="{{ image.alt | escape }}">
                    </a>
                  </li>
                {% endfor %}
              </ul>

            </div>

          </div>

        {% endif %}

 

When try to capy that code returns this error:

This file contains the following errors:

  • Line 28 — Liquid syntax error: Unknown tag 'endfor'

 

I dont understand, it seems pretty linear

 

0 Likes
Highlighted
Shopify Expert
2684 67 846

Oops, sorry -- forgotten second {% endif %} -- fixed up there.

Yes, this line is in 2 places depending on where you want your thumbs displayed.

But the last option (to modify product-grid-item) is probably a better solution.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes
Highlighted
New Member
10 0 0

@tim 

Perfect! so now when I open a product it shows directly the variant depending on the collection chosen. 

Now, I guess as last thing, and maybe u gave me the solution already, but it will be to actually display in the category the product variant so not only when I click on it opens correct correlated variant (which is already doing ) but also it needs to show that variant as a thumbnails in the relative collection.

 

edit: I guess this last part is very important to me as otherwise I'd have to import like 12 products with 12 variations each in order to have correct picture per collection but also the possibility to choose other variants. And having an image that isnt related to the collection looks unprofessional :(

 

0 Likes
Highlighted
Shopify Expert
2684 67 846

I see  you've modified the product-grid-item.liquid Snippet, according to my last suggestion? 

Then it would be an easy next step -- use this, extended code instead of the one from above:

{% assign featured_url   = featured.url %}
{% assign featured_image = featured.featured_image %}

{% if collection %}
  {% for var in featured.variants %}
    {% assign var_title_lc = var.title | handle %}
    {% if var_title_lc contains collection.handle %}
      {% assign featured_url = var.url %}
      {% if var.image %}
         {% assign featured_image = var.image %}
      {% endif %}
      {% break %}
    {% endif %}
  {% endfor %}
{% endif %}
<a href="{{ featured_url | within: collection }}" class="grid-link{% if section.settings.center_grid_link %} text-center{% endif %}">

And then you will have to replace all ocurences of featured.featured_image  below this code with featured_image.

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
Highlighted
New Member
10 0 0

Muahahahah THANK YOU! @tim

0 Likes
Highlighted
Shopify Expert
2684 67 846

Came out pretty cool -- congrats!

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
I am away till Feb-15.
0 Likes