How can I set product images to change based on collection?

[kyle-wickersham]

Hi,

So I have looked at various threads which seemed to be relevant, but have not found a reply which does what I am looking to achieve.

We have apparel on our store.  Some of our items are unisex.  However, some items are for men and some for women.  When a customer clicks on the men's collection and sees a unisex shirt, we want the picture they see to have a guy on it. And likewise a picture of a woman for women's collection.

The way we would like to achieve this is to add code to the effect of:

IF collection title contains "men's"

THEN show 2nd product image

ELSE show featured image

The problem is, I am not exactly sure how and/or where to write this sudo code into real code in our theme (Empire from Pixel Union).

Greatly appreciate help.

Our store link for an example is https://store.ihopkc.org/collections/mens-apparel

[kjdointhings]

This is definitely possible. From looking at your source code I'm going to assume you have a snippet called product-grid-item or something similar. This is the snippet that holds the code for the product tiles on your collection pages. Inside that snippet, look for the figure element with a class of productitem--image. Inside this element you'll want to add some logic to determine what product image to show.

Two simple options would be to make use of the image alt text or the image file name to specify whether the image is a male or female. Then in your liquid you can check if the collection handle contains 'womens' or 'mens' (in that order because 'womens' also contains 'mens'). If you're in a mens or womens collection, you can then loop over the product images and check the file name or alt text for "male" or "female" and use that image. If the collection is not mens or womens, show the product featured image as it does now.

Alternatively, to optimize this, you could update all unisex products so that the male image is first, and the female image is the 2nd image. Then instead of adding male or female to the alt text or file name, you could just output product.featured_image for the male photo and product.images[1] (the 2nd product photo) for female. 

Happy to write out a more specific example if you can provide your code.

[kyle-wickersham]

Hi,

Thank you for your reply.

We definitely do not want to do it using image alt text, as we have apps which automatically change the alt text for SEO.

We do want to set it up so that the first (featured) image is the female image and the 2nd image on every product is the male image.

Then, we want code to match which states:

IF collection title contains "men"
THEN show 2nd product image
ELSE show 1st product image

Here is the code you asked for:

Click to expand...

{% comment %}
@Anonymous product {Object}
Required to show product information
{% endcomment %}

{% assign product_grid_show_second_image = settings.product_grid_show_second_image %}
{% assign emphasize_price = settings.product_grid_emphasize_price %}
{% assign enable_quick_shop = settings.product_grid_quick_shop %}
{% assign enable_quick_buy = settings.product_grid_quick_buy %}
{% assign money_format = shop.money_format | strip_html %}
{% assign show_modal = enable_quick_shop %}

{% if product %}
{% assign compare_at_price = product.compare_at_price %}
{% assign compare_at_price_varies = product.compare_at_price_varies %}
{% assign price = product.price %}
{% assign price_varies = product.price_varies %}
{% assign product_available = product.available %}
{% assign product_title = product.title %}
{% assign product_vendor = product.vendor %}
{% assign product_link = product.url | within: collection %}
{% assign product_description = product.description | strip_html %}
{% assign product_description_size = product.description | strip_html | size %}
{% if recently_viewed == true %}
{%- capture recently_viewed_header -%}
<div class="product-recently-viewed-card-time" data-product-handle="{{product.handle}}">
<button
class="product-recently-viewed-card-remove"
aria-label="close"
data-remove-recently-viewed
>
{% include 'icon-remove' %}
</button>
</div>
{%- endcapture -%}
{% endif %}
{% else %}
{% assign onboarding = true %}
{% assign compare_at_price = 1999 %}
{% assign compare_at_price_varies = false %}
{% assign price = 1999 %}
{% assign price_varies = false %}
{% assign product_available = true %}
{% assign product_title = 'onboarding.product.title' | t %}
{% assign product_vendor = 'onboarding.product.vendor' | t %}
{% assign product_link = '#' %}
{% endif %}

{% assign on_sale = false %}
{% if compare_at_price > price %}
{% assign on_sale = true %}
{% endif %}

{% assign has_variants = false %}
{% unless product.has_only_default_variant %}
{% assign has_variants = true %}
{% endunless %}

{%
include 'consistent-savings',
variants: product.variants,
on_sale: on_sale
%}

{%- capture classes -%}
productgrid--item
imagestyle--{{ settings.product_grid_image_style }}
{% unless product.featured_image %}imagestyle--no-image{% endunless %}
{% if on_sale %}productitem--sale{% endif %}
{% if emphasize_price %}productitem--emphasis{% endif %}
{% if recently_viewed %}product-recently-viewed-card{% endif %}
{%- endcapture -%}

