Sign Up
  1. Znode
  2. Solution home
  3. Content Management (CMS) - V10
  4. Znode Page Builder

Page Builder - Znode Widgets

TABLE OF CONTENTS

Overview

  • Page Builder widgets and components allow Administrators to create engaging Storefront experiences using dynamic content, promotional banners, product collections, category displays, navigation links, forms, media assets, and marketing content. Each component serves a specific purpose and can be configured directly within the Visual Editor or through content managed in the Admin Console.
  • This article describes the available Page Builder components, configuration options, and expected Storefront behavior.

Banner Slider

  • The Banner Slider component allows Administrators to display rotating banner content on a Storefront page. Banner sliders are commonly used to promote campaigns, featured products, seasonal offers, announcements, and other marketing initiatives.
  • Banner Slider content is sourced from banner sliders configured in the Admin Console.

Initial Component Behavior

  • When the Banner Slider component is added to a page and no banner slider has been selected, the following message is displayed:
  • The Banner Slider widget has no content. Configure the widget by selecting the settings icon in the toolbar. If the data is already configured, publish the page to reflect the changes.
  • This message indicates that a banner slider must be configured before content can be displayed.


Configure a Banner Slider

Step 1: Add the Banner Slider Component

  • Drag the Banner Slider component onto the page.
  • Place the component in the desired location.

Expected Result -The component is added to the page.

Step 2: Open the Configuration

  • Select the Banner Slider component.
  • Open the component settings.

Expected Result

  • The Configure - Banner Slider window opens.
  • Available options include:
    • Select Banner
    • Save
    • Back


Step 3: Select a Banner Slider

  • Open the Select Banner list.
  • Select a banner slider.

Expected Result

  • The selected banner slider is assigned to the component.
 

Step 4: Save the Configuration

  • Select Save.

Expected Result - The banner slider is associated with the component and appears in the page preview.

Step 5: Publish the Page

  1. Save the page.
  2. Publish the page.

Expected Result

The Banner Slider appears on the Storefront.

  • Scroll Axis
    • Controls the direction of banner movement.
    • Options
      • Horizontal
      • Vertical
  • Thumbnails
    • Displays banner thumbnails beneath the slider.
    • Options
      • Yes
      • No
  • Arrows
    • Displays navigation arrows.
    • Options
      • Yes
      • No
  • Start From Selected Item
    • Specifies the slide displayed when the slider loads.
  • Infinite Loop
    • Determines whether banner rotation continues indefinitely.
    • Options
      • Yes
      • No
  • Interval (ms)
    • Determines how long a banner remains visible before changing.
    • Examples
      • 3000 = 3 seconds
      • 5000 = 5 seconds
  • Indicators
    • Displays slide indicators.
    • Options
      • Yes
      • No
  • Auto Play
    • Determines whether banners rotate automatically.
    • Options
      • Yes
      • No
  • Transition Time (ms)
    • Defines the animation duration when moving between slides.
  • Swipe Scroll Tolerance
    • Controls swipe sensitivity on touch-enabled devices.
  • Pagination
    • Displays pagination information.
    • Options
      • Yes
      • No
  • Stop On Hover
    • Pauses automatic rotation while the cursor is positioned over the banner.
    • Options
      • Yes
      • No
  • Swipeable
    • Enables swipe navigation.
    • Options
      • Yes
      • No
  • Use Keyboard Arrow
    • Enables keyboard navigation.
    • Options
      • Yes
      • No
  • Emulate Touch
    • Enables touch-style interactions on supported devices.
  • Auto Focus
    • Automatically applies focus to the slider when active.

Offer Banner

The Offer Banner component allows Administrators to display multiple banner slides horizontally within a single row on a Storefront page. Each banner slide is presented as an individual card or content block, making the component ideal for displaying promotions, featured campaigns, seasonal offers, announcements, and marketing content in a compact format.

Initial Component Behavior

When the Offer Banner component is added to a page and no banner slider has been selected, the following message is displayed: 

The Offer Banner widget has no content. Configure the widget by selecting the settings icon in the toolbar. If the data is already configured, publish the page to reflect the changes. 

This message indicates that a banner slider must be associated with the component before content can be displayed.

Configure an Offer Banner

Step 1: Add the Offer Banner Component

  • Open the page in the Visual Editor. 
  • Locate the Offer Banner component in the component list. 
  • Drag the component onto the page. 
  • Place the component in the desired location. 

