Guides

Product Templates

By default, product list and detail pages will output a standard set of product information (through <div id="c7-content"></div>), but you can easily create HTML templates to customize them.

  1. To create a custom template, in the admin under Developer > Product Templates, click "Add Product Template"
  2. Select if the template will be for a Collection (product list) or for a Product (product detail).
  3. Use the product tags below to build your template. (You can reference the default Product and Collection Templates if you don't want to start from scratch.)
  4. To use your template, you can either apply it when editing a specific product or collection or, while in the Collection, you can select "Default template" to have it automatically apply to all.
  5. For your website, make sure that your layout has the <div id="c7-content"></div> tag on it as this is where the product information will be output. When you go to a /collection/* or /product/* URL you'll be able to see the product templates in use; either the system defaults or a custom one that you've added.

If no template is marked as the default, products will use the default system template unless one is specifically selected.

All Product Tags

Use the tags below in your templates to output product information.

Available Product Tags:

  • <c7-product-title linkType="None|Window|Ajax">
  • <c7-product-subtitle>
  • <c7-product-image linkType="None|Window|Ajax" index="1|2|3|etc" displayType="One|All|List" size="small|medium|large|x-large">
  • <c7-product-teaser>
  • <c7-product-content>
  • <c7-product-allocation>
  • <c7-product-add-to-cart>
  • <c7-product-event-time>
  • <c7-product-event-date>
  • <c7-product-link>
  • <c7-product-wine> - Displays all wine attributes:
    • <c7-product-wine-vintage>
    • <c7-product-wine-type>
    • <c7-product-wine-varietal>
    • <c7-product-wine-country>
    • <c7-product-wine-region>
    • <c7-product-wine-appellation>
    • <c7-product-wine-body>
    • <c7-product-wine-sweetness>
    • <c7-product-wine-acidity>
    • <c7-product-wine-tannin>
    • <c7-product-wine-fruitiness>
  • <c7-product-meta-* type="html|date"> where * is the meta data code

Product Templates

Create your custom product template using a combination of the product tags and HTML.

Default Product Template (Detail Page)

Below is the default product template used. Use it as a reference or starting point to create your own template, or you can start from scratch.

<div class="c7-product-detail">
  <div class="c7-product">
    <c7-if product-image>
      <div class="c7-product__image">
        <c7-product-image size="medium">
      </div>
    </c7-if>

    <div class="c7-product__details">
      <h1 class="c7-product__title"><c7-product-title></h1>

      <c7-if product-subtitle>
        <div class="c7-product__subtitle"><c7-product-subtitle></div>
      </c7-if>

      <c7-product-allocation />
      <c7-product-add-to-cart>

      <div class="c7-product__info">
        <div class="c7-product__content">
          <c7-product-content>
        </div>
        <c7-product-wine>
      </div>
    </div>
  </div>
</div>

Collection Templates

For all Collection templates, you must wrap the product HTML/tags with <c7-products> including start and end attributes to indicate which products to list. Use the product tags above to display product information. Each product in the collection will be output using the tags that you include.

Available Collection Tags:

  • <c7-collection-title>
  • <c7-collection-content>
  • <c7-products start="1">, </c7-products> - Wraps products in the Collection
  • <c7-product>, </c7-product> - Wrap the individual product tags. Will repeat for every product in the Collection.

Conditions:

  • <c7-products start="1"> - Show products in Collection starting with a specific number.
  • <c7-products start="1" end="4"> - Show a specific range of products.
    • Example would display the first 4 products from a Collection.
  • <c7-products start="1" end="1"> - Display a specific product.
    • Example would display the first product (which could be styled differently). For the following products, wrap product tags with <c7-products start="2">.

Default Collection Template (Page)

These are the default templates that will be used for your product pages when a custom one doesn't exist or hasn't been set to "Default". You can use these as a baseline to create custom product templates without starting from scratch.

<h1 class="c7-h1"><c7-collection-title></h1>
<c7-collection-content>
<div class="c7-product-collection__products">
<h2 class="c7-sr-only">Product List</h2>
  <div class="c7-product-collection__products--featured">
    <c7-products start="1" end="2">
      <div class="c7-product">
        <c7-if product-image>
          <div class="c7-product__image">
            <c7-product-image>
          </div>
        </c7-if>
        <div class="c7-product__details">
          <div class="c7-product__title" role="heading" aria-level="3">
            <c7-product-title>
          </div>

          <c7-if product-subtitle>
            <div class="c7-product__subtitle"><c7-product-subtitle></div>
          </c7-if>

          <div class="c7-product__teaser">
            <p><c7-product-teaser></p>
          </div>
          <c7-product-allocation />
          <c7-product-add-to-cart>
        </div>
      </div>
    </c7-products>
  </div>
  <c7-products start="3">
    <div class="c7-product">
      <c7-if product-image>
        <div class="c7-product__image">
          <c7-product-image>
        </div>
      </c7-if>

      <div class="c7-product__details">
        <div class="c7-product__title" role="heading" aria-level="3">
          <c7-product-title>
        </div>

        <c7-if product-subtitle>
          <div class="c7-product__subtitle"><c7-product-subtitle></div>
        </c7-if>

        <div class="c7-product__teaser">
          <p><c7-product-teaser></p>
        </div>
        <c7-product-allocation />
        <c7-product-add-to-cart>
      </div>
    </div>
  </c7-products>  
</div>

Default Collection Template (Widget)

<h2 class="c7-h2"><c7-collection-title></h2>
<c7-collection-content>
<div class="c7-product-collection__products">
  <c7-products>
    <div class="c7-product">
      <c7-if product-image>
        <div class="c7-product__image">
          <c7-product-image>
        </div>
      </c7-if>

      <div class="c7-product__details">
        <div class="c7-product__title" role="heading" aria-level="3">
          <c7-product-title>
        </div>

        <c7-if product-subtitle>
          <div class="c7-product__subtitle"><c7-product-subtitle></div>
        </c7-if>

        <div class="c7-product__teaser">
          <p><c7-product-teaser></p>
        </div>
        <c7-product-allocation />
        <c7-product-add-to-cart>
      </div>
    </div>
  </c7-products>
</div>

Making Tags Conditional

To conditionally add product information, use the <c7-if> tag. If the property exists, the content inside will be displayed. For example:

<c7-products start="1" end="4">
  ...
  <c7-if product-subtitle>
   <h3><c7-product-subtitle></h3>
  </c7-if>
 ...
</c7-products>

You can also use the <c7-if> tag to check for equality. For example:

<c7-if product-meta-badge="Award Winner">
   <span class="c7-badge c7-badge--award">Award Winning</span>
  </c7-if>

You can also add a ! to display content based on if a property does not exist. For example:

If no subtitle exists, display:

<c7-products start="1" end="4">
  ...
  <c7-if !product-subtitle>
   <h3>No Subtitle</h3>
  </c7-if>
 ...
</c7-products>

If meta data does not equal "Award Winner", display:

<c7-if !product-meta-badge="Award Winner">
   <span class="c7-badge c7-badge--award">Not an Award Winner</span>
  </c7-if>

Specific product image exists

Conditionally display content based on a specific image exists.

<c7-if product-image-1></c7-if>

For example:

<c7-if product-image-2>Display this text if image "2" exists for this product.</c7-if>

Outputting Product Meta Data

Product meta data can be created under Developer > Meta Data to be used as custom fields for products. If you want to display a product's meta data attribute, you can insert a c7 tag with that meta field's title.

Your custom tag should follow this format: <c7-product-meta-[code]>

If your meta data code is called "badge", your custom tag would look like this:

<c7-product-meta-badge>

A great way to merchandise your site is to use meta data combined with conditional equality check. For example:

...

  <c7-if product-meta-badge="Award Winning">
    <span class="c7-badge c7-badge--award">Award Winning</span>
  </c7-if>

 ...

If you choose to use meta data that contains html, you can render the html with type="html. For example:

<c7-product-meta-[code] type="html">

Related Products

Inside your Product Details template, you can optionally display Related Products. Product recommendations are dynamically generated using our Personalization Engine based on the product currently being viewed the customer's purchase history.

Display related products on a product page, by including <c7-related-products> tag inside of your custom template

  1. In Admin, under Developer > Product Templates, add or edit a Product Detail template
  2. Add the Related Products tag: <c7-related-products> </c7-related-products> where you want the related products to display. Typically this will be at the bottom of the page.
    1. Optionally, pass in a count of products to be displayed. ie. <c7-related-products count="4">. Note: If there aren't enough relevant products, less may display.
  3. Now, specify which product properties you want to display.
    1. Inside the Related Products tag, add the list of product tags that you want to display with any additional HTML you require: https://design-docs.commerce7.com/docs/product-templates-1#all-product-tags
  4. Save and you're done!

Example

Note: This example only shows sample code for the Related Products portion of the template, not the entire Product Detail template.

<c7-related-products count="4">
      <div class="c7-product">
        <c7-if product-image>
          <div class="c7-product__image">
            <c7-product-image>
          </div>
        </c7-if>
        <div class="c7-product__details">
          <div class="c7-product__title" role="heading" aria-level="3">
            <c7-product-title>
          </div>

          <c7-if product-subtitle>
            <div class="c7-product__subtitle"><c7-product-subtitle></div>
          </c7-if>

          <div class="c7-product__teaser">
            <p><c7-product-teaser></p>
          </div>
          <c7-product-allocation />
          <c7-product-add-to-cart>
        </div>
      </div>
</c7-related-products>


Raw Data

Sometimes it's preferable to access the raw data of a product, rather than have C7 markup. For example you might want to do something like <img src="<c7-product-meta-feature-image>">. This of course is invalid html. You can access the raw data like <img src="{{product-meta-feature-image}}">

Available Raw Data Tags: {{product-title}} {{product-subtitle}} {{product-type}} {{product-image}} {{product-teaser}} {{product-content}} {{product-wine-type}} {{product-wine-varietal}} {{product-wine-country}} {{product-wine-region}} {{product-wine-appellation}} {{product-wine-vintage}} {{product-slug}} {{product-meta- }} where is the meta data code.

Collection Page Filters

You can add collection filtering (select boxes) that will allow a customer to filter inside a given collection. All the filters are in the format <c7-collection-filter filter="wineType"> where 'wineType' is the filter you want.

1329
🚧

Filters can only appear on Collection templates and need to be on the outside of the <c7-products> wrapper.

Available Filters:

  • <c7-collection-filter filter="vendor">
  • <c7-collection-filter filter="wineType">
  • <c7-collection-filter filter="wineVarietal">
  • <c7-collection-filter filter="wineCountry">
  • <c7-collection-filter filter="wineRegion">
  • <c7-collection-filter filter="wineAppellation">
  • <c7-collection-filter filter="price" range="19.99,29.99,49.99">
  • <c7-collection-filter filter="wineVintage">

Example Template: Wrapping the filters in "c7-filters" will apply some additional styles for the filters to display side-by-side.

<div class="c7-filters">
  <c7-collection-filter filter="wineVarietal">
  <c7-collection-filter filter="wineAppellation">
</div>

<c7-products>
  <div class="c7-product">
    <c7-if product-image>
      <div class="c7-product__photo">
        <c7-if product-meta-badge="Award Winning">
          <span class="c7-badge c7-badge--award">Award Winning</span>
        </c7-if>
        <c7-product-image>
      </div>
    </c7-if>
    <div class="c7-product__info">
      <h3 class="c7-product__title c7-title">
        <c7-product-title>
      </h3>
      <c7-if product-subtitle>
        <div class="c7-product-detail__subtitle c7-subtitle">
          <c7-product-subtitle>
        </div>
      </c7-if>
      <div class="c7-product__teaser">
        <p><c7-product-teaser></p>
      </div>
      <c7-product-add-to-cart>
    </div>
  </div>
  </c7-products>

Updated 8 days ago