Overview
The Commerce extension adds store data to page and system templates. Once it is enabled, templates can read the cart, checkout, product collections, subscriptions, the signed-in customer's orders, and returns. General template syntax lives under Storefronts templating; this section documents the tokens and loops the extension introduces.
Enablement
Enable the Commerce extension on a project before its tokens and loops render. Cart and checkout values are only populated when the extension is enabled, and product, subscription, order, and return data follows the same rule. The general Variables and tokens page shares this note for the cart and checkout families.
Token families and loops
Each family has a sibling page with the full token and loop reference. The entries below are a starting point; follow the page link for every field.
| Family | Page | What it covers | Example tokens and loops |
|---|---|---|---|
| Cart | Cart | Cart summary and line items | {cart.count}, {cart.total}, {cart.currency_symbol}, {each cart.items as=item} |
| Checkout | Checkout | Totals, coupons, and attribute blocks | {checkout.items}, {checkout.subtotal}, {checkout.total}, {checkout.price_summary}, {checkout.coupon_discount_total} |
| Products | Products | Related and dynamic product collections | {each related_products as=product limit=4}, {also_viewed_products}, {browsing_history_products}, {category_best_sellers}, {frequently_bought} |
| Subscriptions | Subscriptions | Plan groups, features, and billing frequencies | {each subscription_group[1].subscriptions as=sub}, {each sub.features as=feature}, {each sub.frequencies as=freq}, {subscription_group id=1} |
| Orders and account | Orders and account | The signed-in customer's order history | {each user.orders as=order}, {order.order_number}, {order.total}, {currentUser.isLoggedIn} |
| Returns and wishlist | Returns and wishlist | Return requests and saved products | See the page for the fields and markup it provides |
Example
A cart badge that appears only after the cart has items:
{if cart.count}
<a href="/cart">{cart.count} items, {cart.currency_symbol}{cart.total}</a>
{/if}
The same guard works around any of the collections above. Test the collection before looping when an empty result should show a message instead of a blank section, as described in Handling an empty collection.