Jake Fox's profile

Petits Vilains

Services Provided: Small amount of design, digital marketing, UI/UX design and implementation, custom development on top of purchased theme.
Size filter developed using product tags and custom Liquid code. Removed the need for third party app providing the same functionality which stopped functioning.

Code
Products tagged with 'size-' prefix to filter.
If filtered by size tag, only available products will show.

Liquid Syntax - Shopify
https://petitsvilains.com​​​​​​​
{% comment %} Size Filter, if not in stock, does not show - Start - Fox {% endcomment %}
{% if current_tags != blank %}
{% for tag in collection.all_tags %}
{% if current_tags contains tag %}
{% capture current_size_raw %}{{ tag | remove: 'size-'}}{% endcapture %}
{% capture current_size %}{{ current_size_raw | upcase }}{% endcapture %}
{% endif %}
{% endfor %}

{% for product in collection.products %}
{% if product.tags contains 'coming_soon' %}
{% include 'product-grid-item' %}
{% assign has_products = true %}
{% else %}
{% for variant in product.variants %}
{% if variant.available %}
{% if variant.title contains current_size %}
{% include 'product-grid-item' %}
{% assign has_products = true %}
{% endif %}
{% endif %}
{% endfor %}
{% endif %}
{% else %}
{% if collection.handle == 'all'%}
{% unless emptyState %}
{{ 'theme-onboarding.css' | asset_url | stylesheet_tag }}
{% assign emptyState = true %}
{% endunless %}
{% include 'onboarding-empty-collection' %}
{% else %}
<div class="grid__item">
<p>{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{% endfor %}

{% comment %} Size Filter, if not in stock, does not show - End - Fox {% endcomment %}
Petits Vilains
Published:

Petits Vilains

Published:

Creative Fields