TABLE OF CONTENTS
The template describes a rendering format - a layout recommendations on your webpage. Below are the layouts supported by VueX:
- Tabbed carousel
- Grid templates.
The template allows you to specify the layout of the recommendation module on the website. For example, you can set up a recommendation on your home page with a carousel template that allows customers to scroll through a collection of products. VueX provides options to format and style templates using the template builder. You can also customize the template by adding custom code to the CSS file provided by VueX.
The Grid layout is the most recent addition to the VueX templating options. Typically, a grid is used when you want to show multiple products without the user having to scroll horizontally. This is especially useful in mobile websites where the natural scroll direction is vertical.
Note: If you use APIs to populate the content of the module then you must use your own layouts/UI to display the recommendations on the website.
Create a Template
- Choose Assets > Templates from the top navigation bar.
- Click New Template.
Enter a name for your template.
Click Select Template Type and select the template you want to create. The Manage Template page is displayed.
Choose Desktop to create the template for a desktop site or choose Mobile to create a mobile site template.
Edit the following template fields. You can view the formatting changes in the Template Preview pane.
- Click Upload/Edit CSS to edit the preset template CSS file provided by VueX and modify/add your own code. Editing the code will override any changes made using the template editor.
Click Save to save the changes.
Note: Click Download Help Guide at the bottom for any information you may need regarding modifying the CSS file.
Add Call-to Action (CTA)
Click Layout to expand options.
Click Custom CTA>Add New CTA. The Custom CTA Editor window is displayed.
Click Submit to add the new CTA.