Customize Home Page for Online Store

Customize Home Page for Online Store

Home Page Template Customization

Customize the Online Store's Home Page

The home page of your online store serves as the first impression for your customers. Customizing it effectively can significantly enhance user engagement and drive purchases.
As a store admin, you have the flexibility to design and tailor your store’s home page by adding widgets and configuring product attributes such as Collections, Categories, Discounts, Products, etc.

With predefined widgets, you can create a visually appealing layout to attract customers. Additionally, templates can be scheduled for specific festivals or seasons, ensuring your store is always relevant and timely. If age-restricted products are included, widgets will adhere to compliance guidelines, displaying appropriate content to customers.
By strategically utilizing sections and dragging widgets into them, you can align the design with your business goals, promotional strategies, and customer engagement needs.

In this KB article, we’ll guide you through the process of setting up and designing your store’s home page.

1. Reaching Home Page Template

The Home Page Template placement can be dependent upon whether the retailer has enabled the multi-brand option or not.

1.1 For Standalone Online Store

When the 'multi-brand' option is disabled in the control center, you have only a single online store/site for your business. Follow the below steps to design and set up the ' Home Page Template ':  
  1. Step 1: Log into Store Admin
  2. Step 2: Click Settings -> Store Appearance
  3. Step 3: Click Home Page Template

1.2 For Multiple Online Brand Stores

The store admin user will navigate to the "Page Templates” where the list of templates is added along with the assigned location, scheduled time, status, and actions (ellipsis icon).
  1. Step 1: Log into Store Admin
  2. Step 2: Click Online Brand Stores
  3. Step 3: Click the 'Settings' icon for online brand store

Figure 1.2.1
  1. Step 4: Click the Store Appearance -> Home Page Template

Figure 1.2.2

Note: Whether multi-brand is enabled or disabled, the steps for customizing and setting the Home Page Template globally for standalone store and for each online brand store individually will be the same.

2. Home Page Template

As admin users/retailers, when you access the 'Home Page Template' module, you will see a list of existing templates (if any) displayed in a tabular format with the following column details: 
TEMPLATE NAME | SCHEDULE (TIME IN UTC) | STATUS | DRAFT | ACTION 

Figure 2.1

1. Template Name: Displays the name of the template. The template name that is displayed as Default, that one is currently live.
2. Schedule (Time in UTC): Shows the scheduled time of the template, if applicable. Scheduled templates are used to customize the home pages during specific date ranges, such as Christmas Week, Black Friday Sale, Upselling Items to Clear Stock, etc. 
3. Status: Indicates what the current status of the template.
Live (Default): It means a template is published and live for all the locations (business-level).
Actions: Edit | Duplicate
Live : It means a template is published and live for the specific location(s) assigned for the template. 
Future: It means a template is scheduled for future use for the assigned location(s) to the template. 
Actions: Edit | Delete 
Past: It means a template has already passed the scheduled dates and is currently in no use (unpublished). 
Actions: Edit | Delete | Duplicate
Drafted (with Schedule Date): It means a template is drafted along with the schedule date and is ready to publish. 
Actions: Edit | Delete | Duplicate
4. Draft: The "Draft" column indicates whether changes or updates to a template are saved but pending to be published. This allows you to work on layout modifications without impacting the live home page, so the Live template remain unaffected, as all updates are saved in draft mode until explicitly published.
If changes are made to a template but left unpublished, the "Draft" column will display "Yes", signaling that the latest updates are pending to be published. This ensures clarity and helps users identify templates with unfinalized changes.

5. Action: Provides options to manage templates. The Action options will be depended upon the Template Status.
  1. Edit: Modify the selected home page template. 
  2. Delete: Remove any template. A confirmation pop-up will be asked upon click the Delete option. 
    Note: The default template will not have the Delete option as it cannot be deleted. 
  3. Duplicate: Create a copy of an existing template. This feature allows store admins to easily design and configure widgets without starting from scratch. 
6. Add Template
To create a new home page template, click the "ADD TEMPLATE" button to design and configure a fresh template to meet your needs.

2.1 Adding a New Template

