Create Template

The Create Template feature allows you to design and configure new layouts for recommendation widgets. You can either start from scratch, upload an existing layout, or modify global add-ons to tailor the look and feel of product recommendations across devices.

Follow the steps given below to create a new template.

Click Create Template to get started. Refer to the given table to know the available options.

Option	Description
Create Template	Build a new template from scratch using the layout builder. You can configure structure, orientation, and display parameters.
Upload Template	Upload existing HTML and CSS files to quickly implement a custom design for your widget.
Customize Global Add-ons	Modify or apply global design elements (like product badges, labels, or price displays) that affect multiple templates.

Select Template Type. Once you start to create a new template, the following options appear:

Step	Setting	Description
Step 1: Medium	Desktop or Mobile	Select the device for which this template is intended. Layouts vary depending on screen size and resolution.
Step 2: Layout	Horizontal or Vertical	Select how products should be arranged: in a carousel (horizontal) or a stacked list (vertical).

After selecting your desired options, click Create to move to the configuration screen. Refer to the given table to know the available fields to configure the template appearance.

Field	Description
Template Name	Give your template a unique name. Default names (like Untitled-layout-1012) can be renamed later.
Template Type	Indicates the widget category this layout belongs to, such as Standard Widget, Boutique, or other custom widget types.
Widget Size	Define the total width of the widget container in pixels (px) or percentage (%).
Products in view	Specify the number of products visible at once in the recommendation panel.
Products Limit	Define the total number of products that can be loaded or scrolled within the widget.
Global Add-ons	Toggle on to enable Global Add-ons. Manage shared components like labels, discount tags, price fields, or buttons that appear across templates.
Product Field	Customize which product details (like image, title, price, or ratings) are displayed in the layout. Click Add Another Field to add extra fields.

Advance Code Editor

Customize Recommendations Template with Advanced Code Editor

Use the Advance Code Editor to customize a template beyond the visual editor. You can edit HTML, CSS & JSON, and preview live data before publishing.

Click the Advanced Code Editor. On the left panel, the system automatically converts the visual template you created into editable code. You can modify the template’s structure, design, or data logic using Template (HTML), CSS, or JSON.

📘
Note
The changes made in the code editor will replace any existing customizations. The Template details screen appears.

You can also upload an HTML template. Drag and drop a file to upload, or upload it from your device and click DONE. Click SAVE to apply and preview your changes.
Once done with your customizations, click SAVE to save your current changes. Click Apply template to change the live template, which can affect consumer experience for this site. Your created template will be visible on the Manage Templates page.

Customize Global Add-Ons

You can enhance your recommendation templates by adding interactive Global Add-ons Like, Dislike, Wishlist, and Share. These add-ons improve user engagement and allow shoppers to interact directly with recommended products.

Steps to Use Global Add-ons

Navigate to the Template section in the Recommendation Console.
Click Create Template and select Customize global add-ons and choose the add-ons you want to include in your template. You have following options:

Like: Allow shoppers to like recommended products.
Dislike: Capture negative feedback for better personalization.
Wishlist: Let users save products they are interested in.
Share: Enable shoppers to share products with others.

Select a design style for each add-on (icon variations are provided). Preview the template to verify the placement and appearance of the add-ons.
Click Save to apply changes.

📘
Note:

The selected Global Add-ons will appear consistently across all widgets using this template.

You can update them anytime through the Advanced Code Editor for further customization.