Skip to main content
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 %}

ParameterTypeDefault
slide_fromString ("left"/"right")"right"
button_classesString"button button--dark px-6 py-3"
show_countsBooleanfalse
show_clear_filtersPresence-basedshown when omitted
clear_link_classesString"text-sm font-medium text-gray-600 hover:text-gray-900 underline underline-offset-2"
clear_link_textString"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 %}

ParameterTypeDefault
productAdditions product droprequired
exclude_main_product_name_from_variantsBooleantrue
hide_frequency_labelBooleanfalse
use_variant_pillsBooleanfalse
show_info_iconBooleanfalse
info_open_eventString"ssc:product-info:open"
show_collection_titleBooleanfalse
active_card_classString"ring-2 ring-emerald-500"
add_button_classesString"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_classesString"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_classesString"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_classesString"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.
ParameterTypeDefault
show_countsBooleanfalse
{% 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.
ParameterTypeDefault
button_textString"Menu"
button_classesString"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_fromString ("left"/"right")"right"
sidebar_titleStringbutton_text
sidebar_idStringgenerated
show_clear_filtersPresence-basedshown when omitted