The dashboard
The dashboard has two areas: a configuration panel on the left, organised into three tabs, and a live preview on the right that updates as you work. A floating save bar appears at the bottom whenever you have unsaved changes.
- Styling — the visual appearance of the bar and its elements.
- Layout — which elements show, their order, and where the bar sits.
- Behavior — when and how the bar appears, animates and reacts.
Styling tab
Control every visual detail of the bar:
- Bar appearance — solid or two-colour gradient background, border radius, padding, shadow, border and opacity.
- Typography & colours — title and price colours and weights, compare-at price (strikethrough or sale badge), font family (including Store Default), size, transform and letter spacing.
- Button — filled, outline, pill or ghost styles, custom label text, an optional cart icon, colours, hover state, radius, padding, weight and shadow.
- Product image, variant selector & quantity picker — size and styling for the thumbnail, the variant controls (dropdown, swatch, radio or rectangle list) and the quantity input (stepper, dropdown or number).
Layout tab
Decide what the bar contains and where it lives:
- Element arrangement — drag to reorder the product image, title, price, variant selector, quantity picker and Add to Cart button, and hide any of them.
- Position — anchor the bar to the bottom (default), top, left or right of the viewport.
- Width & alignment — full-width or contained with a max width, content max width, horizontal distribution and vertical alignment.
- Spacing — gaps between elements, the gap between the left and right groups, and the bar's offset from the screen edge.
Behavior tab
Control when and how the bar behaves:
- Display — the master enable toggle, trigger mode (on scroll, always, or after a delay), scroll threshold, and an optional close button with your chosen close behaviour.
- Animation — entry (slide, fade, bounce or instant), exit (slide, fade or instant) and the animation duration.
- Cart behaviour — show a success notification with custom text, and optionally auto-hide the bar after an item is added.
- Mobile — show or hide on mobile, a compact mobile layout, and a configurable mobile breakpoint.
- Advanced — z-index control (to sit above chat widgets or cookie banners) and a custom CSS class for theme-level overrides.
Live preview
The preview panel shows a simulated product page with your bar applied in real time. Switch between desktop and mobile views, watch the active/inactive status, and use Full Preview to open an expanded view in a new tab before saving.
Saving & going live
When you make changes, the floating save bar appears. Click Save Changes to publish — the app updates the storefront script for you, so your latest bar goes live on all product pages without any theme edits. Click Discard to revert to your last saved state.