Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Shopify Simple Theme - product-grid-item.liquid modified to support alternative images
{% unless grid_item_width %}
{% assign grid_item_width = 'medium-up--one-third small--one-half' %}
{% endunless %}
{% unless current_collection == blank %}
{% assign current_collection = collection %}
{% endunless %}
{% assign on_sale = false %}
{% assign sale_text = 'products.product.sale' | t %}
{% if product.compare_at_price > product.price %}
{% assign on_sale = true %}
{% endif %}
{% assign sold_out = true %}
{% assign sold_out_text = 'products.product.sold_out' | t %}
{% if product.available %}
{% assign sold_out = false %}
{% endif %}
{%- comment -%}
Different product images based on viewed collection
Tutorial: https://sections.design/blogs/shopify/different-product-images-on-collections
{%- endcomment -%}
{%- assign featured_image = product.featured_image -%}
{%- assign product_url = product.url -%}
{%- if custom_option_name != blank and custom_option_value != blank -%}
{%- assign custom_option_name = custom_option_name | downcase | strip -%}
{%- assign custom_option_value = custom_option_value | downcase | strip -%}
{%- for product_option in product.options_with_values -%}
{%- assign option_name = product_option.name | handle -%}
{%- if option_name == custom_option_name -%}
{%- assign option_values = product_option.values | join: ',' | downcase | split: ',' -%}
{%- for option_value in option_values -%}
{%- if option_value == custom_option_value -%}
{%- assign custom_variant = product.variants[forloop.index0] -%}
{%- if custom_variant.featured_image -%}
{%- assign featured_image = custom_variant.featured_image -%}
{%- assign product_url = custom_variant.url -%}
{%- endif -%}
{% break %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%}
{%- endif -%}
{%- assign img_url = featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
<div class="product grid__item {{ grid_item_width }} slide-up-animation animated" role="listitem">
{% unless featured_image == blank %}
<div class="supports-js" style="max-width: {{ 600 | times: featured_image.aspect_ratio | round }}px; margin: 0 auto;">
<a href="{{ product_url | within: collection }}" class="product__image-wrapper" style="padding-top:{{ 1 | divided_by: featured_image.aspect_ratio | times: 100}}%;" title="{{ product.title | escape }}">
<img class="product__image lazyload"
src="{{ featured_image | img_url: '150x150' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ featured_image.aspect_ratio }}"
data-sizes="auto"
alt="{{ featured_image.alt | escape }}"
style="max-width: {{ 600 | times: featured_image.aspect_ratio | round }}px; max-height: 600px;">
</a>
</div>
{% else %}
<a href="{{ product_url | within: collection }}" class=" supports-js product__image-wrapper" title="{{ product.title | escape }}">
<img src="{{ featured_image.src | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</a>
{% endunless %}
<noscript>
<a href="{{ product_url | within: collection }}" class="product__image-wrapper" title="{{ product.title | escape }}">
<img src="{{ featured_image.src | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</a>
</noscript>
<div class="product__title text-center">
<a href="{{ product_url | within: collection }}">{{ product.title }}</a>
</div>
{% if section.settings.vendor_show %}
<div class="product__vendor text-center">
{{ product.vendor }}
</div>
{% endif %}
<div class="product__prices text-center">
{% if product.compare_at_price > product.price %}
<span class="product__price--on-sale">
{% if product.price_varies %}
{% assign sale_price = product.price | money %}
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
{% else %}
<strong class="visually-hidden">{{ 'products.product.sale_price' | t }}</strong>
{{ product.price | money }}
{% endif %}
</span>
{% else %}
<span class="product__price">
{% if product.price_varies %}
{% assign price = product.price | money %}
{{ 'products.product.from_text_html' | t: price: price }}
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{{ product.price | money }}
{% endif %}
</span>
{% endif %}
{% if product.compare_at_price > product.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s>{{ product.compare_at_price | money }}</s>
{% endif %}
{% if on_sale %}
<span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
{% endif %}
{% comment %}
{% if sold_out %}
<span class="badge badge--sold-out"><span>{{ 'products.product.sold_out' | t }}</span></span>
{% endif %}
{% endcomment %}
{% if sold_out %}
— <strong class="sold-out-text">{{ 'products.product.sold_out' | t }}</strong>
{% endif %}
</div>
</div>
@gcgme

This comment has been minimized.

Copy link

commented Apr 3, 2019

Hello,

Thanks a lot for this! It helped me a lot.
I made some adjustments to suit my case. I found that some times the script as problems with colors that have more than one word eg Navy Blue.
Also, I replaced the is equals with contains and created a simpler loop when I expect to have color always as 1st option.

{%- assign product_url = product.url -%}
{%- if custom_option_name != blank and custom_option_value != blank -%}
{%- assign custom_option_name = custom_option_name | downcase | strip -%}
{%- assign custom_option_value = custom_option_value | downcase | strip -%}
{% for variant in product.variants %}
{% assign variant_color = variant.option1 | downcase %}
{% if variant_color contains custom_option_value %}
{%- assign custom_variant = product.variants[forloop.index0] -%}
{%- assign featured_image = custom_variant.image -%}
{%- assign product_url = custom_variant.url -%}
{% break %}
{%- endif -%}
{%- endfor -%}
{%- endif -%}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.