Cart page

A page served at /cart that renders the cart inline. Whether a <storesynk-cart> is on the page decides the behaviour: present, <open-cart> opens the drawer in place; absent, <open-cart> navigates to /cart. So a cart page is the drawer markup with the <storesynk-cart> wrapper omitted.

<storesynk-store domain="your-store.myshopify.com" token="your-public-storefront-token">
  <main class="cart">
    <h1>Your cart</h1>

    <!-- No <storesynk-cart> here -> the cart renders inline and <open-cart> navigates to /cart. -->
    <cart-line-list>
      <!-- First cart-line = the per-line TEMPLATE; cloned once per cart line. -->
      <cart-line>
        <show-line-image class="cart-img"></show-line-image>
        <div class="line-info">
          <show-line-title></show-line-title>
          <show-line-variant class="muted"></show-line-variant>
          <show-line-price></show-line-price>
        </div>
        <div class="qty">
          <decrease-line-quantity>−</decrease-line-quantity>
          <show-line-quantity></show-line-quantity>
          <increase-line-quantity>+</increase-line-quantity>
        </div>
        <remove-cart-line class="muted">×</remove-cart-line>
      </cart-line>
    </cart-line-list>

    <div class="cart-foot">
      <div>Subtotal: <show-cart-subtotal></show-cart-subtotal></div>
      <div>Total: <show-cart-total></show-cart-total></div>
      <checkout-link><a class="checkout-btn" href="#">Checkout</a></checkout-link>
    </div>
  </main>
</storesynk-store>

On your other pages, put an <open-cart> with a <show-cart-count> badge in the nav; with no drawer present it routes shoppers here:

<open-cart class="cart-button">
  Cart (<show-cart-count>0</show-cart-count>)
</open-cart>

• The line markup is identical to the drawer: <cart-line-list> clones its first <cart-line> per line, and totals plus <checkout-link> sit at store level.
• Prices go through displayers, never raw strings.

Options

Tag	Attribute	Type / default	What it does
cart-line-list	-	-	Template-clone container: first <cart-line> child is the template.
cart-line	-	-	Provides the line context to its show-line-* children and controls.
open-cart	-	-	With no <storesynk-cart> on the page, navigates to /cart.

Styling

cart-line { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
cart-line[ss-loading] { opacity: .5; pointer-events: none; }
show-cart-tax[ss-empty], show-cart-discount[ss-empty] { display: none; }

The rich-cart total displayers (show-cart-tax, show-cart-duties, show-cart-discount, and so on) set [ss-empty] when their value doesn’t apply. Hide those rows in CSS instead of expecting a 0.

Gotchas

• The page must live at /cart from the site root; the engine’s cart URL is not configurable. On a base-path deployment (Astro base: '/shop', a GitHub Pages project site), <open-cart> still navigates to /cart and 404s. Use the drawer there.
• No line items: the first-child <cart-line> template is missing (SSK-107), or show-line-* sits outside <cart-line> (SSK-105/SSK-106). See cart troubleshooting.
• Checkout dead-ends at a password page while the cart works: the store hasn’t launched. Shopify’s password blocks hosted pages but not the Storefront API.

Related

• Cart drawer
• Checkout link
• Cart tag reference