{% capture settings_string %}
{{ settings.product_social_sharing }}
{{ settings.product_show_vendor }}
{{ settings.product_ratings_reviews }}
{{ settings.product_show_sku }}
{{ 'general.general.quantity' | t }}
{{ 'products.product.add_to_cart' | t }}
{{ 'products.product.sold_out' | t }}
{{ 'products.product.view_details' | t }}
{{ 'products.product.by_vendor_html' | t }}
{{ 'products.product.by_vendor' | t }}
{{ 'products.product.sku_html' | t }}
{% endcapture %}

{% assign settings_sha256 = settings_string | sha256 %}

<li
class="{{ classes | strip_newlines }}"
data-product-item
data-product-quickshop-url="{{ product_link }}"
data-quickshop-settings-sha256="{{ settings_sha256 }}"
data-quickshop-product-sha256="{{ product | json | sha256 }}"
{% if recently_viewed %}
data-recently-viewed-card
{% endif %}
>
<div class="productitem" data-product-item-content>
{{ recently_viewed_header }}

{% capture the_snippet_fave_icon %}{% include 'ssw-widget-faveicon' with product.id %}{% endcapture %}
{% unless the_snippet_fave_icon contains 'Liquid error' %}
{{ the_snippet_fave_icon }}
{% endunless %}

<a class="productitem--image-link" href="{{ product.url | within: collection }}" tabindex="-1">
<figure class="productitem--image" data-product-item-image>
{% if product.featured_image %}
{% if product_grid_show_second_image and product.images.size > 1 %}
{%
include 'rimg',
img: product.images[1].src,
size: '512x',
lazy: true,
class: 'productitem--image-alternate',
canvas: true
%}
{% endif %}
{%
include 'rimg',
img: product.featured_image
size: '512x',
lazy: true,
canvas: true
%}
{% else %}
{% if product %}
{{ 'image' | placeholder_svg_tag: 'placeholder--image' }}
{% else %}
{%- capture index -%}
{%- cycle '1', '2', '3', '4', '5', '6' -%}
{%- endcapture -%}
{{ 'product-' | append: index | placeholder_svg_tag: 'placeholder--image' }}
{% endif %}
{% endif %}

{%
include 'product-badge',
class_root: 'productitem',
product_available: product_available,
on_sale: on_sale,
price: price,
compare_at_price: compare_at_price,
show_saved: consistent_saved
%}
</figure>
</a>

{%- capture product_item_price -%}
{%
include 'product-price',
class_root: 'productitem',
price: price,
price_varies: price_varies,
compare_at_price: compare_at_price,
compare_at_price_varies: compare_at_price_varies,
on_sale: on_sale,
emphasize_price: emphasize_price,
show_original: consistent_saved
%}
{%- endcapture -%}

<div class="productitem--info">
{% if emphasize_price %}
{{ product_item_price }}
{% endif %}

<h2 class="productitem--title">
<a href="{{ product_link }}">
{{ product_title }}
</a>
</h2>

{% capture the_snippet_review_avg %}{% include 'ssw-widget-avg-rate-listing' %}{% endcapture %}
{% unless the_snippet_review_avg contains 'Liquid error' %}
{{ the_snippet_review_avg }}
{% endunless %}

{% if settings.product_show_vendor and product.vendor != blank %}
<span class="productitem--vendor">
{{ product_vendor }}
</span>
{% endif %}

{% unless emphasize_price %}
{{ product_item_price }}
{% endunless %}

{% if settings.product_ratings_reviews %}
<div class="productitem--ratings">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}">
<span class="spr-badge">
<span class="spr-starrating spr-badge-starrating">
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
<i class="spr-icon spr-icon-star-empty"></i>
</span>
</span>
</span>
</div>
{% endif %}

{% if product_description %}
<div class="productitem--description">
<p>{{ product_description | truncate: 150 }}</p>

{% if product_description_size > 150 and product_link %}
<a
href="{{ product_link }}"
class="productitem--link"
>
{{ 'product.buttons.view_details' | t }}
</a>
{% endif %}
</div>
{% endif %}
</div>

{% if enable_quick_shop or enable_quick_buy %}
{% comment %}
Default button appearance and text
{% endcomment %}
{% assign quick_shop_text = 'product.buttons.quick_shop' | t %}
{% assign quick_buy_text = 'product.buttons.add_to_cart' | t %}

{% assign quick_shop_classes = 'productitem--action-trigger button-secondary' %}
{% assign quick_buy_classes = 'productitem--action-trigger productitem--action-atc button-primary' %}

{% if has_variants %}
{% assign quick_buy_text = 'product.buttons.choose_options' | t %}
{% assign show_modal = true %}
{% endif %}

{% unless product_available %}
{% assign quick_buy_text = 'product.buttons.sold_out' | t %}
{% assign quick_buy_classes = quick_buy_classes | append: ' disabled' %}
{% endunless %}

<div class="productitem--actions" data-product-actions>
{% if section.settings.grid_list %}
<div class="productitem--listview-price">
{{ product_item_price }}
</div>