Expected Result - The Offer Banner component is added to the page. If no banner slider is selected, the default configuration message is displayed. 

 

Step 2: Open the Offer Banner Configuration

  • Select the Offer Banner component within the page preview. 
  • Open the component settings. 

Expected Result  - The Configure - Offer Banner window opens. 

The configuration window contains: 

  • Select Slider dropdown 
  • Save button 
  • Back button 

  

Step 3: Select a Banner Slider

  • Open the Select Slider dropdown. 
  • Review the available banner sliders. 

Expected Result - A list of banner sliders configured in the Znode Admin Console is displayed. 

  • Select the desired banner slider. 

Step 4: Save the Configuration

  • Select Save. 

Expected Result - The selected banner slider is associated with the Offer Banner component. 

  • Review the page preview.

Step 5: Publish the Page

  • Save the page.
  • Publish the page.

Expected Result 

  • The Offer Banner is displayed on the Storefront. 
  • The configured banner slides are visible to Buyers. 

Offer Banner Attributes

The Offer Banner component includes several attributes that control how banner cards are displayed on the Storefront. 

  • Card Space 
    • Defines the amount of spacing displayed between banner cards. 
    • Usage 
      • Increase the value to create more separation between banner cards. 
      • Decrease the value to display banner cards closer together. 
    • Example 
      • Card Space = 50 
      • Creates a larger gap between banner cards than a lower value. 
    • Expected Result 
      • The spacing between banner cards reflects the configured value. 
  • Slides Per View 
    • Controls the maximum number of banner cards visible within the Offer Banner component at one time. 
    • Usage 
      • Use smaller values to emphasize individual banners. 
      • Use larger values to display more promotional content simultaneously. 
    • Example 
      • Slides Per View = 2 
      • Displays two banner cards within the visible portion of the carousel. 
    • Expected Result 
      • The number of visible banner cards matches the configured value. 
  • Navigation Enable 
    • Controls whether navigation arrows are displayed. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Enable navigation arrows when Buyers should be able to move through banner cards using arrow controls. 
    • Expected Result 
      • When enabled, navigation arrows are displayed. 
      • When disabled, navigation arrows are hidden. 
  • Indicators 
    • Controls the visibility of pagination indicators. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Indicators provide Buyers with information about: 
      • The total number of available carousel slides. 
    • Expected Result 
      • Pagination indicators are displayed when enabled. 
      • Pagination indicators are hidden when disabled. 
  • Grid Enable 
    • Controls whether banner cards are displayed in a grid layout. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Yes -Displays banner cards using a grid-style layout. 
        • Allows multiple rows of banner cards where supported by the page layout. 
        • Provides greater content density within the component. 
      • No 
        • Displays banner cards using a traditional horizontal carousel layout. 
        • Maintains a single-row scrolling experience. 
    • Expected Result 
      • Banner cards display according to the selected layout option. 

Category Carousel

The Categories Carousel component allows Administrators to display a horizontal, scrollable collection of categories on a Storefront page. Categories can be associated with the component and displayed using a carousel or grid-style layout, giving Buyers quick access to featured, promotional, seasonal, or high-priority product categories.

Initial Component Behavior

When the Categories Carousel component is added to a page and no categories have been associated, the following message is displayed: 

The Categories Carousel widget has no content. Configure the widget by selecting the settings icon in the toolbar. If the data is already configured, publish the page to reflect the changes. 

This message indicates that categories must be associated with the component before content can be displayed. 

 

  • Drag the Categories Carousel component from the component list onto the page. 
  • Place the component in the desired location. 

Expected Result- The component is added to the page and displays the default configuration message when no categories have been associated. 

  1. Select the Categories Carousel component in the page preview. 
  1. Open the component settings. 

Expected Result- The Configure - Category List window opens and displays any currently associated categories.

 

Step 3: Review Existing Category Associations

The configuration window provides the following options: 

  • Associated category list 
  • Search field 
  • Filter options 

Search Categories - Enter a category name or keyword in the search field. 

Filter Categories - Apply one or more filters.

  

Step 4: Associate Categories 

  • Select Associate Category. 

Expected Result  

  • The Associate Category window opens. 
  • The window contains: 
    • Search field 
    • Filter options 
    • System Views 
    • Configurable columns 
    • Available category list 

 

Step 5: Select Categories

  • Locate categories using: 
    • Search 
    • Filters 
    • Available system views 
  • Select one or more categories using the selection boxes. 

