Conditions and loops

Tag names are case-insensitive: <If> and <if> are the same. Sworen’s themes use the capitalised form.

If, ElseIf, Else

<If condition={product.available}>
  <button type="submit">Order now</button>
  <ElseIf condition={product.has_variants}>
    <p>Choose another option</p>
  </ElseIf>
  <Else>
    <p>Sold out</p>
  </Else>
</If>

<ElseIf> and <Else> go inside <If>, after the content to show when the condition is true. The condition can also be written as cond, when or is, or as a bare first attribute: <If {cart.count > 0}>.

Show, with a fallback

<Show> prints its content when the condition is true, and its fallback otherwise:

<Show when={product.featured_image} fallback={'product-card__image' | placeholder_svg_tag}>
  {product.featured_image | image_tag(product.title, 600)}
</Show>

<Show when={cart.count > 0}>
  <CartLines cart={cart} />
  <Fallback><p>Your cart is empty.</p></Fallback>
</Show>

Switch and Match

Compare one value against several cases:

<Switch value={block.settings.level}>
  <Match when="h1"><h1>{block.settings.text}</h1></Match>
  <Match when="h3"><h3>{block.settings.text}</h3></Match>
  <Default><h2>{block.settings.text}</h2></Default>
</Switch>

Without value, the first <Match> whose when is true wins:

<Switch>
  <Match when={product.stock === 0}>Sold out</Match>
  <Match when={product.stock < 5}>Only {product.stock} left</Match>
  <Default>In stock</Default>
</Switch>

Loops

There is no loop tag. Use .map() on a list:

<div class="grid">
  {collection.products.map(item => (
    <ProductCard product={item} />
  ))}
</div>

<ol>
  {product.variants.map((variant, index) => (
    <li>{index + 1}. {variant.title}</li>
  ))}
</ol>

Combine with filter and slice:

{product.variants.filter(v => v.available).slice(0, 3).map(v => <span>{v.title}</span>)}

Short forms

{product.has_reviews && <StarRating rating={product.rating} />}
{product.price_varies ? 'From ' : ''}{product.price_min | money}

In frontmatter

Frontmatter has if / else if / else and switch for preparing values, and a bare return; stops the whole file from printing:

---
if (!product) {
  return;
}
let badge = '';
if (product.compare_at_price > product.price) {
  badge = 'Sale';
}
---

See Frontmatter.