To create a new home page template using predefined widgets, click the ADD TEMPLATE button. This action opens a pop-up where you can fill in the required fields to set up your template.
1. Template Name: Enter a unique name for the template to identify it. i.e. Halloween, Christmas, New Year, etc.Figure 2.1.1
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 2.1.1
3. Template Schedule: Specify the Start Date and End Date for when the template should be active.
  1. Templates with scheduled dates will automatically activate and deactivate based on the specified schedule.
  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. The scheduled published template will be displayed as Future, while expired scheduled template will be displayed as Past.
  3. Note: When the scheduled template is live, the default template's status will be changed to Paused until the schedule template is expired.
4. Time in UTC: All scheduled times are in UTC to ensure consistency across regions.

Figure 2.1.2
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.2 New 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. Design Area
Create your ideal homepage using our intuitive, customizable drag-and-drop interface with a variety of layout options.
  1. You can choose the predefined widgets and elements like Inner Section | Single Image | Image Slider | Collection | Heading | Text Editor. 
  2. You can also 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.
  3. You can easily adjust the layout to suit your needs and design your unique template with flexibility.

Figure 2.2.1
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 edit the schedule of scheduled template if required. Schedule time must be in UTC.
  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.2

2.3 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.3.1 "Widgets"
2. Adding Sections and Dragging Widgets
  1. Begin by selecting adding the "Section" and selecting "Design Layout".

  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.3.2 "Drag & Drop"

3. 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.3.3 "Custom Navigator"

3. Designing Home Page

Designing your homepage is a creative process where you combine predefined widgets and sections to craft a visually appealing and user-friendly layout. The Custom Navigator further enhances this process by providing an organized view of your design, allowing you to easily manage and rearrange for a seamless workflow.

Figure 3.1 "Widgets"
  1. Inner Section: Divides a single section into two columns for flexible layout arrangements. For example, you can combine two Single Images or an Image Slider and a Text Banner within one section.
  2. Single Image Banner: Adds a static image that can be linked to various attributes such as Collection, Category, Product, Discount, or LnS. This is ideal for promoting a specific product or campaign.
  3. Image Slider: A carousel feature that allows you to display multiple images in a slideshow format. Each slide can link to attributes like Collection, Category, Product, Discount, or LnS.
  4. Collection: Displays a grouped set of products or items in a horizontal slider format. Perfect for showcasing collections such as new arrivals, featured products, or seasonal discounts.
  5. Text Heading: Use this widget to add titles, section headers, or important messages. Ideal for guiding customers and drawing attention to specific sections.
  6. Text Editor: A versatile widget for adding detailed descriptions or rich content. You can customize text formatting, making it suitable for adding content like promotions, product descriptions, or company messages.

4. Configuring Widgets

Each widget has its unique setup and configuration options. Depending on your strategy to engage customers—whether through image sliders or banners—you can design and customize widgets for your home page. Designing the home page template with sections and widgets can be tailored to specific events, such as upcoming festivals, seasons, new product launches, or product upselling opportunities. By leveraging creativity and design skills, you can create templates that captivate and engage customers.

4.1 Inner Section

An inner section divides the layout into two columns, allowing for flexible and creative arrangements. This setup is particularly useful for combining multiple widgets.

4.1.1 Drag & Drop Inner Section

Examples of Widget Combinations Using Inner Sections:
- Two Single Images - Single Image/Image Slider and Text Banner - One Collection and a Single Image or Image Slider - Two Different Image Sliders

4.1.2 Widgets Combination for Inner Section

As a retailer or store admin, you can strategically use inner sections to capture customers' attention and enhance their engagement on the home page.

4.2 Single Image

You can easily add a Single Image widget to the design area or an inner section by dragging and dropping it. Once added, a placeholder image will appear by default.
To configure the single image widget, click on the image in the design area to access the configuration settings, which will appear on the left-hand panel.

4.2.1 Single Image Layout Settings

