Category Banners for Category Pages

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 toward featured products, collections, or offers, improving visibility and enhancing the shopping experience.  Admins can create banners for parent categories, child categories, or all levels of a category hierarchy, ensuring consistent branding and messaging across the store. 

In this KB article, we’ll guide you how to set up Category Banner and customize the Design.

1. Reaching Category Banner Template

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

Figure 1.1

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 Manage Template Design

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
  4. Step 4: Click the Store Appearance -> Manage Template Design
Note: Whether multi-brand is enabled or disabled, the steps for adding and setting the Category banner will be the same, whether it is globally for standalone store and for each online brand store individually.

2. Category

As admin users/retailers, when you access the 'Page Template Design' module, you will be redirecting to the "All" page templates listing by default having both records of Home Page and Category (if any).
The page has three tabs: 
  1. All: Displays all templates for the selected brand (Home Page + Category banners). 
  2. Homepage: Shows only Home Page templates. 
  3. Category: Shows only Category banners templates. 
For Category Banners, the associated category for banner appears in the Template Type column.

Figure 2.1 Category Banner Listing

2.1 Adding a New Category Banner

To create a new category banner using predefined widgets, click the ADD TEMPLATE button. This action opens a pop-up where you will get the option "Select Template Type."

Figure 2.1.1 Adding Category Page Banner
  1. Options available: Home Page Template | Category Page Template
  2. Choose Category Page Template for adding a banner to a category page.
  3. Enter Template Name: Provide a unique name for the new template.
  4. Pick Category
    ->     Click “Pick Category” to open the category selection pop-up.
    -> Select the "Parent Category" or any "Child Category' for which you want to design a banner.
    -> The selected category will appear in breadcrumb format (e.g., CIGARS > PREMIUM) for easy identification.
  5. Switch: Apply Template to All Child Categories
    1. Enabled: The banner you design will be applied to the selected category and all of its child categories.
    2. Disabled: The banner will apply only to the chosen category, whether it is a Parent, Child, or Child-of-Child category.
  6. After selecting the category and setting your preference, click “Create New Template.”
After clicking "Create New Template", you will be redirected to a preview layout that replicates the actual Category Page from the online store.
Figure 2.1.2 Category Banner Design Layout

Design Area
  1. Use the existing design widgets — the same widgets available in the Home Page Template builder.
  2. Ensure the layout, images, and text fit the look and feel of a header banner for a category view.
Figure 2.1.3 Category Banner Designed


Template Info
This section displays key details about the template, similar to the Home Page Template structure.
Figure 2.1.4 Template Info
  1. Apply Banner Design to All Child (Switch): This switch controls how the banner is applied across the category hierarchy, whether is applied to the selected category and all its child categories, or applies only to the specific category you selected.
Change Category
If you wish to update or change the selected category:
  1. Click the edit icon next to Change Category.
  2. A pop-up will open where you can search or filter categories.
  3. Select the new category from the list.
  4. If the Selected Category Already Has a Banner
  5. If the category already has a banner template assigned, you will receive an error message.
  6. Click “VIEW TEMPLATES” on the message to navigate directly to that category’s existing banner template.
Figure 2.1.5

3. Online Store- Category 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 - [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 ...

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

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