Shop listing

{for each entry in 'products' with status = published ordered by newest}
  <a href="product.html?collection=products&slug={slug}">
    {if entry has 'image'}
      <img src="{'image'}" alt="{title}">
    {endif}
    <h2>{title}</h2>
    <p>From {commerce_price_from slug products}</p>
  </a>
{endfor}

Product detail + variants

<meta name="birkly-collection" content="products">
<h1>{title}</h1>
<div>{'content'}</div>

{for each entry in 'variants' of 'products'.current ordered by order}
  <div class="variant">
    <h3>{title}</h3>
    <a class="button" href="{commerce_buy_url slug products 1}">Add to cart</a>
  </div>
{endfor}

<script src="/birkly-client.js"></script>

Simple products (no variants): put Commerce on the parent and link {commerce_buy_url slug products 1} once.

Cart badge

<a href="cart.html">Cart ({commerce_cart_count})</a>

Events list + detail

{for each entry in 'events' with status = published ordered by newest}
  <a href="event.html?collection=events&slug={slug}">
    <h3>{title}</h3>
  </a>
{endfor}

<!-- event.html — no collection loop -->
<h1>{title}</h1>
<a href="{event_ics_url events id 0}">Add this date (.ics)</a>
<a href="{events_calendar_feed_url}">Subscribe (iCal)</a>