Product grid

A grid of product cards pulled from one collection with <storesynk-list>. It fetches client-side and clones a card per product, with no filters or pagination: the right tool for a “Featured” or “New arrivals” section.

<!-- First child = the per-product card TEMPLATE (cloned per product). -->
<storesynk-list collection="example-collection" limit="8" class="grid">
  <storesynk-product class="card">
    <product-link>
      <a>
        <show-image main class="card-img"><img alt="" /></show-image>
        <span class="card-title"><show-title></show-title></span>
      </a>
    </product-link>
    <div class="card-prices">
      <show-price class="card-price"></show-price>
      <show-compare-price class="card-compare"></show-compare-price>
    </div>
    <add-to-cart><button type="button">Add to cart</button></add-to-cart>
  </storesynk-product>
</storesynk-list>

• The first element child is the card template and must be, or contain, a <storesynk-product>. The list removes it and clones it once per product.
• The card’s <storesynk-product> carries no handle or product-id: the list feeds each clone its data. <product-link> sets href="/products/{handle}" on the nested <a>.
• Prices always render through <show-price> and <show-compare-price>, which hides itself when the product isn’t discounted.

When you need filters, sort, a price range, load-more, or shareable filter URLs, switch to <storesynk-collection>. The two are separate subsystems, so don’t mix their tags.

Options

Attribute	Type / default	Meaning
collection	string = ""	Collection handle to render.
all-products	boolean, off	Render every product in the store (collection wins when both are set).
limit	number = 12	Maximum products fetched.

Styling

storesynk-list.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 24px; }
storesynk-list[ss-loading]::before { content: "Loading…"; color: #888; }
storesynk-list[ss-empty]::before   { content: "No products."; color: #888; }
.card-compare { color: #999; text-decoration: line-through; }

Gotchas

• The grid renders empty when the first child isn’t a valid template (SSK-107). See search and lists troubleshooting.
• Empty although the collection exists: a wrong or unpublished handle returns no products and the list flips to [ss-empty]. Check the handle and that the collection is published to your token’s channel.
• <change-sort>, <filter-list>, <load-more> and friends need a <storesynk-collection> ancestor (SSK-110). They do nothing inside <storesynk-list>.

Related

• Lists & search tag reference
• Filtered collection
• Add to cart and Buy now