Product Templates

By default, product list and detail pages use a set of standard tags, 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. Reference the product tags listed below to build your template. See the "Product Template" and "Collection Template" sections below to see a sample of how the tags should be added.
  4. To use your template, you can either apply it when editing a specific product or collection or you can check the "Default template" box 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/* 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.


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-add-to-cart>
  • <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-meta-* type="html"> where * is the meta data code

Coming Soon:

  • <c7-product-allocation>

Conditional Tags

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:

<c7-products start="1" end="4">
  ...
  <c7-if !product-subtitle>
   <h3>No Subtitle</h3>
  </c7-if>
 ...
</c7-products>
<c7-if !product-meta-badge="Award Winner">
   <span class="c7-badge c7-badge--award">Not an Award Winner</span>
  </c7-if>

Custom Tags

If you want to show a product meta attribute to highlight your product, 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">

Product Templates

Create your custom product template using a combination of the product attributes and HTML that you want to display.

Example Template:

<div class="c7-product-detail">
  <div class="c7-product">
    <div class="c7-product__image">
      <c7-if product-meta-badge="Award Winning">
        <span class="c7-badge c7-badge--award">Award Winning</span>
      </c7-if>
      <c7-if product-meta-badge="New">
        <span class="c7-badge c7-badge--new">New</span>
      </c7-if>
      <c7-if product-meta-badge="Limited Quantity">
        <span class="c7-badge c7-badge--limited">Limited Quantity</span>
      </c7-if>
      <c7-product-image>
    </div>
    <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-add-to-cart>
      <div class="c7-product__info">
        <div class="c7-product__content"><c7-product-content></div>
        <div class="c7-product__specs"><c7-product-wine></div>
      </div>
    </div>
  </div>
</div>

Collection Templates

For all Collection templates, you must wrap the product HTML/tags with 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>

Example Template:
This will show the collection title, followed by the first 4 products in the collection each with a title, teaser, and add to cart. If you want to display all products, simply don't display the "end" attribute.

<c7-collection-title>
<c7-products start="1" end="4">
  <div class="c7-product">
    <div class="c7-product__image">
      <c7-product-image>
    </div>
    <div class="c7-product__details">
      <h3 class="c7-product__title">
        <c7-product-title>
      </h3>
      <div class="c7-product__subtitle">
        <c7-product-subtitle>
      </div>
      <div class="c7-product__teaser">
        <p><c7-product-teaser></p>
      </div>
      <c7-product-add-to-cart>
    </div>
  </div>
</c7-products>

To highlight the first product in the list, use a start and end attribute of 1 with your set of product tags, then include a second set of tags for all other products using the start attribute of "2".

<c7-products start="1" end="1">
  <div class="c7-product c7-product--featured">
    // Product tags
  </c7-products>
  <c7-products start="2">
    <div class="c7-product">
      // Product tags
    </div>
  </div>
</c7-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-meta-}} where is the meta data code.


Default Templates

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.

Collection (Page)

<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>

Collection (Widget)

<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>

Product (Detail)

<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 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.

🚧

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">

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>