Product Templates

Use a custom HTML template for a product, or for a collection of products.

In the admin, hit Developer > Product Templates. Add a new template, select either Collection or Product type, and insert your HTML.

To enable your template, check the Is Default box below the content field while editing to make it a default or apply the template on a specific Collection or Product by editing that Collection or Product. If no template is marked default, it will use the default system template.

Product Detail

For a Product template, use the c7 tags to show your product information:

<div>
  <c7-product-image>
  <h2><c7-product-title></h2>
  <c7-product-content>
  <c7-product-wine>
  <c7-product-add-to-cart>
</div>

Collection

For a Collection, you must use a tag as a wrapper, using start and end attributes to indicate which products to list. Each product will follow the pattern of your template. You can also use c7 tags to show product information.

For example, this will show the first 4 products:

<c7-collection-title>
<c7-products start="1" end="4">
  <div>
    <h2><c7-product-title></h2>
    <p><c7-product-teaser></p>
    <c7-product-add-to-cart>
  </div>
</c7-products>

Conditional Tags

To conditionally add product information, use the <c7-if> tag, adding the property to check for:

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

You may 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 signify not. 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>

Wine Information

To show all of the wine attributes, use the <c7-product-wine> tag. Alternatively, show individual pieces of wine information using the format <c7-product-wine-[info]>

// all of the wine information
<c7-product-wine>

...

// show just the wine varietal
<c7-product-wine-varietal>

Available Collection Tags:

<c7-collection-title>
<c7-collection-content>

Available Product Tags:

<c7-product-title hasLink="true">
<c7-product-subtitle>
<c7-product-type>
<c7-product-image size="small|medium|large|x-large" image="1|2|3|etc">
<c7-product-teaser>
<c7-product-content>
<c7-product-wine>
<c7-product-wine-type>
<c7-product-wine-varietal>
<c7-product-wine-country>
<c7-product-wine-region>
<c7-product-wine-appellation>
<c7-product-wine-vintage>
<c7-product-add-to-cart showVariantTitle="false">
<c7-product-allocation>
<c7-product-link>Link text here</c7-product-link>
<c7-product-event-date>
<c7-product-event-time>

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

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

Example Collection Template

<c7-products start="1" end="1">
  <div class="c7-product c7-product--featured">
    <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>
  <c7-products start="2">
  <div class="c7-product">
    <div class="c7-product__photo">
      <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__info">
      <h3 class="c7-product__title c7-title">
        <c7-product-title>
      </h3>
      <div class="c7-product__teaser">
        <p><c7-product-teaser></p>
      </div>
      <c7-product-add-to-cart>
    </div>
  </div>
</c7-products>

Example Product Template

<div class="c7-product-detail">
  <div class="c7-product-detail__titles">
    <h1><c7-product-title></h1>
    <c7-if product-subtitle>
      <div class="c7-product-detail__subtitle c7-subtitle">
        <c7-product-subtitle>
      </div>
    </c7-if>
  </div>
  <div class="c7-product-detail__photo">
    <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-detail__info">
    <c7-product-add-to-cart>
    <c7-product-content>
    <c7-product-wine>
  </div>
</div>

Collection Filtering

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.

// example filter
<c7-collection-filter filter="wineVarietal">
<c7-collection-filter filter="wineAppellation">

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

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