Expected Result - The selected categories are marked for association. 

Step 6: Save Category Associations

  • Select Save. 

Expected Result- The selected categories are associated with the Categories Carousel component. 

The user is returned to the Configure - Category List window.  

Step 7: Publish Changes 

  • Publish the page. 

Expected Result- The associated categories are displayed in the Categories Carousel on the Storefront. 

The Categories Carousel component includes the following configurable attributes. 

  • Card Space 
    • Defines the amount of spacing between category cards. 
    • Usage 
      • Increase the value to create more separation between category cards. 
      • Decrease the value to display category cards closer together. 
    • Example 
      • Card Space = 10 
      • Applies minimal spacing between category cards. 
    • Expected Result 
      • The spacing between category cards reflects the configured value. 
  • Max Cards Per View 
    • Controls the maximum number of category cards displayed within the visible carousel area at one time. 
    • Usage 
      • Use lower values to emphasize individual categories. 
      • Use higher values to display more categories simultaneously. 
    • Example 
      • Max Cards Per View = 5 
      • Displays up to five category cards within the visible area of the carousel. 
    • Expected Result 
      • The number of visible category cards reflects the configured value. 
  • Navigation Enable 
    • Controls whether carousel navigation arrows are displayed. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Enable navigation arrows when Buyers should be able to move through category cards using arrow controls. 
    • Expected Result 
      • Navigation arrows are displayed when enabled. 
      • Navigation arrows are hidden when disabled. 
  • Indicators 
    • Controls the visibility of pagination indicators. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Indicators help Buyers understand: 
      • The number of available carousel slides. 
      • Their current position within the carousel. 
    • Expected Result 
      • Pagination indicators are displayed when enabled. 
      • Pagination indicators are hidden when disabled. 
  • Grid Enable 
    • Controls whether categories are displayed using a grid layout. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Yes 
        • Displays categories in a grid-style layout. 
        • Allows additional category cards to be visible within the component area. 
        • Provides a more compact presentation for large category collections. 
      • No 
        • Displays categories using a traditional horizontal carousel layout. 
        • Maintains a single-row scrolling experience. 
      • Expected Result 
        • Categories are displayed according to the selected layout option. 

Product Carousel 

The Product Carousel component allows Administrators to display a horizontal, scrollable collection of products on a Storefront page. Products are displayed as individual product cards and can be configured to appear in either a carousel or grid-based layout. 

The Product Carousel is commonly used to showcase featured products, best sellers, new arrivals, seasonal products, promotional items, and strategically marketed product collections. 

Initial Component Behavior 

When the Product Carousel component is added to a page and no products have been associated, the following message is displayed: 

The Products Carousel widget has no content. Configure the widget by selecting the settings icon in the toolbar. If the data is already configured, publish the page to reflect the changes. 

This message indicates that products must be associated with the component before content can be displayed. 

 

Configure a Product Carousel 

Associate Products with the Carousel 

  • Add the Product Carousel component to a page. 
  • Select the component from the page preview. 
  • Open the component settings.  

Expected Result - The Configure - Product List window opens and displays currently associated products. 

 

Step 2: Review Associated Products 

The configuration window includes: 

  • List of associated products 
  • Search field 
  • Filter options  

Search Products - Enter a product name, SKU, or keyword in the search field. 

Filter Products - Apply one or more filters. 

 

Step 3: Open Product Association 

  • Select Associate Product. 

Expected Result - The Associate Product window opens. 

Step 4: Select Products 

The Associate Product window contains: 

  • Search field 
  • Filter options 
  • System Views 
  • Configurable columns 
  • Product list 
Locate products using: 
  • Search 
  • Filters
  • System Views 
  • Select one or more products using the corresponding selection boxes. 

Expected Result - Selected products are marked for association. 

Step 5: Save Product Associations 

  • Select Save. 

Expected Result 

The selected products are associated with the Product Carousel component. 

The user is returned to the Configure - Product List window.  

Step 6: Publish Changes 

  • Publish the page. 

Expected Result - The selected products appear in the Product Carousel on the Storefront. 

