Designing Live Content Using HTML Editor

Blueshift supports three ways to include dynamic content on website and mobile apps:

• HTML content which is used on mobile web and desktop sites where a javascript tag can be used.
• JSON content which is typically used for mobile apps for native rendering. For more information, see Live content JSON templates.
• Visual template which uses the drag and drop system to create content. The editor automatically generates HTML code in the background.

Add a Live content HTML template

To add a Live content HTML template, complete the following steps:

1. Go to Templates > Live Content. 
2. Go to the Templates tab and click +TEMPLATE. 
3. Click HTML template.
   
4. Provide a template name and select from a library of templates to get started.
5. Click Create.

Set template properties

From the Properties panel, you can edit the template name and organize it under tags/tag folders. You can also edit the width and height of the slot for the HTML template. 

Add template content

The content for the widget is defined in the Content tab.

You can include user attributes, product attributes, dynamic Liquid template, as well as static image assets. Live templates support Blueshift's dynamic template language Liquid to include dynamic content in templates. This allows including user attributes or catalog attributes in the template. 

Add Custom elements

You can create your own custom elements to easily edit static assets such as images and rich text.

Preview widget

You can preview the content for the widget in desktop, mobile, and tablet modes to the right of the both the Properties and Data tabs.