Skip to content

Instantly share code, notes, and snippets.

@odessy
Last active January 8, 2025 17:17
Show Gist options
  • Save odessy/c206b6169fd7d2c846aa31ab11649c05 to your computer and use it in GitHub Desktop.
Save odessy/c206b6169fd7d2c846aa31ab11649c05 to your computer and use it in GitHub Desktop.
Search page show products color variants
{% liquid
assign color_name = 'color'
assign color_option = item.options_by_name[color_name]
assign color_position = color_option.position
assign color_position_key = 'option' | append: color_position
%}
{% if color_option.values.size > 0 %}
{% for color_option in color_option.values %}
{% assign variants = item.variants | where: color_position_key, color_option %}
{% assign variant = variants | first %}
<div class="search__item__generic">
<div class="search__item__generic">
{% if variant.featured_media.preview_image or item.image %}
<div class="search__item__generic__image">
<a href="{{ variant.url }}">
{% assign image_obj = variant.featured_media.preview_image | default: item.image %}
<img
src="{{ image_obj.src | img_url: 'small' }}"
alt="{{ item.title | escape }}" />
</a>
</div>
{% endif %}
<div class="search__item__generic__text">
<p class="product__inline__title">
<!-- Esempio: "STIVALE RING - BLACK" -->
<a href="{{ variant.url }}">
{{ item.title }} - {{ color_option }}
</a>
</p>
</div>
</div>
</div>
{% unless forloop.last %}<hr>{% endunless %}
{% endfor %}
{% else %}
{%- comment -%}
The code that shows the normal products with color options
{%- endcomment -%}
{% endif %}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment