Flex Banners Widget¶
Display a set of banners arranged in a flexible grid. Each banner can have a heading, a background image, an optional overlay image, and a link. You can turn on a subtle mouse-move effect, fine-tune spacing for desktop, tablet, and mobile, and the banners look great on any screen.
Page Builder name: Flex Banners | PapaThemes Chiara — Version: 1.0.1
Add it to your page¶
- In your BigCommerce admin, open Storefront → My Themes and click Customize to open Page Builder.
- In the left panel, find the Flex Banners | PapaThemes Chiara widget.
- Drag it onto your page.
- The widget appears with three sample banners. Open the settings to add your own images, links, and text.
Settings¶
Banners¶
This is the repeatable list of banners. Each entry is one banner in the grid.
- Add a banner: click Add at the bottom of the Banners list.
- Remove a banner: open the banner entry and choose remove.
- Reorder banners: drag an entry to change the order banners appear in.
Each banner entry has these options in its Content tab, grouped into three sections.
Image¶
| Option | What it does | Default |
|---|---|---|
| Image | The main background picture for the banner. | A sample banner |
| Image width | Banner image width in pixels. | 502 px |
| Image height | Banner image height in pixels. | 502 px |
| Image alt text | Describes the image for accessibility and SEO. | (empty) |
| Image fit | How the image fills its box. Choices: Fill to box, Fit to box. | Fill to box |
| Lazyload image | Load the image only as it scrolls into view, for faster pages. | On |
| Hover animation | Gently zoom the image when a shopper hovers over it. | On |
| Border radius | Rounds the banner corners (in pixels). | 0 px |
| Link | Where the banner goes when clicked. | (empty) |
| Show overlay image | Show a second image layered on top of the main one. | Show |
| Overlay image | The picture layered on top (shown when Show overlay image is on). A transparent PNG works best. | A sample overlay |
| Mouse-move animation | Make the overlay image drift gently as the shopper moves the mouse, for a parallax effect (shown when an overlay image is on). | On |
Content¶
An optional heading can be shown on each banner. The heading text is edited directly on the banner in the page preview — click it and type, then format it with the visual editor.
| Option | What it does | Default |
|---|---|---|
| Show text | Show or hide the banner heading. | Hide |
| Text style | Use the theme's default text style, or switch to Custom to set your own font family, weight, size, mobile size, text color, and hover color. (Shown when Show text is on.) | Default |
| Content align | Position the heading on the banner — horizontally (left/center/right) and vertically (top/middle/bottom). (Shown when Show text is on.) | Left, Top |
| Content padding | Inner spacing (padding) around the heading on desktop — top, right, bottom, left. (Shown when Show text is on.) | Top/Bottom 5px, sides 20px |
| Content padding (mobile) | Inner spacing around the heading on phones. (Shown when Show text is on.) | Top/Bottom 10px, sides 20px |
General¶
| Option | What it does | Default |
|---|---|---|
| Width | How wide the banner is. Pick a width type — auto, % (percent), or px (pixels) — then set the value for Desktop, Tablet, and Mobile. | auto |
| Padding | Outer spacing around the banner, set per device for Desktop, Tablet, and Mobile. | 3px on all sides |
| Display banners in container div | Keep on to align the banners with your page's main content width. | On |
Tips¶
Tip
For the mouse-move effect, use a transparent PNG as the overlay image so the layer underneath shows through nicely.
- Mix banner Width values (for example two banners at 50%) to build flexible two- or three-across layouts.
- Set the Width value separately for Desktop, Tablet, and Mobile so your grid reflows neatly on phones.
- Keep the mouse-move effect subtle — it only works with a mouse, so touch-screen shoppers simply see the static banner.
- Add Image alt text to every banner for better accessibility and SEO.