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. |
template
Template
May also be access via |
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() }}