All things Shopify and commerce
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 !
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>
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.
Hi @Easify-Mark ,
Thanks for the answer.
This would cause duplicate products to be displayed when shopping for all. no?
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024