Product templates

Templates for products are maintained within the ~/theme/product directory and their available properties are managed within your Templates JSON Configuration file.

What's in a product?

Before designing or developing a product page, you should understand what's possible out-of-the-box. Before delving into detail, let's explore a brief anatomy of a Product Template. 

  • Introduction
    A product's title should be one of the first visible elements on the page. Other than that, you may choose to include a product's short description, a product reference, manufacturer information or aggregate review information (if available). 
  • Media
    Product media may include photos, videos or 360º/stop-motion photos. These typically appear alongside or below the product's title. 
  • Descriptions
    Your product page must include a full description (short descriptions are insufficient for SEO). You may include any number of additional editable regions on the page. For example, you may have a region for key features or product care. 
  • Reference numbers
    Evance permits a number of unique product reference numbers: Evance Quickfind, SKU, Manufacturer Part Number, and EAN Barcode. Typically, the merchant's SKU, Evance Quickfind code, or both, are displayed on the page. However, some merchants prefer not to show reference numbers. So, the choice is yours whether to include them.
  • Price
    The price for the minimum order quantity should be the default available price on the page. Evance supports a number of price configurations - we'll take a look at those later.
  • Volume pricing
    Tiered pricing based on order quantity is common for merchants who sell to trade customers. For example, a quantity of 1 or more at £9.99 each, and 10 or more at £8.99. 
  • Specifications
    Product specifications drive product variant options, category filtering and are typically represented as a table of headings and values on a product page. For example, Voltage (heading) and 12v (value). Each heading may have one or more values.
  • Variants
    Products often have subtle variations. For example, shoes come in different sizes. Whilst most products may have a single variable (like shoe size), some may have several variable attributes. Your design may facilitate colour swatches, drop-down/select boxes, radio buttons or clickable boxes/buttons. 
  • Customisation
    Some products are customisable. For example, a watches backplate could be engraved. Evance supports a range of customisation options, including additional pricing per option. Customisation options should appear below variant options. 
  • Add to cart
    The design of your "add to cart" form (including any customisation options) should include a prominent call to action button. Many sites include a quantity field, but many consumer sites are omitting quantity fields in favour of cleaner design. 
  • Downloads
    User manuals, data sheets, installation instructions or product care information can often be provided as downloadable content (usually PDFs). Evance allows merchants to offer zero or more downloads with titles and descriptions for each. 
  • Reviews
    Evance has a built-in 5 star review system with positive and negative comments per reviewer. Whilst you should include reviews in your designs, reviews may not be turned on by the merchant. 
  • Related products
    Products may have zero or more hand picked relationships. Whilst related items are usually displayed in a carousel, you may have other ideas. Other relationships could be catered, such as products in the same manufacturer range.
  • Wishlist
    Registered users may add products into their wishlist. You do not have to support this functionality, but it is recommended. 


Default template

Themes must include a default ~/theme/product/index.evml template. However, you may add additional Product templates where a store may have different layout requirements for different types of product. Most themes come with just the default template available.

Product template definitions within ~/theme/config/templates.json may look a bit like the following:

{
    "product": {
        "index": {
            "title": "Default",
            "path": "~/theme/product/index.evml"
        }
    }
}

Learn more about Templates JSON Configuration


Editable regions

Similarly to Page templates, Product templates support multiple editable regions. However, Product has a reserved editable region:

  • fullDescription
    Represents the Product's "Full Description" content for the page.

You may add any number of additional editable regions to a category template.

Adding editable regions to your template

The <ev:editable> reference guide


EVML objects for products

Each product within Evance will include the following variables in addition to the common global variables.

Product related variables
product Product

Represents a product from the product management system. This object allows you to get access to all settings, assets and properties associated with the product.

Read more about the Product object

template Template

May also be access via product.template. Provides access to information about the product page's template settings.

Read more about Template


 

Try the dump() function

If you ever get stuck, or would like to know which variables are available to you, try adding the following code into any template. You will be provided with a list of all variables on the page.

{{ dump() }}

Learn more about debugging