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

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.

🚧

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>