catalog.liquid

Supported Liquid tags for the Customer Portal product catalog default template: catalog.liquid.

catalog.liquid tags are grouped by default vs optional usage.

• Default components are already present in the shipped catalog.liquid template.
• Optional components can be added or used to replace parts of the default layout.

Common tags are documented on Common tags: {% legacy_navbar %}.

Default components

{% additions_filter_aggregator %}

{% additions_filter_aggregator %}

<div class="filter-aggregator-outlet" data-controller="ssc--filter-aggregator">
  <form id="filter-aggregator-form" style="display: none;">
    <input type="hidden" name="query" value="oat" />
    <input type="hidden" name="collection_id" value="2" />
  </form>
</div>

{% additions_search %}

{% additions_search %}

<div data-controller="ssc--addition-search">
  <form id="additions-search-form">
    <input id="additions-search-input" type="search" placeholder="Search products" />
    <input type="hidden" name="collection_id" value="2" />
  </form>
</div>

{% additions_shopify_filters %}

Parameter	Type	Default
slide_from	String ("left"/"right")	"right"
button_classes	String	"button button--dark px-6 py-3"
show_counts	Boolean	false
show_clear_filters	Presence-based	shown when omitted
clear_link_classes	String	"text-sm font-medium text-gray-600 hover:text-gray-900 underline underline-offset-2"
clear_link_text	String	"Clear all"

{% additions_shopify_filters slide_from: "left" show_counts: true %}

<div class="flex items-center gap-3">
  <button type="button" class="button">Filter</button>
  <a href="/self-service/additions/new" class="text-sm underline">Clear all</a>
</div>

{% additions_turbo_frame %} ... {% endadditions_turbo_frame %}

Block tag for catalog results frame.

{% additions_turbo_frame %}
  ...
{% endadditions_turbo_frame %}

<turbo-frame id="search_results" src="/self-service/additions/catalog_frame?...">
  <div class="grid grid-cols-2 gap-4">
    <div>...product card...</div>
    <div>...product card...</div>
  </div>
</turbo-frame>

{% additions_collection_filter_pills %}

{% additions_collection_filter_pills %}

<div class="mb-6">
  <div class="flex flex-wrap gap-2 items-center">
    <a class="pill pill--active" href="?collection_id=1">All</a>
    <a class="pill" href="?collection_id=2">Refills</a>
    <a class="pill" href="?collection_id=3">Accessories</a>
  </div>
</div>

{% additions_form_wrapper %} ... {% endadditions_form_wrapper %}

Block tag that wraps selected products in confirmation form.

{% additions_form_wrapper %}
  ...
{% endadditions_form_wrapper %}

<form action="/self-service/additions/confirmation" method="get" data-controller="ssc--quantity-badge ssc--addition-status">
  <input type="hidden" name="ordered_products[][product_id]" value="44" />
  <input type="hidden" name="ordered_products[][quantity]" value="2" />
  <div>...product cards...</div>
</form>

{% additions_product_card %}

Parameter	Type	Default
product	Additions product drop	required
exclude_main_product_name_from_variants	Boolean	true
hide_frequency_label	Boolean	false
use_variant_pills	Boolean	false
show_info_icon	Boolean	false
info_open_event	String	"ssc:product-info:open"
show_collection_title	Boolean	false
active_card_class	String	"ring-2 ring-emerald-500"
add_button_classes	String	"text-xs font-medium text-gray-700 bg-white border border-gray-300 rounded-xl flex items-center justify-center gap-1 px-3 h-10 hover:bg-gray-100 hover:text-gray-900"
increment_button_classes	String	"bg-white border border-gray-300 rounded-xl p-0 w-10 h-10 min-w-0 flex items-center justify-center hover:bg-gray-100"
decrement_button_classes	String	"bg-white border border-gray-300 rounded-xl p-0 w-10 h-10 min-w-0 flex items-center justify-center hover:bg-gray-100"
quantity_input_classes	String	"form-input w-12 h-10 text-center text-sm shadow-none"

{% additions_product_card product: product use_variant_pills: true show_info_icon: true %}

<div id="ordered_product_123" class="rounded-xl bg-white overflow-hidden">
  <img src="https://cdn.example.com/oat-drink.jpg" alt="Oat Drink" />
  <div class="p-4">
    <h3 class="font-bold">Oat Drink</h3>
    <p class="text-xs text-gray-500">Every 2 weeks</p>
    <div class="flex justify-between items-center mt-3">
      <span>EUR 7.50</span>
      <button type="button">+</button>
    </div>
  </div>
</div>

{% additions_empty_state %}

{% additions_empty_state %}

<div id="additions-empty-state" class="text-center py-16 px-8">
  <p class="text-lg text-gray-600">No products found</p>
  <p class="text-sm text-gray-500">Try another search term or filter.</p>
</div>

{% additions_action_bar %}

Sticky bottom action bar for confirming product changes.

{% additions_action_bar %}

<div id="additions-action-bar" class="fixed bottom-0 left-0 right-0 bg-white py-4 border-y">
  <div class="max-w-6xl mx-auto flex items-center gap-4">
    <span id="addition-status-message">2 items added</span>
    <input id="additions-review-button" type="submit" value="Review changes" />
  </div>
</div>

Optional components

{% additions_shopify_filter_list %}

Used mainly when composing a custom sidebar or filter layout.

Parameter	Type	Default
show_counts	Boolean	false

{% additions_shopify_filter_list show_counts: true %}

<turbo-frame id="shopify_filter_list" src="/self-service/additions/filter_list?...">
  <div class="filter-category">
    <h4>Diet</h4>
    <label><input type="checkbox" /> Vegan (12)</label>
    <label><input type="checkbox" /> Gluten-free (8)</label>
  </div>
</turbo-frame>

{% additions_sidebar_pane %} ... {% endadditions_sidebar_pane %}

Block tag for custom side panel layouts.

Parameter	Type	Default
button_text	String	"Menu"
button_classes	String	"px-6 py-3 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-xl hover:bg-gray-100 hover:text-gray-900"
slide_from	String ("left"/"right")	"right"
sidebar_title	String	button_text
sidebar_id	String	generated
show_clear_filters	Presence-based	shown when omitted