The Product Carousel component includes the following configurable attributes. 

  • Card Space 
    • Defines the spacing between product cards displayed within the carousel. 
    • Usage 
      • Increase the value to create additional spacing between product cards. 
      • Decrease the value to display product cards closer together. 
    • Example 
      • Card Space = 10 
      • Creates a smaller gap between product cards than a higher value such as 50. 
    • Expected Result 
      • The spacing between product cards reflects the configured value. 
  • Max Cards Per View 
    • Controls the maximum number of product cards displayed within the visible carousel area at one time. 
    • Usage 
      • Use lower values to emphasize individual products. 
      • Use higher values to display more products simultaneously. 
    • Example 
      • Max Cards Per View = 5 
      • Displays up to five product cards within the visible carousel area. 
    • Expected Result 
      • The number of visible product cards matches the configured value. 
  • Navigation Enable 
    • Controls whether carousel navigation arrows are displayed. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Enable navigation arrows when Buyers should be able to browse products using carousel controls. 
    • Expected Result 
      • Navigation arrows are displayed when enabled. 
      • Navigation arrows are hidden when disabled. 
  • Indicators 
    • Controls the visibility of pagination indicators. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Indicators help Buyers understand: 
      • The total number of carousel slides. 
      • The current position within the carousel. 
    • Expected Result 
      • Pagination indicators are displayed when enabled. 
      • Pagination indicators are hidden when disabled. 
  • Grid Enable 
    • Controls whether products are displayed using a grid layout. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Yes 
        • Displays products in a grid-style layout. 
        • Allows more products to be visible within the component area. 
        • Provides a compact display for larger product selections. 
      • No 
        • Displays products using a traditional horizontal carousel layout. 
        • Maintains a single-row scrolling experience. 
    • Expected Result 
      • Products are displayed according to the selected layout option.  

Brands Carousel

The Brand Carousel component allows Administrators to display a horizontal, scrollable collection of brands on a Storefront page. Associated brands are displayed as individual brand cards that Buyers can browse using carousel navigation controls. 

The component supports several display options, allowing Administrators to control brand name visibility, spacing, navigation controls, pagination indicators, grid layouts, and the number of brand cards shown at one time. 

Initial Component Behavior

When the Brand Carousel component is added to a page and no brands have been associated, the following message is displayed: 

The "Brand Carousel" widget has no content. Configure the widget by selecting the settings icon in the toolbar. If the data is already configured, publish the page to reflect the changes. 

This message indicates that brands must be associated with the component before content can be displayed. 

 

Associate Brands with the Carousel 

  • Add the Brand Carousel component to a page. 
  • Select the component from the page preview. 
  • Open the component settings. 

Expected Result - The Configure - Brand List window opens and displays any currently associated brands. 

Step 2: Review Associated Brands

The configuration window includes: 

  • Associated brand list 
  • Search field 
  • Filter options  

Search Brands -Enter a brand name or keyword in the search field. 

Filter Brands- Apply available filters. 

Step 3: Associate Brands

  • Select Associate Brand. 

Expected Result 

  • The Associate Brand window opens. 
  • The association window contains: 
    • Search field 
    • Filter options 
    • System Views 
    • Configurable columns 
    • Brand list 

Step 4: Select Brands 

  • Locate the desired brands using: 
    • Search 
    • Filters 
    • System Views 
  • Select one or more brands by selecting the corresponding checkboxes. 
  • Expected Result - Selected brands are marked for association. 

Step 5: Save Brand Associations 

  • Select Save. 

Expected Result - The selected brands are associated with the Brand Carousel component. 

The user is returned to the Configure - Brand List window. 

Step 6: Publish Changes 

  • Publish the page. 

Expected Result - The selected brands appear in the Brand Carousel on the Storefront. 

