PrestaShop · Sticky Cart Bar Pro

Bar Layout Studio — complete guide

Build your sticky add-to-cart bar visually: rows, blocks, presets, and per-element styling — no theme edits. This guide covers every control in Bar Layout Studio for Sticky Cart Bar Pro.

New to the module? See features and compatibility on the product page. Here we focus on the layout designer after installation.

Layout

Drag blocks (including duplicates), rows, alignment, device visibility

Presets

30+ built-in starters; save your own

Style wizard

Colors, fonts, shadows, hover per block

1. Where to find the studio and how to save

Open Sticky Cart Bar Pro in the back office → edit or create a bar. On the form, find Sticky bar layout (summary like 2 rows · 8 blocks · Bottom) and click Customize layout.

·Summary — live row/block count and bar position (top or bottom).
·Customize layout — opens full-screen Bar Layout Studio.
·layout_json (hidden) — stores structure and styles. After Done, you must still save the bar form in PrestaShop or nothing is stored in the database.

2. Studio header — quick actions

Bar position

Bottom — sticks to the lower viewport edge (most shops). Top — sticks to the top. The preview updates immediately.

Add row

Adds a horizontal band on the bar. Drag blocks from the library to fill it. Rows stack vertically, or sit side by side (see section 6).

Bar shell

Opens the Style wizard for the entire bar tray: padding, background, glass effect, edge border, shadow — not individual blocks.

Done

Closes the studio and writes layout to layout_json. Then save the bar in PrestaShop.

3. Left sidebar — Layout tab

Blocks library

Drag any block onto a row. You can place the same block type multiple times — for example two Add to cart button blocks, two Price areas, or two FOMO message chips. Every drag from the library creates a new instance (first copy: el_button, next: el_button_2, and so on). The palette always shows all block types, so drag the same tile again to add another copy. Remove one instance with × on the preview or by dropping it back on the library.

Block	On the storefront
Product image	Cover thumbnail
Product pictures gallery	Thumbs or carousel
Product name	Title
Selected variant	Active combination label
Price	Current + optional old price
Stock status	In / out of stock
Variant selector	Attribute dropdowns
FOMO message	Urgency chip (content from bar settings)
Mini cart summary	Short cart info
Add to cart button	Main CTA

Structure (tree)

Lists Row 1, Row 2… and nested blocks. Duplicate types get a suffix in the label, e.g. Add to cart button (button_2). Click a row or block to select it, open Properties, or use the palette icon for the Style wizard — each instance has its own styles. Reorder blocks or move them to another row when the menu offers Move to row.

4. Left sidebar — Presets tab

Ready-made layouts with spacing and often pre-tuned styles.

Built-in

~30 presets (Airy Lane, Tight Strip, Gallery Stage, …)

My presets

Layouts you saved from the current bar

Search — filter by name or description.

+ (Save current layout) — name + description → new custom preset.

Preset menu actions

Apply — load layout
Edit — rename (custom)
Duplicate — copy
Save changes — overwrite custom
Reset to default — built-in only
Delete — custom only

5. Center — page preview

Mock product page with your bar attached. Badge Classic or Hummingbird shows which theme CSS applies.

Drag & drop — reorder blocks; drop on the library to remove.
Click — select row/block → Properties panel.
Palette icon — Style wizard shortcut.
× — remove block from bar.

In the studio, all blocks stay visible for editing even when device visibility would hide them on the shop.

6. Properties panel (layout only)

Empty state: “Select a row or block on the bar to edit alignment and spacing.” This panel does not change colors or fonts — use the Style wizard for that.

Row properties

Row position in bar

Move up / Move down when multiple rows exist.

Visibility

Mobile, Tablet, Desktop — hides the whole row on unchecked devices.

Row placement

Full width (stacked) or Side by side with another row (Share line with).

Column width · Gap between columns · Column alignment

When two rows share one band: width ratio 1–4, gap 0–48 px, vertical align top / middle / bottom / stretch.

Blocks in row (3×3 grid)

Align + justify inside the row (top/center/bottom × left/center/right).

Distribution

Space between · Space around · Space evenly.

Gap between blocks

0–48 px between blocks in the same row.

Remove row

Deletes row; blocks return to the library.

Block properties

Visibility

Per device — this block only.

Vertical position in row

align-self: Top, Middle, Bottom, Stretch.

Block width

Auto · Grow (flex grow 0–3, min width) · Fixed (40–400 px).

Max width · Quick size

Cap width in px; shortcuts Compact / Normal / Wide / Fill row.

Edit block styles

Opens Style wizard.

← Back to row settings

Returns to parent row inspector.

7. Style wizard — overview

The richest part of Sticky Cart Bar Pro. Inspector = position in the row. Wizard = appearance (colors, type, borders, shadows, hover).

