Advanced & Basic Components

Advanced Components

The Advanced Mode is a powerful editing environment within the Dynamic Widget system that provides full control and flexibility. It allows users to customize every aspect of a widget — from HTML elements to CSS styles — enabling a completely tailored design experience.

Core Components in Advanced Mode

These are the foundational building blocks available in Advanced Mode:

1. Container: HTML block elements like DIV, SECTION, or ARTICLE used to group content.

2. Data Source Iterator: Iterates over the items from a defined data source and renders each item dynamically.

3. Text Elements: Includes standard HTML tags such as H1, H2, H3, and SPAN for displaying headings or inline text.

4. Image: Displays an image with customizable source, alt text, and style options.

5. Video: Embeds a video from a file or external URL.

6. Icon: Adds vector or font-based icons for visual cues or actions.

7. Divider: Creates a horizontal separator between content blocks.

8. Slider: Implements a carousel-like component that supports multiple slides.

9. Link: Adds anchor elements for navigation or redirection.

Basic Components

1. Story

The Story template is a visual navigation component designed to highlight promotional images that redirect users to a dedicated page when clicked. Each story item is linked to a landing page that typically displays the products featured in that visual — such as campaign items, collections, or themed categories.

Key Features:

• Quickly create story-based content.

• Add visuals and text that align with your brand or campaign.

• Easily build structured and visually engaging stories using a ready-made template.

This template helps you produce eye-catching, well-organized content more efficiently.

Omnitron Configuration:

Shop Web Appearance:

2. Hero Slider

The Hero Slider is a visually impactful component typically placed on the homepage or category pages. It allows you to showcase large promotional images in a carousel format — ideal for highlighting campaigns, seasonal collections, or featured content.

Features:

• Data Source: Allows you to select a predefined data source that automatically populates the slider with images and associated content. If you choose not to use a data source, you can manually add images to each item by clicking on the image field within the component. This gives you flexibility to build your slider either dynamically or manually.

• Items: Defines how many slides will be visible at once in the slider area. Example: Setting this to 2 displays two images side by side.

• Slides To Slide: Specifies how many slides will shift forward with each navigation interaction (arrow click or swipe). Example: A value of 1 means the slider will move one item at a time.

• Arrows: Controls the visibility of left and right navigation arrows. Options: True (arrows shown), False (arrows hidden).

• Show Dots: Enables or disables the dot navigation at the bottom of the slider, which indicates the number of slides and allows direct access to each. Options: True (dots visible), False (dots hidden).

• Auto Play: When enabled, the slider will automatically move between slides after a set interval. Options: True (auto-play enabled), False (manual navigation only).

• Infinite: Determines whether the slider loops infinitely or stops at the last slide. Options: True (looping enabled), False (stop at last item).

Omnitron Configuration:

Shop Web Appearance:

3. Multiple Banner

The Multiple Banner template is designed to display several banner visuals in a single, well-organized section. It’s commonly used on homepages or category pages to present multiple promotional messages, such as campaigns, collections, or blog highlights — all in one unified layout.

Layout Structure:

• Left Section: A large-sized banner occupies the left side of the layout.

• Right Section: Two smaller banners are stacked vertically on the right side.

This layout enables you to showcase three distinct visual elements in a compact and visually appealing arrangement.

Component Features:

• Individual Linking: Each banner can be configured with its own destination URL. Users clicking on any banner are redirected to the corresponding page — such as a specific campaign, product category, or landing page.

• Manual Image Assignment: Images can be manually uploaded for each banner. To add or replace a visual, simply click the image field inside the banner component and upload your desired asset.

This template is ideal for brands that want to highlight multiple types of content simultaneously without overwhelming the page layout.

Omnitron Configuration:

Shop Web Appearance:

4. Multiple Banner 2

The Multiple Banner 2 template is an extended version of the standard Multiple Banner layout. It enables you to present five different visual elements in a single section — making it ideal for showcasing a wider variety of content, such as campaigns, collections, or blog entries, especially on homepages or category landing pages.

Layout Structure:

• Left Section: One large banner spans the entire height on the left.

• Right Section: Four smaller banners are displayed in two vertical pairs, stacked one above the other.

This configuration allows you to present five distinct content areas in a single, organized, and visually balanced layout.

Component Features:

• Individual Linking: Each banner can be assigned a unique URL. Clicking on any banner redirects the user to a specific campaign, product category, or any target page defined in the setup.

• Manual Image Assignment: Images for each banner can be added or updated manually. To update visuals, simply click the image field within each banner and upload the desired image file.

This layout is particularly useful when you need to promote multiple topics at once — without compromising on structure or clarity.

Omnitron Configuration:

5. Showcase

The Showcase template is designed to present products or featured content in a visually rich, storefront-style layout. It consists of two large visual areas, positioned side by side — one on the left and one on the right.

Layout Structure:

• Two equally sized image blocks: Left and Right.

• Each block functions as an independent content zone.

Content Configuration (per image block):

• 1 Title: A bold heading to introduce the content.

• 2 Text Fields: Supporting descriptions or marketing messages.

• 1 Button: A clickable button that can redirect users to a category, campaign, or landing page.

This layout is ideal for drawing attention to dual promotions or presenting parallel content offers in a clean and engaging format.

Omnitron Configuration:

Shop Web Appearance:

6. Triple Banner

The Triple Banner template arranges three equally sized banners horizontally across the page. It offers a clean, symmetrical, and user-friendly structure, making it well-suited for presenting multiple promotions side by side — such as categories, offers, or collections.

Layout Structure:

• Three banners placed side by side with equal width.

• Designed for visual balance and a seamless browsing experience.

Content Configuration (per banner):

• 1 Image: Each banner includes a visual element to convey the main message.

• 1 Button with Link: A clickable button that directs users to a relevant destination (e.g., product list, campaign page, collection).

This layout is perfect for creating a harmonious and organized promotional area that doesn’t overwhelm the user but effectively communicates multiple offerings at once.

Omnitron Configuration:

7. Recommendation

The Recommendation template is a pre-configured slider component designed to dynamically display content based on a defined data source. It enables you to present personalized product suggestions, featured content, or targeted campaigns in a visually engaging and automated format.

Key Features:

• Data Source Driven: The content displayed in the slider is automatically pulled from a pre-defined data source. This allows for easy integration of personalized or context-aware recommendations based on user behavior, segments, or predefined rules.

• Slider Format: Items are presented in a horizontal carousel, enabling users to browse through multiple suggestions without leaving the current page.

• Use Cases:

  • Show “Recommended for You” products on the homepage

  • Display related items on product detail pages

  • Promote seasonal or trending collections dynamically

  • Offer blog or content suggestions in editorial sections

This template provides a smart and scalable way to deliver relevant content while maintaining full design consistency with the rest of the site.

Omnitron Configuration:

Shop Web Appearance: