Getting Started

The Dynamic Widget is a powerful visual content management tool designed to help brands create and manage responsive, data-driven, and visually rich components on their e-commerce frontends—without the need for complex development work.

This module is managed directly from Omnitron, allowing business to build and control widget content through an intuitive interface, without relying on frontend deployments.

This guide walks you through the key elements of the Dynamic Widget builder, from choosing the appropriate Sales Channel and Edit Mode, to working with data sources, selecting templates, and using components for building modular and reusable UI elements.

Dynamic Widget solves several challenges for:

• Reduces dependency on developers by offering both Basic (template-based) and Advanced (component-based) modes.

• Ensures brand consistency across pages through reusable templates and shared data integrations.

• Offers full responsiveness via breakpoints, ensuring widgets render properly on all device sizes.

• Supports integration with dynamic product feeds, APIs, or static data through flexible data source options.

Whether you're launching a new campaign landing page, managing homepage banners, or embedding personalized product recommendations, Dynamic Widget provides a flexible and scalable framework for building impactful content.

The following documentation provides a detailed walkthrough of all configuration steps, supported components, and best practices for getting the most out of this system.

Let's begin with Channel Selection, the first step in defining the scope and context of your widget.

Channel Selection

Channel Selection is the initial step in the widget creation workflow. It defines the sales context for which the widget will be designed and ensures that all subsequent configurations are scoped to a specific Sales Channel.

How it works:

• Upon clicking on the Dynamic Widget tab in Omnitron, users are immediately prompted to select a Sales Channel.

• The available options are dynamically retrieved from Omnitron, where all Sales Channels are centrally defined and managed.

• Each Sales Channel corresponds to a separate e-commerce channel, such as:

• Web store (e.g., store.com)

• Native mobile app (iOS/Android)

• Third-party marketplaces (e.g., Amazon, Trendyol)

Mode Selection

Mode Selection allows the user to define the level of complexity and customization they require while editing a widget. This step is critical because it determines the type of tools and flexibility the user will have during the widget-building process.

Available Modes:

1. Basic Mode – Template-driven editing mode for quick and easy setups.

2. Advanced Mode – Component-level editing mode for fully customized widget design.

Basic Mode (Template-Based)

Basic Mode is a simple, template-based editing mode designed for non-technical users or teams who require fast widget setup—such as marketing or merchandising teams. In this mode, users can select from a range of predefined templates to quickly populate pages with commonly used elements.

• Access: Available via the Library section in the left sidebar of the Dynamic Widget interface.

• How It Works: Templates can be added directly to the page by dragging and dropping them into a designated placeholder area.

• Key Benefits:

  • No technical knowledge required.

  • Ideal for quickly adding banners, featured products, campaign content, etc.

  • Greatly reduces setup time and the risk of design inconsistencies.

This mode is perfect for pages that require fast updates such as campaign landing pages, product listings, or homepage highlights.

Advanced Mode

Advanced Mode is a flexible and fully customizable editing mode, ideal for users with technical proficiency or design teams who want complete control over widget structure and layout. In this mode, widgets are created from scratch using individual components.

• Access: Available through the Advanced section in the sidebar of the Dynamic Widget interface.

• How It Works:

  • Users can select core components (e.g., titles, buttons, product boxes, image containers) and drag them into the placeholder area.

  • Each component can be deeply customized in terms of style, behavior, and content.

• Key Benefits:

  • Enables full design flexibility.

  • Supports complex, brand-specific layouts and interactive widget structures.

  • Allows developers or advanced users to build highly tailored experiences.

Recommended for cases where custom logic, unique branding, or rich interactivity is required.

Page Selection

Page Selection refers to the step where the user chooses the page on which the widget will be placed. Pages available for selection are predefined in the system (e.g., Home Page, List Page, Checkout Page).

Choosing the correct page ensures that the widget is displayed in the right context and works as expected.

Placeholder

A Placeholder is a designated area on a page where widgets can be placed. These areas are predefined in the codebase and act as containers for dynamic widget content.

Example Usage:

import WidgetPlaceholder from '@akinon/next/components/widget/widget-placeholder';

export default async function Page() {
  return (
    <>
      <WidgetPlaceholder slug="category-page-widgets" />
    </>
  );
}

Widget Selection

Widget Selection is the step where users browse and select from existing, previously created widgets. This interface allows users to:

• View a list of saved widgets,

• Choose one for editing,

• Apply changes without needing to create a new widget from scratch.

This feature promotes reusability and consistency across the site, while also saving time during content management.

Breakpoints

Breakpoints define how a widget should behave and appear across different screen sizes, enabling responsive design. Each breakpoint allows you to configure styles and layout specific to that screen size.

Default Breakpoints

• Desktop: For large screens like desktops and laptops.

• Tablet: For medium-sized screens.

• Mobile: For small screens such as smartphones.

Custom Breakpoints

In addition to the default breakpoints, users can define custom screen sizes using the “Add Breakpoint” button. This allows for more precise control over how widgets appear on specific devices or viewports.