Advanced conditionals

Templates use a lightweight Mustache-like syntax for conditionals. See Available fields for the full list of what you can reference — feed fields, computed display fields, and the Display options flags covered in Supporting the Design Switches. This page covers the conditional syntax itself.

Syntax Renders when
{{key}} Always — prints the value, HTML-escaped.
{{{key}}} Always — prints the value as raw HTML. Only use this if the field genuinely contains HTML you want rendered as-is; for plain text, {{key}} is the right choice.
{{#key}}...{{/key}} key is truthy.
{{^key}}...{{/key}} key is falsy.
{{#key:value}}...{{/key:value}} key equals value exactly.
{{^key:value}}...{{/key:value}} key does not equal value.

Combining a switch with per-product data

Conditionals can be nested to combine a Display option with per-product feed data. This is exactly how the built-in card templates handle products that can't be added to cart directly — a disable_add_to_cart feed field flips the button for a "View Product" link instead, but only when the Show Add to Cart button switch is on in the first place:

{{#show_add_to_cart}}
  {{^disable_add_to_cart}}<button data-ss-atc data-ss-product-id="{{id}}">{{t_add_to_cart}}</button>{{/disable_add_to_cart}}
  {{#disable_add_to_cart}}<button class="ss-view-product">{{t_view_product}}</button>{{/disable_add_to_cart}}
{{/show_add_to_cart}}

Conditioning on your own feed fields

Equality conditionals are what make custom fields useful in a template — not just showing a value, but changing what renders based on it. Say you add a custom stock_status field (see Adding custom fields) with values like in_stock, low_stock, and out_of_stock:

{{#stock_status:out_of_stock}}<span class="ss-badge ss-badge--muted">Out of stock</span>{{/stock_status:out_of_stock}}
{{#stock_status:low_stock}}<span class="ss-badge ss-badge--warning">Only a few left</span>{{/stock_status:low_stock}}

Nothing renders for in_stock here — the badge is only meant to draw attention to the other two states. Combine as many {{#key:value}} blocks as you have values; each one is independent, so exactly one (or none) ends up rendering per product.

💡 Careful with fields that store "1"/"0" as text (common with platforms like Magento). {{#key}} does a plain truthiness check, and the string "0" is truthy in JavaScript — so {{#key}} would render even when the value is "0". Use an equality conditional instead: {{#key:1}}...{{/key:1}}.