Articles

Create / Edit

This page consists of several dropdown blocks that make it easy to configure the widget.

General

This block allows the client to name their widget — the sticky bar. In the top right corner of the dropdown, there’s an arrow icon to collapse the block for easier navigation.

Product Management

In this block, the client selects the products on which they want to show their widget. Using radio buttons, the client can choose one of the filters: All Products, By Product, or By Collection. By default, “All Products” is selected.

• By Product: A “Add product” button appears, opening a popup where products can be selected. The popup includes a search function.
• By Collection: A “Add collection” button appears, opening a similar popup for choosing collections.

Products or collections are added by selecting checkboxes and clicking the “Add” button. Selected items are shown in a table with a search bar for filtering selected items.

To modify selections, the client can click “Edit the list of products” or “Edit the list of collections” to reopen the popup.

Removing products:

• Select the checkbox next to a product — a small popup will appear with options.
• Click the trash bin icon to delete a single item.
• Uncheck products inside the popup when adding items.

In the top right corner of the dropdown, there’s an arrow icon to collapse the block.

Visibility

This dropdown also includes three mini-blocks:

• Show this widget: The client selects on which devices the widget should appear — mobile, desktop, or both.
• Display Condition: Choose when the widget should appear: Always show, Only when add to cart is not visible, or Scroll to show (default is Always show).
• Only when add to cart is not visible: Requires entering the class name of the “Add to cart” button.
• Scroll to show: Displays an input field to set scroll percentage for each device type.

The top-right arrow icon collapses this dropdown as well.

Add to Cart Button Settings

Here, the client defines what happens after the “Add to cart” button is clicked. Using radio buttons, the following behaviors can be selected: Do nothing, Go to cart, or Go to checkout.

The arrow icon in the top right corner collapses this block too.

What’s next:

At the bottom of the page, there are two buttons:

• Change text and design: Takes the client to the next step where they can customize the widget’s text and appearance.
• Save: Saves the current widget configuration using the default design.

Customizer

This Customizer allows users to easily and intuitively configure the widget according to their needs.

Customizer Blocks

• Pre-made Templates: Choose from available templates to quickly set up the widget appearance.
• General Settings: Configure global widget parameters like color, font, size, etc.
• Individual Element Settings (Sections): Click any element on the page to edit its settings (text, images, spacing, and more).

Pre-made Templates

This section of the customizer offers ready-made templates that help you quickly style the widget.

Pre-made Templates Block

Here you’ll find various pre-designed widget options. Select one to apply it directly.

General Settings

In this section, you’ll find flexible controls to customize your widget to suit your needs.

Widget Settings

• Animation: Select an animation effect to grab users’ attention.
• Width: Set the widget’s width using a slider or input. Separate settings are available for mobile and desktop.
• Placement (Layout): Choose where the widget appears — Top or Bottom of the screen, and its horizontal alignment — Center, Left, or Right.
• Margin: Adjust spacing around the widget. Values can be set individually for mobile and desktop.
• Background: Choose a background color that fits your store’s style.
• Border: Set color, style, width, and corner radius.
• Padding: Control internal spacing between the widget’s content and its edges.
• Z-index Position: Set the stacking order to control how the widget overlaps other page elements.

Animation

Select how the widget appears using a dropdown list of animation types.

Width

Adjust the widget’s width using percentage values (e.g., 50%, 20%) via a slider or manual input. Mobile and desktop settings are separate.

Placement (Layout)

Choose widget placement — top or bottom of the screen, and alignment — center, left, or right.

Margin

Enter margin values for spacing around the widget for both desktop and mobile views.

Background

Choose a background color that matches your store’s theme.

Border

• Color: Select the border color.
• Style: Choose from solid, dashed, etc.
• Width: Enter the desired thickness.
• Border Radius: Set the corner rounding.

Padding

Set internal spacing (top, bottom, left, right) to control the gap between content and edges.

Z-index Position

Control the stacking order of the widget relative to other elements by setting a z-index value.

With these settings, you can create a widget that fits seamlessly into your store design and attracts visitor attention.

Individual Element Settings (Sections)

This section lets you customize all widget elements. Users can hide, remove, or add new blocks. Below are settings for each type:

Image

• Size: Set width and height via input fields.
• Border: Choose border style, color, width, and corner radius.
• Background: Pick a background color around the image.

Title

Font: Configure text color, style (normal/italic), size, and font weight.

Variant Picker

• Background: Set background color.
• Font: Choose font color, style, size, and weight.
• Border: Define border style, color, width, and radius.

Price and Compare Price

Font: Set color, style, size, and weight.

Quantity Selector

• Background: Set background color.
• Border: Choose border style, color, width, and radius.

Buttons

• Background: Set default and hover background color.
• Font: Set text color, font size, and style.

Add to Cart Button

• Background: Set background and hover color.
• Input: Configure text color, font size, and style.
• Border: Set style, color, width, and radius.
• Animation: Choose from animation types in a dropdown.
• Translation: Provide text for “Add to cart” and “Sold out” buttons.

Custom CSS

Add your own CSS to style the widget exactly how you want. This gives you full control over the appearance to match your brand.

These settings help you build a unique widget that perfectly reflects your store’s identity!

Bars

On this page, the client can view all sticky bars they have created. The widget table includes several features to simplify managing and editing bars.

Main Elements of the Page

Widget Table

The table displays all created widgets with the following columns:

• Widget Name
• Status (Active or Draft)
• Created Date
• Actions Dropdown for managing individual widgets

Bulk Actions

The client can select multiple bars at once using checkboxes next to each bar. Once at least one widget is selected, three buttons become active at the bottom of the page:

• Activate – Mark selected widgets as active
• Draft – Set selected widgets to draft status
• Delete – Remove selected widgets

Actions Dropdown

Each individual bar has a dropdown menu labeled “Actions” with the following options:

• Edit – Takes the client to the widget editing page
• Preview – Opens a preview of the bar
• Clone – Creates an identical copy of the widget for further editing
• Delete – Deletes the bar

“Create New” Button

In the top-right corner of the page, there is a Create New button. Clicking it takes the client to the page for creating a new sticky bar.

Settings

On this page, the client can add specific classes for the “Add to Cart” button.