What's your biggest current challenge? Have your say in Community Polls along the right column.

Display gender specific photos and sizes, shoe brand

Display gender specific photos and sizes, shoe brand

ttlll
Visitor
3 0 0

Hi,

I own a store (to be launched soon) for a footwear brand.

The shoes are the same for men and women, meaning a white shoe size 38 for a woman, is the same as for man.

I would like to display specific photos for women of the products when viewed from women collection, and do the same for men. More over, I would like to mask small sizes for men, and high sizes for women.

I read some tips about using alt images but this is not scalable. I do not want to duplicate products as this will be an issue with fulfillment (2 products with same SKU will not get inventory synchronised). 

I am pretty sure it is feasible as a lot of shopify stores who have the same products for men and women and are accomplishing this. 

As an example of store : 

Women product : https://ourcollegium.com/collections/womens-destoryer/products/womens-pillar-destroyer-low-platinum-...

Mens product : https://ourcollegium.com/collections/destroyer/products/the-pillar-destroyer-low-platinum-suede

I am pretty sure these share the same SKU and EAN. 

 

I am using DISTINCTIVE theme. I have already thought about the siblings feature which I am using for colors but can't figure out how to display specific pictures and size variants.

Thanks ! 

Replies 3 (3)

ttlll
Visitor
3 0 0

Maybe there is a way using product URL ? if the URL contains "women" it means we should display images with no alt + image with alt containing "women" and if the url contains nothing, then display images without alt only.

I have located this part of code where it seems to display the product images : 

<div class="thb-product-detail product main-product-page" data-handle="{{ product.handle }}">
  <div class="row full-width-row-full">
		<div class="small-12 columns">
			<div class="product-grid-container">
		    <div class="product-gallery-container" id="MediaGallery-{{ section.id }}">
          <div class="product-image-container">
            <product-slider id="Product-Slider" class="product-images static-dots" data-captions="{{ display_captions }}" data-hide-variants="{{ hide_variants }}">
              {%- if featured_media != null -%}
                {%- liquid
                  assign image_index = image_index | plus: 1
                  assign first_image = featured_media.preview_image
                -%}
                {%- render 'product-media', product: product, section: section, forloop: false, media: featured_media, sizes: sizes, variant_images: variant_images, media_aspect_ratio: media_aspect_ratio, hide_variants: hide_variants, display_captions: display_captions, priority: 'high' -%}
              {%- endif -%}
              {%- for media in product.media -%}
                {%- unless media.id == featured_media.id -%}
                  {%- liquid
                    if media.media_type == 'image'
                      assign image_index = image_index | default: 0 | plus: 1
                    endif
                    assign priority = false
                    if image_index == 0
                      assign first_image = media.preview_image
                      assign priority = 'high'
                    endif
                  -%}
                  {%- render 'product-media', product: product, section: section, forloop: forloop, media: media, sizes: sizes, variant_images: variant_images, media_aspect_ratio: media_aspect_ratio, hide_variants: hide_variants, display_captions: display_captions, priority: priority -%}
                {%- endunless -%}
              {%- endfor -%}
              {%- if product.media.size > 1 -%}
              {%- render 'slideshow-arrows' -%}
              {%- endif -%}
            </product-slider>
            {%- if product.media.size > 1 -%}
              {%- liquid
                assign thumbnail_count = product.media.size | at_most: 4
                assign width = thumbnail_count | times: 63 | plus: 19
              -%}
            <div id="Product-Thumbnails" class="product-thumbnail-container" data-hide-variants="{{ hide_variants }}" style="--thumbnail-width: {{ width | append: 'px'}}">
              <button class="product-thumbnail-container--button" aria-label="Toggle"></button>
              <scroll-shadow>
                <div class="product-thumbnail-container--inner">
                  {%- if featured_media != null -%}
                    {%- render 'product-thumbnail', product: product, media: featured_media, forloop: false, variant_images: variant_images, media_aspect_ratio: media_aspect_ratio, hide_variants: hide_variants -%}
                  {%- endif -%}
                  {%- for media in product.media -%}
                    {%- unless media.id == featured_media.id -%}
                    {%- render 'product-thumbnail', product: product, media: media, forloop: forloop, variant_images: variant_images, media_aspect_ratio: media_aspect_ratio, hide_variants: hide_variants -%}
                    {%- endunless -%}
                  {%- endfor -%}
                </div>
              </scroll-shadow>
            </div>

 

