The dashboard
The dashboard has two areas: a configuration panel on the left, and a live preview on the right that updates as you work. At the top of the panel are your plan card and the Visibility card; below them, the settings are organised into three tabs. 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.
The header has a Leave us a review button and a Help menu showing the app version and our support email.
Plan & visibility
The plan card shows your subscription status and the action you need next:
- No active plan - click Start 7-day free trial (or Subscribe if your store has already used its trial). Stripe Checkout opens in a new tab; a card is required, and you're not charged until the trial ends. Promo codes can be entered at checkout.
- Free trial / Active - shows the days left or your renewal date, then $5/month. Manage billing opens the Stripe portal to update your card, download invoices or cancel. After cancelling, the bar keeps running until the end of the current period.
- Payment failed - click Update card. The bar keeps running while the payment is retried.
The bar is shown on your storefront only while your trial or plan is active. Your settings are kept either way.
The Visibility card has two switches: Show on desktop and Show on mobile. A screen counts as mobile at or below the Mobile Breakpoint (Behavior → Mobile). Turn both off and save to pause the bar without losing your settings.
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 (with quick presets that match common theme container widths), 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 - trigger mode (on scroll, always, or after a delay) and an optional close button with your chosen close behaviour. On scroll, the bar appears as soon as your theme's Add to Cart button leaves the screen; the Fallback Scroll Threshold is used only if that button can't be found.
- Animation - entry (slide, fade, bounce or instant), exit (slide, fade or instant) and the animation duration.
- Cart behaviour - Redirect on success (stay on the page, go to the cart, or go to checkout) and an optional success notification with custom text.
- Mobile - a compact mobile layout and a configurable mobile breakpoint. Showing or hiding the bar on mobile is set in the Visibility card.
- 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. It runs the same script your storefront uses, so what you see is what shoppers get. Switch between desktop and mobile views, watch the Active / Inactive badge (Active while Show on desktop or Show on mobile is on), 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.