The Brand Carousel component includes the following configurable attributes. 

  • Hide Brand Names 
    • Controls whether brand names are displayed together with brand logos or images. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • No (Default) 
        • Displays both the brand logo/image and the brand name. 
      • Yes 
        • Displays only the brand logo or image. 
        • Hides the brand name from the carousel. 
  • Card Space 
    • Defines the spacing between brand cards displayed within the carousel. 
    • Usage 
      • Increase the value to create greater separation between brand cards. 
      • Decrease the value to display brand cards closer together. 
    • Example 
      • Card Space = 10 
      • Creates a smaller gap between brand cards compared to larger values. 
    • Expected Result 
      • The spacing between brand cards reflects the configured value. 
  • Max Cards Per View 
    • Controls the maximum number of brand cards displayed within the visible carousel area at one time. 
    • Usage 
      • Use lower values to emphasize individual brands. 
      • Use higher values to display more brands simultaneously. 
    • Example 
      • Max Cards Per View = 5 
      • Displays up to five brand cards within the visible carousel area. 
    • Expected Result 
      • The number of visible brand cards matches the configured value. 
  • Navigation Enable 
    • Controls whether carousel navigation arrows are displayed. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Enable navigation controls when Buyers should be able to move through the brand carousel using arrow navigation. 
    • Expected Result 
      • Navigation arrows are displayed when enabled. 
      • Navigation arrows are hidden when disabled. 
  • Indicators 
    • Controls the visibility of pagination indicators. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Indicators provide Buyers with visual feedback regarding: 
      • The total number of available carousel slides. 
      • The current position within the carousel. 
    • Expected Result 
      • Pagination indicators are displayed when enabled. 
      • Pagination indicators are hidden when disabled. 
  • Grid Enable 
    • Controls whether brands are displayed in a grid layout. 
    • Available Options 
      • Yes 
      • No 
    • Usage 
      • Yes 
        • Displays brands in a grid-style layout. 
        • Allows more brands to appear within the available display area. 
        • Provides a compact presentation for larger brand collections. 
      • No 
        • Displays brands in a traditional horizontal carousel layout. 
        • Maintains a single-row scrolling experience. 
    • Expected Result 
      • Brand cards are displayed according to the selected layout option. 

Ad Space

The Ad Space component allows Administrators to display advertising content configured in the Znode Admin Console directly on a Storefront page. The component automatically renders the Ad Space content and settings maintained in Znode without requiring any additional configuration within Page Builder. 

Component Behavior

The component displays the advertisement configured for the Ad Space in the Znode Admin Console. 

If an Ad Space has not been configured, the component displays the following message: 

Please check if the Ad Space container is configured. If it is already configured, publish the page to reflect the changes. 

 

 

Add an Ad Space to a Page

Step 1: Add the Ad Space Component

  • Open the desired page in the Visual Editor. 
  • Locate the Ad Space component in the component list. 
  • Drag the component onto the page. 
  • Place the component in the desired location within the page layout. 

Expected Result 

  • The Ad Space component is added to the page. 
  • If Ad Space content has already been configured and published, the advertisement is displayed within the page preview. 

Step 2: Save and Publish the Page

  • Publish the page.

Expected Result 

  • The configured advertisement is displayed on the Storefront. 
  • Any content configured for the associated Ad Space is rendered automatically.  

Homepage Promo

The Home Page Promo component allows Administrators to display promotional content configured in the Znode Admin Console directly on a Storefront page. The component automatically inherits all content and display settings defined for the Home Page Promo configuration and does not require any additional configuration within Page Builder. 

Initial Component Behavior

The Home Page Promo component does not require any widget-level configuration within the Visual Editor. 

When the Home Page Promo component is added to a page: 

  • Drag the Home Page Promo component from the component list onto the page. 
  • Place the component in the desired location. 

If Home Page Promo content has not been configured or published, the following message is displayed: 

Please check if the Homepage Promo container is configured.If it is already configured, publish the page to reflect the changes. 

 

 

Add a Home Page Promo to a Page

Step 1: Add the Component

  • Open the desired page in the Visual Editor. 
  • Locate the Home Page Promo component in the component list. 
  • Drag the component onto the page. 
  • Place the component in the desired location within the page layout. 

Expected Result- The Home Page Promo component is added to the page and displays the configured promotional content if a Home Page Promo configuration exists.  

Step 2: Save and Publish the Page

  • Publish the page. 

Expected Result - The Home Page Promo content is displayed on the Storefront using the configuration defined in the Znode Admin Console. 


Image Widget

The Image Widget allows Administrators to add images to a Storefront page. Images can be used to display promotional banners, advertisements, featured products, brand messaging, category navigation, marketing content, and other visual elements. 

Initial Component Behavior

When the Image Widget is added to a page and no image has been selected, the following message is displayed: 

No image has been added to this widget yet. Please use the "Select Image" attribute to upload an image. 

This message indicates that an image must be selected before content can be displayed within the widget. 

 

Add an Image to a Page

Step 1: Add the Image Widget

  • Open the page in the Visual Editor. 

  • Locate the Image Widget in the component list. 
  • Drag the widget onto the page. 
  • Place the widget in the desired location. 

Expected Result -The widget is added to the page and displays the default message when no image has been selected. 

