Customize Home Page - [3/3] Designing Home Page and Widgets Attributes

Customize Home Page - [3/3] Designing Home Page and Widgets Attributes

Designing Home Page Template

[3/3] Designing Home Page using different Widgets & Attributes

The process of creating a Home Page Template, including sections and layout design, is explained in the previous KB article “[2/3] Creating a Template.” This article explains how to design a custom home page using widgets, sections, and inner sections, along with configuring widget schedules.

1. 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.

2. 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.

2.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.

2.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

2.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.

2.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.

2.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 | CMS Page | External Link | 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 or specific days with recurring without end date (e.g., weekday sales, deal of the day, or back-in-stock promotions). Use this feature to target specific customer needs or time-sensitive campaigns.

2.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.


2.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 | CMS Page | External Link | 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:
  1. Layout: Define the arrangement of slides (e.g., full-width or boxed).
  2. Infinite: Enable infinite looping to ensure the slider continuously cycles through all slides.
  3. Auto Rotate: Activate automatic rotation of slides.
  4. Change Slides Every (secs): Set the duration (in seconds) for each slide to stay visible before switching to the next.
  5. Show Arrow: Enable navigation arrows to allow customers to manually scroll through slides.
  6. Show Navigation: Add dots or indicators below the slider for easy navigation between slides.

2.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.

2.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.

2.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.

2.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.

2.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.

2.6 Day-wise Widget Schedule

"Customize Widget Visibility on Specific Days and for Recurring Promotions"
Widgets on your online store’s home page are powerful tools to showcase products, promotions, and collections. To make your campaigns more effective, you can now configure widgets to appear only on selected days of the week and even set them to repeat automatically without an end date.

2.6.1 "No End Date- Infinite"

You can now configure a widget to:

- Show only on selected weekdays (e.g., Monday, Wednesday, Friday)

- Run automatically every week without having to reschedule manually

- Continue indefinitely if needed until it's manually stopped or changed

2.6.2 "Day-wise Widget Selection"

3. 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

4. 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. 

Quote
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

    • 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 ...

    • Customize Home Page - [1/3] Overview & Info

      Home Page Template Customization [1/3] Customize the Online Store's Home Page - Overview The home page of your online store serves as the first impression for your customers. Customizing it effectively can significantly enhance user engagement and ...

    • Category Banners for Category Pages

      Category Banners for Category Pages Customize the Category Banner for Each Category Level Category Banners help engage customers by highlighting key content, promotions, or visuals at the top of each category page. Custom designed banners guide users ...

    • Manage Online Store Settings

      Manage Online Store Settings Settings -> General -> "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 experience for ...

    • 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 ...