Liquid for JetBrains IDEs

{% comment %}
  Shopify's new theme architecture, announced at DotDev 2026.
  Page structure moves out of JSON templates and back into Liquid.
{% endcomment %}
{% doc %}
  Renders a product grid that JavaScript can refresh in place.

  @param {collection} collection - The collection to render
  @param {string} [class] - Optional wrapper class

  @example
  {% partial 'product-grid' %}{% endpartial %}
{% enddoc %}

{% partial 'product-grid' %}
  {% for product in collection.products %}
    {% block 'product-card', block.settings.product: product %}
      
{{ product.title | escape }}
    {% endblock %}
  {% endfor %}
{% endpartial %}

{% content_for 'blocks' %}

{% comment %}
  Filters chain left to right. The name after a pipe is a filter,
  whatever else it spells — `default` here is a filter, not a keyword.
{% endcomment %}
{% assign title = product.title | strip | truncate: 60 %}

{{ product.price | money_with_currency }}
{{ product.featured_image | image_url: width: 800 | image_tag }}
{{ product.tags | join: ", " | upcase }}
{{ shop.name | default: "Our store" }}

{% if product.available and product.price < 5000 %}
  {{ 'products.on_sale' | t }}
{% endif %}

{% for variant in product.variants limit: 3 %}
  {% unless variant.available %}
    {{ variant.title }}
  {% else %}
    {{ forloop.index }}. {{ variant.title }} — {{ variant.price | money }}
  {% endunless %}
{% else %}
  
Nothing in stock yet.
{% endfor %}

{% case product.type %}
  {% when 'Shirt' %}
    {% render 'size-guide', kind: 'tops' %}
  {% when 'Mug', 'Bottle' %}
    {% render 'care-instructions' %}
  {% else %}
    {% render 'generic-details' %}
{% endcase %}

{% comment %} sections/featured-collection.liquid {% endcomment %}
{%- paginate collection.products by 12 -%}
  {% for product in collection.products %}
    {% render 'product-card', product: product %}
  {% endfor %}

  {{ paginate | default_pagination }}
{%- endpaginate -%}

{% style %}
  .featured { gap: {{ section.settings.gap }}px; }
{% endstyle %}

{% schema %}
  {
    "name": "Featured collection",
    "settings": [
      { "type": "range", "id": "gap", "label": "Gap", "default": 16 }
    ]
  }
{% endschema %}