Open from: Bar shell, palette icon on a block, Edit block styles, or the structure tree.

Inside the wizard

Style sections (left) — only groups relevant to the selected target.
Live preview (center) — checkerboard background; Normal / Hover toggle where supported.
Reset to defaults · Cancel · Apply styles → saves to layout and refreshes studio.

Parent box (wrapper)

Outer tile in the row — padding, margin, background, border, radius, box shadow. Good for “card” blocks and gutters.

Inner element

Photo, button, price text, badge, select. Groups like Button or Product image. Hover always applies here, not on the wrapper.

Field types

Toggle Number (px, %, ms) Color + opacity Select Shadow editor Multilingual text

Shadow presets: None, Soft, Medium, Strong, Glow, Lift — then tweak offset, blur, spread, color.

Spacing & size (most blocks)

Height — fill row, auto, or fixed 16–120 px.
Inner padding / margin — per side 0–80 px.
Wrapper padding / margin — outer tile spacing.
Wrapper look — background, border, radius, shadow.

8. Bar shell styles

Bar shell spacing

Padding (0–80 px, per side). Gap between rows (0–48 px) between stacked bands.

Bar background

Color + opacity. Below 100% works well with backdrop blur.

Bar border

Hairline on the edge touching the page (bottom bar → bottom edge).

Bar backdrop (glass)

Blur 0–40 px; saturation, brightness, contrast 50–150%.

Bar shadow

Floating strip effect — try preset Lift.

9. Style wizard — every block

Unless noted, each block also has Visibility, Spacing & size, Parent box, and Shadow (section 7).

Product image

Single cover thumb; updates with selected combination.

Image size — width/height 24–120 px; fit cover / contain / fill.

Product image (inner) — frame background, border, radius.

Hover — scale, brightness, border color, shadow, transition (ms).

Product pictures gallery

Gallery layout — horizontal row or carousel; optional lightbox on click.

Carousel — autoplay, interval 2–15 s, arrows, dots.

Thumbnails — size, gap, fit; Thumbnail frame per thumb. Same hover as single image.

Product name

Typography — size 8–48 px, weight 400–800, color, line height, letter spacing, align, transform, clip/ellipsis, max width.

Text block — inner background/border. Text shadow. No hover.

Selected variant

Same as product name: typography + text block + wrapper. Use smaller font sizes for a subtitle line.

Price

Current price — size, weight, color.

Regular price — smaller size, color, line-through or none.

Layout — gap between prices. Price block — chip styling.

Stock status

Stock text — size, weight, in/out colors.

Badge colors — in/out backgrounds. Stock badge — border/radius.

Variant selector

Select fields — side by side or stacked; gap; height; min width; font; text color.

Select field — dropdown background, border, radius.

FOMO message

Typography + FOMO badge chip.

Animation — None, Pulse, Blink, Shake, Bounce; duration 0.5–5 s; repeat once / 2× / 3× / infinite.

Mini cart summary

Typography + Mini cart chip + element shadow.

Hover — background, text color, shadow (no border hover).

Add to cart button

Button text — multilingual label (empty = shop default); size, weight, color, transform, letter spacing.

Button — inner background, border, radius (brand CTA independent of theme).

Button size — min width 0–300 px, min height 24–64 px, disabled opacity 20–100%.

Button shadow + full hover (scale, brightness, colors, shadow, transition).

10. Hover effects

Hover on element (not parent box) — applies to the inner control only, so wrapper cards stay stable.

Option	Range	Blocks
Scale	100–120%	gallery, product_gallery, button
Brightness	80–120%	Same
Border color	Color	gallery, product_gallery, button
Background / text	Toggles + colors	button, mini_cart
Shadow override	Full editor	With hover group
Transition	0–800 ms	All with hover

On touch devices, design for clear normal-state contrast first.

11. Recommended workflow

1 Customize layout → set bar position (top/bottom).
2 Presets — pick a starter layout.
3 Layout — drag blocks (repeat a type from the library for a second instance); add rows if needed.
4 Inspector — row alignment, gap, side-by-side rows; block width & visibility.
5 Bar shell — background, glass, shadow.
6 Each block: Edit block styles → visibility → block-specific → spacing → wrapper → shadow → hover.
7 Done → save bar → test on mobile and desktop.

Get the module: Sticky Cart Bar Pro

12. Troubleshooting

Changes not visible in the shop

Save the bar form after closing the studio; clear cache if needed.

Need two buttons, prices, or galleries?

Drag the same block from the library onto a row again. Each drop is a separate instance with its own width, visibility, and Style wizard settings.

Block missing on mobile

Check Visibility in inspector or Style wizard.

FOMO empty

Configure FOMO on the bar form, not only styles.

No style options

Refresh admin; contact module support if the message persists.