and this in product-media.liquid where it seems to loop over product media :

<div
  id="Slide-{{ section.id }}-{{ media.id }}"
  class="product-images__slide product-images__slide-{{ media.media_type }}{% if is_active %} is-active{% endif %}{% if variant_images contains media.src %} product-images__slide-item--variant{% endif %}"
  data-media-id="{{ section.id }}-{{ media.id }}"
  data-active="{{ is_active }}"
  {% if image_set %}
    data-set-name="{{ image_set_group }}"
    data-group="{{ image_set_full }}"
  {% endif %}
  {% if quick_view %}
  style="--quick-view-image-height: 380px"
  {% endif %}
>
  {%- case media.media_type -%}
    {% when 'image' %}
      {%- liquid
        assign ratio = 1
        if media_aspect_ratio == 'adapt'
          assign ratio = media.preview_image.aspect_ratio
        elsif media_aspect_ratio == 'portrait'
          assign ratio = 1 | divided_by: 1.25
        elsif media_aspect_ratio == 'landscape'
          assign ratio = 1 | divided_by: 0.75
        endif

        assign alt = media.preview_image.alt | split: '#' | first

        assign padding_right = ratio | times: 100
      -%}
      <div class="product-single__media product-single__media-image aspect-ratio aspect-ratio--{{ media_aspect_ratio }}" id="Media-Thumbnails-{{ section.id }}-{{ media.id }}" style="--aspect-ratio: {{ ratio }}; --padding-bottom: {{ 1 | divided_by: ratio | times: 100 }}%; --padding-right: {{ ratio | times: 100 }}%">
        {%- if section.settings.lightbox != blank -%}
        <a
          href="{{ media.src | image_url }}"
          class="product-single__media-zoom"
          data-msrc="{{- media.src | image_url: width: 20 -}}"
          data-h="{{ media.height }}"
          data-w="{{ media.width }}"
          target="_blank"
          tabindex="-1"
          {% if alt != blank and display_captions %}
          title="{{ alt | escape }}"
          {% endif %}
          data-index="{{ image_index }}"
          aria-label="Zoom"
        ></a>
        {%- endif -%}
        {%- render 'responsive-image', image: media.preview_image, sizes: sizes, priority: priority -%}
        {%- if alt != blank and display_captions -%}
        <span class="figcaption">{{ alt }}</span>
        {%- endif -%}
      </div>

Easify-Mark
Excursionist
144 2 2

Hi @ttlll ,

You might want to consider using the Easify Inventory Sync app to sync the inventories of similar products featured in different collections (e.g., Men & Women). The app can automatically create inventory groups for products with the same SKUs, or you can manually create groups for products with different SKUs.

Additionally, the app offers bulk import features to simplify the creation of inventory groups.

If you have any questions or need help while using the app, feel free to reach out to the Easify Team through the in-app live chat for assistance.

Easify Product Options: Any product options app can help you create custom options, but Easify turns those options into sales and conversions!
Easify Inventory Sync: Automate inventory syncing for Bundles, Duplicates, and Raw Materials. Say goodbye to manual tracking headaches.
Easify Product Attachments: Enrich your store with downloadable content. Easily add PDFs and other files to product or any page.
>>> Try Apps for Free | 24/7 Live Chat Support
ttlll
Visitor
3 0 0

Hi @Easify-Mark ,

Thanks for the answer.

This would cause duplicate products to be displayed when shopping for all. no?