You need to configure the following options for the Single Image.
Image Layout Options:
  1. Image Upload: Upload an image to display as the single image.
  2. Age-Restriction: Toggle this switch to enable or disable age-restriction for the image. If the product image is age-restricted, enable this option.
  3. Link Type: Associate the image with one of the following options (Specify the desired content or navigation target): Collection | Category | Discounts | Products | LNS
  4. Image Link: Set the navigation link for the image. Customers will be redirected to the linked content when they click on the image.
  5. Open in New Tab: Decide how the link opens: Enable: Opens the link in a new tab. Disable: Opens the link in the same tab.
  6. Image Schedule: Enable scheduling for the image if you want it to appear only during a specific timeframe (e.g., weekday sales or back-in-stock promotions). Use this feature to target specific customer needs or time-sensitive campaigns.

4.3 Image Slider

The Image Slider widget allows you to create and display multiple image slides on the home page. You can easily add an Image Slider widget to the design area or an inner section by dragging and dropping it. Once added, a placeholder image will appear by default.
To configure the Image Slider widget, click on the image in the design area to access the configuration settings, which will appear on the left-hand panel.


4.3.1 Single Image Layout Settings
You need to configure the following options for the Image Slider.
Image Layout options will be the similar that are explained for the Single Image widget [4.2]
Slide Content:
  1. Title: Add a main title to the slide to grab the viewer's attention.
  2. Subtitle: Include a subtitle for additional context or supporting information.
  3. Button Label: Add a call-to-action (CTA) button text. Example: "Buy Now," "Grab It”
  4. Button type link: Link the image to one of the following options: Collection | Category | Discounts | Products | LNS Choose the desired option to associate the image with relevant content or navigation.
  5. Image link: Set a navigation link for the image based on the selected option, allowing users to be redirected directly to the linked content when they click on the image.
  6. Open in New Tab: Toggle this option to determine how the link opens: Enable: Opens the link in a new tab. Disable: Opens the link in the same tab.
Positioning: Adjust the position of the title, subtitle, button, and other elements on the slide. Options include aligning the content to the left, center, or right, as well as setting it to the top, middle, or bottom of the slide.
Image Overlay: The user can set opacity in % as per the requirement.

Slider Layout Options:
Layout: Define the arrangement of slides (e.g., full-width or boxed).
Infinite: Enable infinite looping to ensure the slider continuously cycles through all slides.
Auto Rotate: Activate automatic rotation of slides.
Change Slides Every (secs): Set the duration (in seconds) for each slide to stay visible before switching to the next.
Show Arrow: Enable navigation arrows to allow customers to manually scroll through slides.
Show Navigation: Add dots or indicators below the slider for easy navigation between slides.

4.3.2 Slide Content Layout

IdeaDesign the Image for the Single Image and Image Slider widgets with a simple background in certain areas to ensure the content is easily readable and does not overlap with intricate designs.

4.4 Collection Widget

The Collection widget allows you to display a horizontal scrolling view of items. You can select a collection attribute that has been configured on the Control Center side. The items associated with the selected collection will appear in a horizontally scrollable format, enabling customers to easily browse through grouped products on your home page.

4.4.1 Collection Widget Settings
  1. Title: The user can give a title of this collection
  2. Age-restriction: Enable or disable the switch based on the collection. If the collection is age-restricted, toggle the switch to "Enable."
  3. Select Collection: The user can select the collection they want to display.
  4. Collection Schedule: The user wants to see the collection on specific period, then enable the switch and schedule the time, so the collection will be showing on this specific period.

4.5 Text Heading & Text Editor

Text Heading Widget
The Text Heading widget is perfect for adding titles or introductory text to complement the detailed content in the Text Editor. Use it to highlight section headers, emphasize key points, or provide context for the information displayed in the Text Editor. This ensures your home page looks structured and organized.
The user can adjust the text size by selecting the appropriate HTML tag, such as <h1>, <h2>, <h3>, etc., based on the desired heading level and text hierarchy. 
Text Editor Widget
The Text Editor widget allows you to provide detailed descriptions or content within a section. It's versatile and can be used to:
Explain product usage | Announce upcoming items | Share promotional or informational content.

4.5.1 Text Heading & Editor settings