Step 2: Select an Image

  • Select the Image Widget within the page preview. 
  • Locate the Select Image attribute. 
  • Select Select Image. 

Expected Result  - The Media Library opens. 

  • Browse or search for the desired image. 
  • Select the image. 

Expected Result - The selected image is associated with the widget and displayed in the page preview.  

Image Widget Attributes

The Image Widget includes the following configurable attributes. 

  • Select Image 
    • Allows an image to be selected from the Media Library. 
    • Usage 
      • Select Select Image. 
      • Browse the Media Library. 
      • Choose the desired image. 
    • Expected Result 
      • The selected image is assigned to the widget and displayed within the page preview. 
    • Notes 
      • Existing images can be replaced by selecting a different image from the Media Library. 
      • Only images available in the Media Library can be selected. 
  • Alt 
    • Defines alternative text (Alt Text) for the image. 
    • Usage 
      • Enter a meaningful description of the image. 
    • Example 
      • Featured Spring Collection Banner 
    • Expected Result 
      • Alternative text is associated with the image and available to assistive technologies. 
  • Link URL 
    • Associates a URL with the image. 
    • Usage 
      • Enter a valid URL. 
      • Save the widget configuration. 
    • Expected Result 
      • When Buyers select the image, they are redirected to the configured URL. 
  • Target 
    • Determines how the linked URL opens when the image is selected. 
    • Available Options 
      • Same Tab 
        • Opens the destination URL within the current browser tab. 
      • New Tab 
        • Opens the destination URL in a new browser tab. 
  • Layout 
    • Controls how the image is displayed within the widget. 
    • Available Options 
      • Fixed 
      • Responsive 
      • Full Width 
  • Width 
    • Defines the image width. 
    • Usage 
      • Enter the desired width value. 
    • Expected Result 
      • The image width updates according to the configured value. 
  • Height 
    • Defines the image height. 
    • Usage 
      • Enter the desired height value. 
    • Expected Result 
      • The image height updates according to the configured value. 
  • Alignment 
    • Controls the horizontal alignment of the image within its container. 
    • Available Options 
      • Left 
      • Center 
      • Right 
    • Usage 
      • Select the alignment option that best supports the page layout. 
  • Border Radius 
    • Controls the roundness of the image corners. 
    • Usage 
      • Enter a border radius value. 
      • Lower values create subtle corner rounding. 
      • Higher values create rounded or circular effects. 
    • Examples 

Border Radius Value 

Result 

0px 

Square corners 

10px 

Slightly rounded corners 

25px 

Highly rounded corners 

50% 

Circular appearance (for square images) 

  • Expected Result - The image corners display according to the configured border radius value.

Video Widget

The Video Widget allows Administrators to add video content to a Storefront page. Videos can be used to showcase products, support marketing campaigns, provide instructional content, deliver brand messaging, and increase customer engagement through rich media. 

Initial Component Behavior

When the Video Widget is added to a page and no video has been selected, the following message is displayed: 

No Video has been added to this widget yet. Please use the "Select Video" attribute to upload a Video. 

This message indicates that a video must be selected before content can be displayed. 

 

 

Video Widget Attributes

The Video Widget includes the following configurable attributes. 

  • Select Video 
    • Allows Administrators to select a video from the Media Library. 
    • Usage 
      • Select Video. 
      • Browse available videos in the Media Library. 
      • Choose the desired video. 
    • Expected Result 
      • The selected video is displayed within the widget preview. 
    • Notes 
      • Existing videos can be replaced by selecting a different video from the Media Library. 
      • Only videos available in the Media Library can be selected. 
  • Video Control 
    • Controls whether video playback controls are available to Buyers. 
    • Available Options 
      • Enable 
      • Disable 
    • Usage 
      • Enable 
        • Displays standard video playback controls 
      • Disable 
        • Hides standard video playback controls from Buyers. 
  • Auto Play 
    • Controls whether the video automatically begins playing when the page loads. 
    • Available Options 
      • Enable 
      • Disable 
    • Usage 
      • Enable - The video automatically begins playback when the page loads. 
      • Disable- Buyers must manually start video playback.  

Newsletter Widget

The Newsletter Widget allows Administrators to add a newsletter subscription form anywhere on a Storefront page. The widget is designed to capture Buyer email addresses for marketing, promotional communications, and newsletter distribution. 

Initial Component Behavior

When the Newsletter Widget is added to a page, a newsletter subscription form is displayed using the default configuration. 