<div class="productitem--listview-badge">
{%
include 'product-badge',
class_root: 'productitem',
product_available: product_available,
on_sale: on_sale,
price: price,
compare_at_price: compare_at_price,
show_saved: consistent_saved
%}
</div>
{% endif %}

{% if enable_quick_shop %}
<div class="productitem--action">
<button
class="{{ quick_shop_classes }}"
data-quickshop-full
type="button"
>
{{ quick_shop_text }}
</button>
</div>
{% endif %}

{% if enable_quick_buy %}
<div class="productitem--action">
<button
class="{{ quick_buy_classes }}"
type="button"
aria-label="{{ quick_buy_text }}"
{% unless has_variants %}
data-quick-buy
{% else %}
data-quickshop-slim
{% endunless %}
data-variant-id="{{ product.selected_or_first_available_variant.id }}"
{% unless product_available %}disabled{% endunless %}
>
<span class="atc-button--text">
{{ quick_buy_text }}
</span>
<span class="atc-button--icon">
{%- include 'icon-spinner' -%}
</span>
</button>
</div>
{% endif %}

</div>
{% endif %}
</div>

{% if enable_quick_buy %}
<script type="application/json" data-quick-buy-settings>
{
"cart_redirection": {{ settings.quickshop_product_cart_redirect | json }},
"money_format": {{ money_format | json }}
}
</script>
{% endif %}
</li>

[kjdointhings · Accepted solution]

I suggest testing this in a duplicate theme first to prevent issues on your live site.

Assuming your product images are now arranged with the male image as the 2nd image...in the snippet you provided, find this code...

{% if product_grid_show_second_image and product.images.size > 1 %}
{%
include 'rimg',
img: product.images[1].src,
size: '512x',
lazy: true,
class: 'productitem--image-alternate',
canvas: true
%}
{% endif %}
{%
include 'rimg',
img: product.featured_image
size: '512x',
lazy: true,
canvas: true
%}

and replace it with this...

{% if collection.url contains '/mens' %}
  {% include 'rimg', img: product.images[1].src, size: '512x', lazy: true, canvas: true %}
{% else %}
  {% if product_grid_show_second_image and product.images.size > 1 %}
    {% include 'rimg', img: product.images[1].src, size: '512x', lazy: true, class: 'productitem--image-alternate', canvas: true %}
  {% endif %}
  {% include 'rimg', img: product.featured_image, size: '512x', lazy: true, canvas: true %}
{% endif %}

[kyle-wickersham]

Thank you.

This seems to be functioning well. All we need to do now in make sure male and female images are in the right place on our unisex apparel and all will be well.

Again I say to you:

Thank you!

This solution is much more straight-forward and easy to manage than what I saw on other threads.

[NicolasNODA]

Hi Kjdoingthings,

I know this is an old thread but I would like to know if it is possible to apply this code only on specific products of the collection.

For example some of my products are unisex and others are male/female only = Can I apply your code only to the Unisex one and if so how ?

Thank you,
Nico

[kjdointhings]

Sure, here's an edited version of what I wrote above. Basically you could tag those products with "unisex" and then check for that tag before applying the logic.

{% if collection.url contains '/mens' and product.tags contains "unisex" %}
  {% include 'rimg', img: product.images[1].src, size: '512x', lazy: true, canvas: true %}
{% else %}
  {% if product_grid_show_second_image and product.images.size > 1 %}
    {% include 'rimg', img: product.images[1].src, size: '512x', lazy: true, class: 'productitem--image-alternate', canvas: true %}
  {% endif %}
  {% include 'rimg', img: product.featured_image, size: '512x', lazy: true, canvas: true %}
{% endif %}

[NicolasNODA]

Thank you !

I'll try it this week and get back to you.

[NicolasNODA]

I don't seem to find the snippet you're referring to.

Here is a link to the website preview in case that helps (we're not live yet) : https://eia7myb6vlpxpwo3-51900088472.shopifypreview.com

Thank you so much for your help !

[MollyHOS]

Hi Kjdoingthings,

I would like to implement this code on my site as well but am having difficulty finding where the original code is as well. My theme is split currently if that makes any difference?

Please let me know!

Kindest,

Molly

[GregOri1]

Good morning

Thanks a lot for the code, I am trying to implement it in the latest version (v14) of dawn theme but if I put it in the CSS box of the collection grid it does not work. Could you tell me where to paste in the code base?

Best

Greg

[KSwan]

I would like to implement this code into my site as well, displaying Women's photos and Men's photos  for my Unisex products based on who clicks. Can you tell me what file this original code is found in and I can replace with your edited  code?

[Chuvee]

Where do we replace the code with this code? Under where? I am confused. 

[off-----market]

Dear Kjdointhings,

In which file should the above code be placed? Thank you in advance!