Content & Style Options
Customize both widgets to match your design vision:
  1. Position & Alignment: Adjust the position and alignment of the text to fit your layout perfectly.
  2. Colors: Use the preset color picker to choose the ideal color for your Text Heading and Text Editor, ensuring consistency with your design theme.
  3. Typography: Style the text using preset typography options, allowing you to create a visually appealing and readable design.

5. Actions & Editing Options for Template

You can save the home page template that you have setup and configured so far but you can make publish later. The Home Page template provides three options for saving and managing your work:
  1. Save: This option allows you to save the current changes to the template without taking any further action. It ensures that your progress is preserved.
  2. Save and Preview: This option saves your current changes and immediately lets you preview how they will appear on the Home Page. It offers a way to see your updates in real-time before finalizing them.
  3. Save and Close: This option saves your changes and closes the template editor. It lets you finalize your work and return to the previous screen or dashboard.
  4. Publish: Selecting this option saves your changes and immediately publishes them to the live Home Page. This makes the updates visible to users or visitors.
Additionally, the template editor includes the following tools to enhance your customization:
  1. Preview: This allows you to preview your current template without making any permanent changes, giving you a sneak peek of how it will look on the live page.
  2. Undo: This option lets you undo the most recent change made in the template, providing a way to revert back to previous edits.
  3. Redo: If you've undone a change, the Redo option lets you reapply the last undone action.
  4. Navigator: The Navigator helps you easily navigate through different sections of the template, providing quick access to various parts of the layout.
  5. Hide Clutter: This option hides unnecessary elements in the editor interface, providing a cleaner and more focused workspace while designing the Home Page template.

5.1 Editing Options

6. Online Store- Home Page

Once you publish the home page template, customers interact with the home page of the online store or app based on your designed and customized templates. 

Note for Collection Widget Interaction: 
If more items are listed for the selected Link Type (e.g., Collection, Category, or Discount), customers will be able to browse through the items using horizontal scrolling.

Age-Restricted Content: 
Widgets containing age-restricted items will only be visible to customers who have completed age verification. For customers who are not age-verified, these widgets with age-restriction items will remain hidden, ensuring compliance with age-restriction guidelines. 


Banner, Single Image, and Text Banner Widgets: 
If a customer clicks a button on these widgets, redirection behavior depends on the 'Open in New Tab' setting: 
  1. Enabled: Clicking the button opens the linked attributes (category, collection, discount, product, or Lns) in a new browser tab. 
  2. Disabled: The linked page opens in the same tab, replacing the current page. 
Widget Scheduling:
Widgets scheduled for specific timeframes will only be displayed during the active period set in the template.  Once the schedule expires, the widget will automatically be hidden from the home page, ensuring it is no longer visible to customers. 

The Home Page Template feature empowers you to design and customize an engaging and user-friendly homepage using versatile widgets and sections and you can create a dynamic shopping experience that aligns with your business goals and captivates your customers.

    • Related Articles

    • Manage Online Store Settings

      Manage Online Store Settings Settings -> Global Settings -> "Other Settings" (Product, Cart, and Checkout Settings) As a retailer, you can customize the features and restrictions about products, carts, and checkout pages to tailor the shopping ...

    • Setting Up Disclaimer for an Online Store

      Manage Disclaimers "Prevent customers from navigating to online store (E-commerce site/Mobile App) without accepting disclaimer" As an admin user, you can add disclaimer records to ensure that your customers are well-informed and understand any ...

    • Setting up Store Pickup for Location

      Setting up 'Store Pickup' for Locations (Stores) "Store Pickup" fulfillment offers retailers (for store admin) the flexibility of Order Pickup options for specific locations independently, down to the individual location level. Retailers have the ...

    • Setting up a Footer for an Online Store

      Setting up a Footer for an Online Store The footer section of an e-commerce site (online store) is essential for providing additional information, navigation links, and customer contact details. FTx Commerce provides the features to let the business ...

    • Customer Support for an Online Store

      Customer Support for an Online Store Effective customer support is essential for building trust and loyalty with your customers. By customizing the customer support page and providing easy access to legal policies, you can enhance the overall ...