The widget includes: 

  • Newsletter label 
  • Email address input field 
  • Subscription button 

Expected Result 

A newsletter signup form is displayed in the page preview and can be configured using widget attributes. 

Add a Newsletter Widget to a Page 

Step 1: Add the Newsletter Widget 

  • Open the page in the Visual Editor. 
  • Locate the Newsletter Widget in the component list. 
  • Drag the widget onto the page. 
  • Place the widget in the desired location. 

Expected Result - The Newsletter Widget is added to the page and displays the default newsletter subscription form. 

Step 2: Configure the Widget 

  • Select the Newsletter Widget in the page preview. 
  • Configure the available widget attributes. 

Expected Result- The newsletter form updates according to the configured values. 

Step 3: Save and Publish the Page 

  1. Publish the page. 

Expected Result- The configured newsletter subscription form is displayed on the Storefront.  

Newsletter Widget Attributes 

The Newsletter Widget includes the following configurable attributes. 

  • Label 
    • Defines the heading or label displayed above or beside the email input field. 
    • Default Value The widget includes a prefilled label value. 
    • Usage 
      • Administrators can modify the label to match Storefront messaging. 
    • Example 
      • Sign Up for Email Updates 
      • Subscribe to Our Newsletter 
    • Expected Result
      • The configured label is displayed within the newsletter signup form. 
  • Placeholder 
    • Defines the placeholder text displayed inside the email address field. 
    • Default Value 
      • The widget includes prefilled placeholder text. 
    • Usage 
      • The placeholder text guides Buyers by indicating the expected input. 
    • Example 
      • Your Email Address 
      • Enter Email Address 
  • Button Text 
    • Defines the text displayed on the subscription button. 
    • Default Value 
      • A prefilled button value is provided. 
    • Usage 
      • Administrators can customize the button text to match marketing requirements. 
    • Example 
      • Join 
      • Subscribe 
  • Align 
    • Controls the alignment of the newsletter content within the widget container. 
    • Available Options 
      • Left 
      • Center 
      • Right 
    • Usage 
      • Left - Aligns the newsletter form to the left side of the container. 
      • Center-Centers the newsletter form within the container. 
      • Right -Aligns the newsletter form to the right side of the container. 
    • Expected Result 
      • The newsletter widget is positioned according to the selected alignment. 
  • Padding 
    • Controls the internal spacing within the widget. 
    • Available Settings 
      • Top 
      • Right 
      • Bottom 
      • Left 
    • Default Value 
      • All padding values are set to 0 by default. 
    • Usage 
      • Increase padding values to create additional spacing between the widget content and its borders. 
  • Margin 
    • Controls the external spacing surrounding the widget. 
    • Available Settings 
      • Top 
      • Right 
      • Bottom 
      • Left 
    • Default Value 
      • All margin values are set to 0 by default. 
    • Usage 
  • Increase margin values to create additional spacing between the Newsletter Widget and surrounding page elements. 

 Link Panel 

The Link Panel widget allows Administrators to create custom navigation links, menus, brand links, quick-access links, and promotional navigation sections on a Storefront page. 

Multiple links can be configured within a single Link Panel, making it suitable for creating navigation menus, footer links, brand directories, promotional navigation areas, and custom link collections. 

Initial Component Behavior 

When the Link Panel widget is added to a page and no links have been configured, the following message is displayed: 

The Link Panel widget has no content. Configure the widget by selecting the settings icon in the toolbar. If the data is already configured, publish the page to reflect the changes. 

This message indicates that one or more links must be configured before content can be displayed. 

  • Open the page in the Visual Editor. 
  • Locate the Link Panel widget in the component list. 
  • Drag the widget onto the page. 
  • Place the widget in the desired location. 

Expected Result - The Link Panel widget is added to the page and displays the default message when no links are configured. 

  1. Select the Link Panel widget within the page preview. 
  1. Select the Settings option. 

Expected Result 

The Configure - Link Panel window opens. 

The configuration window contains: 

  • Back 
  • Locale 
  • Add 
  • Link item grid 

  • Select Add. 
  • Configure the desired link information. 
  • Save the link. 

Expected Result - The link is added to the Link Panel configuration. 

Field

Description

Usage

Expected Result 

Icon 

Associates an icon with the link item. 

Select an icon while configuring the link. 

The selected icon is displayed alongside the link title on the Storefront. 

