Articles in this section

Customizing the dynamic product layout (Beta)

Avatar
Bert Spoor
  • Updated
Available_in.png Enterprise Beta.png
  • BETA NOTICE:
  • If you're interested in using this beta feature and you're on the Enterprise plan, please reach out to your success manager, who will activate this for you.
  • Not all available variables are listed as imported attributes in this article. This list is updated as soon as the feature is released officially.

---

With dynamic hotspots, you can render product details directly onto the pages of your online publication. These pull the product image, title and price from the product hotspot to show inside the selected hotspot area. Using the Template Editor, you change the product details' appearance aligning them with your brand's look and feel:

  • Change the layout
  • Apply different colors
  • Update the font
  • Add or remove dynamic elements
  • Add or remove shapes or buttons

The Template Editor:
mceclip1.png

To change the appearance of the product details, a good understanding of HTML and CSS is required. If the required development resources are not available (in time) our Services department will be happy to help you. In that case, feel free to contact your Success Manager for an introduction.

Accessing the Template Editor

You can open the Template editor by either clicking on the symbol in the bottom right corner of the hotspot editor or by clicking on the quick access button when you're editing a product hotspot.

Accessing the Template Editor:
mceclip0.png

Available variables

In the HTML section, the order in which elements appear on the page is determined as well as the elements used in the layout. To load dynamic content you can select from the following variables:

  • {{id}}
  • {{title}}
  • {{description}}
  • {{link}}
  • {{image_link}}
  • {{availability}}
  • {{price}}
  • {{sale_price}}
  • {{product_type}}
  • {{brand}}
  • {{gtin}}
  • {{mpn}}
  • {{custom_label_0}}
  • {{custom_label_1}}
  • {{custom_label_2}}
  • {{custom_label_3}}
  • {{custom_label_4}}

IMPORTANT: Whether a variable contains content depends on whether it is available in the product feed connected to the associated group.

 

Available processor functions

Just like the default HTML only shows the price if it is available, you might want to add specific conditions to a variable or optimize its value for certain use cases. To do so, you can use the built-in helpers of the handlebars template engine and the processor functions listed below.

  • sanitize - Lowercases string and replaces all spaces with - (sanitize Round Cement Planter => round-cement-planter)
  • numeral - Getting numeral from float number (numeral 5.66 => 5)
  • fraction - Getting fraction from float number (fraction 5.66 => 66)
  • formatPrice - Formats number as price (formatPrice 5.66 => 5.66) (formatPrice 5 => 5.00)

For example, if you want to use {{product_type}} as a class name so you can trigger different kinds of styling per type of product,  you can use sanitize to make sure the value is formatted correctly.

 

Using custom fonts

You can use @font-face to apply a custom font. Instead of referring to the font hosted externally, you will need to directly embed the font in the CSS file converting it from WOFF to base64 encoded string. 

Embedded font, where XXXXXXX is replaced with the base64 encoded string:

@font-face {
 font-family: 'fontName';
 src: local('fontName'), url(data:application/font-woff;base64,XXXXXXX) format('woff');
}


Because base64 encoded strings are very lengthy, we recommend to inject the @font-face CSS on group-level and not in the code editor of the dynamic product layout. You can find the Custom code injection feature at Publication Reader > Advanced settings > Custom code injection.

In the code editor, you can then apply the custom font using the CSS font-family property.

 

Tips and tricks

  • Use a separate group to test changes. The code applied in the Template Editor will affect the dynamic hotspots across all publications in the selected group. That is why we recommend creating a separate group with internal test material so you can work on a new template and test your changes without impacting live publications.
  • Take square product images into account. It is common for product images to be square. Depending on the product's dimensions and orientation, images can contain blank space impacting the layout. We recommend taking this into account and trying out the template using various products.
  • Resetting the HTML. If you delete the HTML from the Template Editor, it will apply the default HTML again. Just refresh the HTML tab after you click Save & Apply.
  • Create a larger working space. Use the ↤ arrow button at the bottom to enlarge the Editor and get a better overview of your code structure.
  • Create a font-specific stylesheet. Instead of injecting the entire @font-face CSS in the Custom code injection field, you can also choose to create and host a CSS file containing all necessary fonts and inject it as a stylesheet on group-level: 
    <link rel=“stylesheet” type=“text/css” href=“https://my.domain.com/fonts.css”>

 

Example

Custom Template of Libris.nl
mceclip0.png

 

Related articles