Products Pages

NOTE: January 24, 2018 - this guide is outdated and likely does not work on Squarespace any longer. Stay tuned for an update  

Everyone's always wondering about where they can get their hands on products.list, products.item, and products.conf.  I've written some bare-bones markup for each, so that you have a place to start each time you want to build a custom products page.  There are a few notes at the bottom for reference.


<div id="productList">
  {.repeated section items}
    <a href="{fullUrl}" class="product">
        <!-- Display product image -->
            <div class="product-image">
              <img {@|image-meta} />

        <!-- product information, like price and title -->
        <div class="product-meta">
          {.section title}
            <p class="product-title">{@}</p>
          <p class="product-price">{@|product-price}</p> 

        <!-- this will place the 'SOLD OUT' or 'SALE' flag on the product appropriately -->



{.section item}
  <div id="productWrapper">
    <!-- This displays all images/videos associated with the product. Style this accordingly. -->
    <div id="productSlideshow">
      {.repeated section items}
          <img {@|image-meta} />

    <!-- This shows the status (sold out/on sale), price, and description (excerpt) text -->
    <div id="productDetails">

      <h1 class="product-title">{title}</h1>


        <div class="product-excerpt">


    <!-- This displays any text/blocks added to the Additional Info tab -->
    {.section body}
    <div class="product-description">



  "title" : "Products",
  "ordering" : "chronological",
  "icon" : "products",
  "pageSize" : 999,
  "addText" : "Add Product",
  "view" : "product-table",
  "acceptTypes" : ["store_item"]


You can name these files whatever you want, as long as they all match.  For example, custom-products.list, custom-products.item, custom-products.conf.  That way they're all synced up to each other.

If you choose to name them products.*, you'll overwrite the system collection.  This means that Squarespace automatically provides you with a Products page type, but you'll end up using your own markup. For this reason, I advocate a custom naming convention in case you need to use the system collection later.

Finally, here's a list of helpers and formatters specific to the products page:

  • {@|product-price} - displays price of the product
  • {@|product-status} - displays status text if the product is marked as on sale or sold out
  • {@|product-checkout} - displays the Add to Cart button (includes Variant drop down and Quantity input)

/ /