How can I display gender-specific product images based on collection?

LanaV · December 12, 2022, 12:42pm

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

Our apparel store sells mostly unisex items, but we want to add additional feature for our customers to shop by gender too. What we would like to do is when customers selects men’s collection we want the pictures they see to have only men on it (and filter out women’s images). And likewise to show only pictures of women (and not show images of male models) when customers select women’s collection.

We have the same system of images in all of our products:

feature image is a product image (without a model), this image should be visible to all customers
female model front
female model back
female model side
male model front
male model back
male model side
product image (without a model)
product image (without a model)

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

IF collection title contains “women”

THEN show images 1, 2, 3, 4, 8, 9

IF collection title contains “men”

THEN show images 1, 5, 6, 7, 8, 9

The problem is, I am not exactly sure what code and where to write in our theme (Prestige 1.0).

Greatly appreciate help.

Link to one of our products for an example: https://eay4detatiarlznr-2777808941.shopifypreview.com/collections/hoodies/products/fun-patch-hoodie-black

malyi · December 12, 2022, 3:16pm

You need to add alt text to each image with gender word, like: “woman model front”

and then add if statement inside forloop there where images are shown. Something like:

{% liquid
  assign gender = 'men'
  if collection.handle contains 'women'
   assign gender = 'women'
  endif
%}

{% for image in product.images %}
  {% if image.alt contains gender %}
   // show image
  {% endif %}
{% endfor %}

LanaV · December 14, 2022, 10:58am

Thank you for suggestion. Could you also help with suggestions where exactly to put this code? In snippets I have product-form.liquid and product-item.liquid, and there is a lot of information there, don’t want to misplace this code))

malyi · December 14, 2022, 11:01am

can you share product-item.liquid file code?

LanaV · December 14, 2022, 11:21am

Here is the code:

{%- comment -%} We are using LazySizes to efficiently choose the most appropriate image in the set. However, because internally LazySizes uses srcset, we need to make sure that the image sizes we offer is not larger than the max size uploaded by the merchants. {%- endcomment -%}

{%- if settings.product_image_size == ‘natural’ or use_horizontal -%}
{%- assign use_natural_size = true -%}
{%- else -%}
{%- assign use_natural_size = false -%}
{%- endif -%}

{%- if settings.product_show_secondary_image and product.images[1] != blank and use_horizontal != true -%}
{%- assign has_alternate_image = true -%}
{%- else -%}
{%- assign has_alternate_image = false -%}
{%- endif -%}

{%- if use_horizontal -%} {%- assign max_width = 125 -%} {%- else -%} {%- assign max_width = product.featured_image.width -%} {%- endif -%} {%- comment -%}Added by Heartcoding from Sale & Discount Manager{%- endcomment -%} {%- if product.available and product.compare_at_price_min > product.price_min -%} {%- for variant in product.variants -%} {%- if variant.compare_at_price > variant.price -%} {%- assign discount = variant.compare_at_price | minus:variant.price | times:100.0 | divided_by:variant.compare_at_price | round %}

{{ discount }}%

{%- break -%} {%- endif -%} {%- endfor -%} {%- endif -%}

{%- comment -%} IMPLEMENTATION NOTE: The alternate image (not visible by default) should be the first in the DOM, as the spinner (Image__Loader element) is displayed based on the immediately previously shown image. {%- endcomment -%}

{%- if has_alternate_image -%}
{%- include ‘image-size’, sizes: ‘200,300,400,600,800,900,1000,1200’, image: product.images[1] -%}
{%- assign image_url = product.images[1] | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

{%- endif -%}

{%- include ‘image-size’, sizes: ‘200,400,600,700,800,900,1000,1200’, image: product.featured_image -%}
{%- assign image_url = product.featured_image | img_url: ‘1x1’ | replace: ‘1x1.', '{width}x.’ -%}

${{ product.featured_image.alt | escape }}$

${{ product.featured_image.alt | escape }}$

{%- if show_labels -%}
{%- capture product_labels -%}
{%- for tag in product.tags -%}
{%- if tag contains ‘__label’ -%}
{{ tag | split: ‘__label:’ | last }}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if product.available -%}
{%- if product.compare_at_price > product.price -%}
{%- comment -%}
{{ ‘product.labels.on_sale’ | t }}
{%- endcomment -%}
{%- endif -%}
{%- else -%}
{{ ‘product.labels.sold_out’ | t }}
{%- endif -%}
{%- endcapture -%}

{%- if product_labels != blank -%}

{%- endif -%} {%- endif -%}

{%- if show_product_info -%}

{%- if show_vendor -%}

{%- endif -%}

{%- if show_color_swatch -%}
{%- assign color_swatch_list = ‘’ -%}

{%- capture color_swatch -%}
{%- assign color_label = ‘color,colour,couleur,colore,farbe,색,色,färg,farve’ | split: ‘,’ -%}
{%- capture color_name -%}{{ section.id }}-{{ product.id }}-{% increment color_name %}{%- endcapture -%}

{%- for option in product.options_with_values -%}
{%- assign downcased_option = option.name | downcase -%}

{%- if color_label contains downcased_option -%}
{%- assign variant_option = ‘option’ | append: forloop.index -%}

{%- for value in option.values -%}
{%- assign downcased_value = value | downcase -%}
{%- capture color_id -%}{{ section.id }}-{{ product.id }}-{% increment color_index %}{%- endcapture -%}

{%- for variant in product.variants -%}
{%- if variant[variant_option] == value -%}
{%- assign variant_for_value = variant -%}
{%- break -%}
{%- endif -%}
{%- endfor -%}

{%- if variant_for_value.image -%} {%- include 'image-size', sizes: '200,400,600,700,800,900,1000,1200', image: variant_for_value.image -%} {%- assign variant_image_url = variant_for_value.image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%} {%- endif -%}

{%- assign color_swatch_name = value | handle | append: ‘.png’ -%}
{%- assign color_swatch_image = images[color_swatch_name] -%}

{%- endfor -%} {%- endif -%} {%- endfor -%} {%- endcapture -%}

{%- if color_swatch != blank -%}
{%- capture color_swatch_list -%}

{%- endcapture -%} {%- endif -%} {%- endif -%}

{%- if show_price_on_hover == nil -%}
{%- assign show_price_on_hover = settings.product_show_price_on_hover -%}
{%- endif -%}

{%- if show_price_on_hover and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}

{%- if product.template_suffix != ‘coming-soon’ -%}

{%- if product.compare_at_price > product.price -%} {{ product.price | money_without_trailing_zeros }} {{ product.compare_at_price | money_without_trailing_zeros }} {%- elsif product.price_varies -%} {%- capture formatted_min_price -%}{{ product.price_min | money_without_trailing_zeros }}{%- endcapture -%} {%- capture formatted_max_price -%}{{ product.price_max | money_without_trailing_zeros }}{%- endcapture -%} {{ 'collection.product.from_price_html' | t: min_price: formatted_min_price, max_price: formatted_max_price }} {%- else -%} {{ product.price | money_without_trailing_zeros }} {%- endif -%}

{%- endif -%}

{%- if show_price_on_hover == false and color_swatch_list != blank -%}
{{- color_swatch_list -}}
{%- endif -%}

{%- endif -%}

{%- if use_horizontal -%}
{{ ‘collection.product.view_product’ | t }}
{%- endif -%}

LanaV · December 14, 2022, 11:28am

Here is the code you asked for: