Customize Home Page - [2/3] Adding & Setting Up Template

Customize Home Page - [2/3] Adding & Setting Up Template

Setting Up Home Page Template

[2/3] Adding New Template for Home Page
An overview and template information are explained in the previous KB article “[1/3] Overview & Info.” This article explains how to create a new Home Page template, sections and widgets navigations, and predefined templates.

1. Adding a New Template

To create a new template, click ADD TEMPLATE.
  1. A pop-up will appear asking whether you want to create a template for the Home Page or Category Banner.
  2. By default, Home Page is selected.
  3. Enter the required details to set up the Home Page template and proceed with designing the layout.
1. Template Name: Enter a unique name for the template to identify it. i.e. Halloween, Christmas, New Year, etc.

Figure 1.1 "Add Template"
2. Set Default: Use this checkbox to set the template as the default for all store locations.
  1. At least one template must be marked as default to ensure there is a standard layout for all locations. If the 'Set Default' checkbox is selected for a new template, it will override the existing default template.
  2. Default Template Conflict Alert:
  3. If you mark a new template as default, an alert message will appear. Confirming the action will replace the current default template with the new one across all locations. In that case, the current default template will be removed from the default and will turn into Drafted.
  4. If a template is set as a default, it can't be deleted as it is applicable to all the locations on the home page.

Figure 1.2 "Default Template Conflict Warning"

3. Template Schedule: Specify the Start Date and End Date during which the template should remain active. Admin users can schedule the homepage template based on their local system/browser time zone.

Figure 1.3 "Template Schedule"
  1. The scheduled homepage template will be displayed according to the US time zone, ensuring that customers across different states can view the template based on their regional/local time. This helps deliver a consistent user experience across all time zones.
  2. This feature provides flexibility, enabling you to plan home page layouts for events, promotions, or seasonal campaigns such as black Friday sales, Christmas week sales, upselling items to clear stock, etc. 
  3. Templates with scheduled dates will automatically activate and deactivate based on the specified schedule. When the scheduled template is expired, the default template will publish and start displaying to customers.
  4. Note: The schedule time should be required the minimum latest time availability as per US Time Zones or at least allow to select the last 24 hours.
After filling in the required fields, click the "Create New Template button". You will be redirected to the Widget Design Page, where you can further customize your new home page template by adding predefined widgets.

2. Setting Up & Designing Home Page Template

Once you click the 'Create New Template' button (or edit any existing template), you will redirect to the inside of the home page template view. You will find the two primary sections on the left side: Design Area and Template Info. The Header options provide quick navigation and control over the template design. 

1. Inside Home Page Template
Create your ideal homepage using our intuitive, customizable drag-and-drop interface with a variety of layout options.
  1. ADD SECTION provides the option to set the design layout.
  2. Choose the widgets and elements like Inner Section | Single Image | Image Slider | Collection | Heading | Text Editor. 
  3. Easily adjust the layout to suit your needs and design your unique template with flexibility.
  4. Predefined Templates are ready to use template with the fixed widget and design layouts.
  5. Preview your template across different devices—desktop, laptop, and mobile—ensuring your design looks perfect everywhere. Make any necessary adjustments before publishing your template live.

Figure 2.1 "Home page template layout"
2. Template Info 
The Template Info section provides key details about the current homepage template. 
  1. View and Edit the Template Name if necessary. 
  2. Set or Remove Default Template whenever needed.
  3. If you unchecked the Set Default, you need to set the Template Schedule. Even you can edit the schedule of 'scheduled template' if required.
  4. If you made any changes in Template Info, you must click the save button that is at the end of section.

Figure 2.2 "Template Info"

2.1 View By Location

Admin users can easily review which home page template is currently live on which locations. Clicking the "View by Locations" label will display where the template is currently live.

Figure 2.1.1 "Template live on Location"
As admin users, when you click on it, you can see the list of the "Template Active Locations" along with the Location Date & Time. So, the view by locations will give the clear visibility to you that customers from which region or store location can currently have the access for this scheduled template.

2.2 Designing Area Overview

The Design Area is the central workspace for creating and customizing your online store’s homepage. It provides predefined widgets and sections that can be dragged and dropped to design an engaging layout tailored to your needs.
1. Widgets & Sections
The Design Area offers a variety of widgets and sections to help you create an appealing and user-friendly homepage. You can always add a new section with different Design Layout.

Figure 2.2.1 "Widgets"

2. Adding Sections and Dragging Widgets
  1. Begin by selecting adding the "Section" and selecting "Design Layout".
Figure 2.2.2 "Navigator Sections"
  1. Drag and drop your desired widget (e.g., Single Image, Image Slider) into the section to customize its layout. This drag-and-drop functionality ensures flexibility and ease in arranging widgets.

Figure 2.2.3 "Drag & Drop Widgets"

Custom Navigator

The Navigator is a powerful tool for managing your design efficiently:

  • It provides a structured list of all sections, columns, and rows in the template.
  • You can rearrange elements simply by dragging and dropping sections or specific widgets within the Navigator.
  • Even you can move the custom navigator across overall screen and close it if not required.

Figure 2.2.4 "Custom Navigator"

2.3 Predefined Home Page Template

Predefined Home Page Template allows you to quickly start with a ready-made layout instead of designing the home page from scratch.

Figure 2.3.1 "Predefined Templates"
Upon clicking "Browse Templates", you will see four predefined template thumbnails displayed in the dialog box.
Each thumbnail:
  1. Displays the overall layout structure
  2. Shows widget placements such as Images, Collections, and Text sections
  3. Helps you understand how content will be arranged on the home page
  4. Includes Preview and Apply options

Figure 2.3.2 "Preview & Apply Predefined Template"
Each Predefined Template provides two options:
  1. Preview: The Preview option allows you to view how the selected template will appear on your home page. This helps you review the layout structure, widget positioning, and overall design before making any changes to your existing template.
  2. Apply: Selecting Apply will load the chosen predefined layout into the Design Area.
If a layout already exists, a confirmation message will appear before replacing it. Make sure to review your design before applying, as the previous configuration cannot be restored automatically.
NotesNote: If an existing layout (custom or predefined) is already configured, it will be overwritten and replaced with the selected template structure.
Once a predefined Home Page template is added, you only need to upload images for the image widgets and select the relevant attributes (collection, category, discount, etc.) for each widget.

Info
The process for designing the custom home page using the different widgets and sections is explained in the next KB article: “[3/3] Designing Home Page and Widgets Attributes”