Page Title / Menu Title 

Defines the text displayed for the link item. 

Enter the desired title such as Home, Products, Contact Us, Featured Brands, or Promotions. 

The configured title is displayed as the clickable link text. 

URL 

Specifies the destination for the link. 

Enter a valid internal or external URL. This can include Storefront pages, category pages, product pages, brand pages, or external websites. 

Buyers are directed to the configured destination when the link is selected. 

Display Order 

Determines the sequence in which links are displayed within the Link Panel. 

Enter a numeric value to define the display order. Lower values are displayed first. 

Links appear in the configured order. 

Open in New Tab 

Controls whether the destination opens in a new browser tab. 

Select the option to open the URL in a new tab, or clear it to open in the current tab. 

The destination URL opens according to the configured setting. 

Action 

Provides management actions for maintaining link items. 

Use the available actions to modify or remove links. 

Administrators can edit existing links or remove unwanted links. 


Form Widget

The Form Widget allows Administrators to add Znode forms to a Storefront page. Forms can be used to collect customer inquiries, registrations, feedback, contact requests, lead information, and other business data. 

Initial Component Behavior

When the Form Widget is added to a page and no form has been selected, the following message is displayed: 

The Form Widget has no content. Configure the widget by selecting the settings icon in the toolbar and if the data is already set, publish the page to reflect the changes on the Storefront. 

This message indicates that a form must be selected and configured before content can be displayed. 

Configure a Form Widget 

Step 1: Add the Form Widget

  • Open the page in the Visual Editor. 
  • Locate the Form Widget in the component list. 
  • Drag the widget onto the page. 
  • Place the widget in the desired location. 

Expected Result - The Form Widget is added to the page and displays the default configuration message if no form has been selected.  

Step 2: Open Form Configuration

  • Select the Form Widget from the page preview. 
  • Select the Settings option. 

Expected Result - The Configure - Form window opens.  

Step 3: Select a Form

  • Open the Select Form dropdown. 
  • Select the desired form. 

Expected Result - The selected form is assigned to the widget. 

  

Step 4: Configure Form Details 

  • Enter a value in the Form Title field. 
  • Configure submission behavior. 
  • Configure notification settings as needed. 

Expected Result - The form is configured according to business requirements.  

Step 5: Save the Configuration

  • Select Save. 

Expected Result - The form configuration is saved and the form becomes available in the page preview. 

Step 6: Publish the Page 

  • Publish the page. 

Expected Result-The configured form appears on the Storefront. 

 

Form Widget Attributes 

The Form Widget includes the following configurable attributes. 

Attribute

Description

Available Options / Values

Usage

Expected Result 

Select Form

Defines the form that will be displayed on the Storefront page. 

Forms configured in Znode 

Select a form from the dropdown list. 

The selected form is associated with the widget and becomes available for display. 

Form Title 

Defines the title displayed above the form. 

Free-text value 

Enter a meaningful title for the form. 

The specified title is displayed above the form on the Storefront. 

Action on Form Submission 

Determines what happens after a Customer submits the form. 

Text Message, Redirect URL 

Select the desired post-submission action. 

The configured action executes after successful form submission. 

Text Message 

Defines the confirmation message displayed after form submission. This field is available only when Text Message is selected. 

Free-text value 

Enter a custom success message. 

Customers see the configured confirmation message after submitting the form. 

Redirect URL 

Defines the page to which Customers are redirected after submission. This field is available only when Redirect URL is selected. 

Valid URL 

Enter a fully qualified URL. 

Customers are redirected to the specified page after successful submission. 

Submit 

Defines the text displayed on the form submission button. 

Free-text value 

Enter the desired button label. 

The configured text appears on the submit button. 

Notification Email Address 

Specifies internal recipients who receive form submission notifications. 

One or more email addresses 

Enter email addresses separated by commas. 

Notification emails are sent to the specified recipients when the form is submitted. 

Notification Email Template 

Defines the email template sent to internal recipients. 

Email templates configured in Znode 

Select an email template from the dropdown list. 

Internal recipients receive notification emails using the selected template. 

Acknowledgement Email Template 

Defines the email template sent to the Customer after form submission. 

Email templates configured in Znode 

Select an email template from the dropdown list. 

 


 

 

 

 

Did you find it helpful? Yes No

Send feedback
Sorry we couldn't be helpful. Help us improve this article with your feedback.

Znode Page Builder