Flex Banners Widget¶
Display a group of banners side by side, either as a flexible grid or a sliding carousel. Each banner can show an image or video with an optional heading, description, and button — perfect for promotions, category highlights, or a homepage hero strip.
Page Builder name: Flex Banners | PapaThemes Beautify — Version: 1.0.4
Add it to your page¶
- In your BigCommerce admin, open Storefront → My Themes and click Customize to launch Page Builder.
- In the left Widgets panel, find Flex Banners | PapaThemes Beautify.
- Drag it onto the area of the page where you want the banners.
- The widget appears with two sample banners. Click it to open the settings panel and start customizing.
Settings¶
The settings panel has a Settings tab for the whole banner group, plus a separate Banners list where you add and edit each individual banner (see further below).
Settings¶
General¶
| Option | What it does | Default |
|---|---|---|
| Padding | Sets the outer spacing (top/right/bottom/left) around the whole banner group, separately for Desktop, Tablet, and Mobile. | 0px all sides |
| Row wrap | Choose whether banners wrap onto a new line or stay on one row. Includes separate on/off toggles: Row no wrap on desktop, Row no wrap on table, Row no wrap on mobile. | All off |
| Style for theme | Matches the widget's look to your theme: Beautify Grocery, Beautify Furniture, Kansha Sport, Kitchenary, or Other Themes. | Other Themes |
| Your theme name | If you picked "Other Themes", type your theme's name here. | Empty |
| Display banners in container div | Keeps the banners aligned to your store's normal content width. Turn off for full-width edge-to-edge banners. | On |
| Display content overlaying banner on mobile | On mobile, places the heading/description/button on top of the image instead of below it. | Off |
| Enable high priority image loading | Loads banner images sooner. Best for banners at the very top of the page (above the fold). | Off |
Background¶
| Option | What it does | Default |
|---|---|---|
| Color | Background color behind the banner group. | None |
| Image (Desktop) | Background image shown on desktop. | None |
| Image (Tablet) | Background image shown on tablet. | None |
| Image (Mobile) | Background image shown on mobile. | None |
| Background fit | How the background image fills the area: Fill, Fit, or Stretch. | Fill |
Carousel¶
| Option | What it does | Default |
|---|---|---|
| Enable carousel | Turns the banner group into a sliding carousel. When off, banners show as a grid. | Off |
| Items per slide | How many banners show at once on desktop. | 6 |
| Items per slide (Tablet) | How many banners show at once on tablet. | 4 |
| Items per slide (Mobile) | How many banners show at once on mobile. | 2 |
| Autoplay | Automatically advances the slides. | Off |
| Autoplay speed | Time each slide stays before moving on, in milliseconds (3000 = 3 seconds). Only shown when Autoplay is on. | 3000 |
| Show arrows | Shows previous/next arrow buttons. | On |
| Show dots | Shows the clickable dots below the carousel. | On |
Banners¶
This is the repeatable list of banners. Each entry is labeled Banner.
- Add a banner with the Add button at the bottom of the list.
- Remove a banner using its delete icon.
- Drag banners by their handle to reorder them.
Each banner has its own Content tab with two sections: Image and Content.
Image¶
| Option | What it does | Default |
|---|---|---|
| Image | The main banner image. | Sample image |
| Image width | Image width in pixels. | 610px |
| Image height | Image height in pixels. | 610px |
| Show different image on mobile | Lets you upload a separate image for mobile screens. | Off |
| Image (Mobile) | The image shown on mobile (only when the option above is on). | Sample image |
| Image width (Mobile) | Mobile image width in pixels. | 610px |
| Image height (Mobile) | Mobile image height in pixels. | 610px |
| Image alt text | Describes the image for accessibility and SEO. | Empty |
| Image fit | How the image fills its box: Fill to box or Fit to box. | Fill to box |
| Lazy-Load? | Loads the image only as it scrolls into view, improving page speed. | On |
| Video URL (.mp4) | Optional self-hosted MP4 video URL. Use third-party storage (such as Cloudflare R2) rather than WebDAV for Safari compatibility. | Empty |
| Show video | When the video plays: Always (on page load), Hover (mouse hover or touch), or In Viewport (when visible on screen). | Hover |
| Hide video when paused | Hides the video while it is paused, showing the image instead. | On |
| Border radius | Rounds the image corners, in pixels. | 8px |
| Link | Where the banner goes when clicked. | Empty |
Content¶
| Option | What it does | Default |
|---|---|---|
| Content align | Sets where the text sits over the banner — horizontal (left/center/right) and vertical (top/middle/bottom). | Left, Top |
| Content padding | Inner spacing (padding) around the text on desktop (top/right/bottom/left). | 40 / 36 / 40 / 36 px |
| Content background | Background color behind the text block. | Transparent |
| Content padding (Tablet) | Inner spacing around the text on tablet. | 40 / 36 / 40 / 36 px |
| Content padding (Mobile) | Inner spacing around the text on mobile. | 10 / 15 / 10 / 15 px |
| Heading text | Turn the heading on/off. When shown, you type the heading directly on the banner in Page Builder. Typography — Default or Custom; Custom reveals Font family, Weight, Size, Mobile size, plus text colors (normal/hover and mobile). | Shown |
| Description text | Turn the description on/off. When shown, you type it directly on the banner. Typography — Default or Custom; Custom reveals Font family, Weight, Size, Mobile size, plus text colors (normal/hover and mobile). | Hidden |
| Action button | Turn the button on/off. When shown, you type the button label directly on the banner. Options below appear when shown. | Hidden |
| Size | Button size: Unset, Small, or Large. | Unset |
| Style | Button look: Primary, Default, Underline, Outline, or Custom. | Primary |
| Font family | Button font (Custom style only). Typography — Default or Custom. | Theme Default |
| Radius | Button corner rounding in pixels (Custom style only). | 4px |
| Color / Color hover | Button background color and its hover color (Custom style only). | #de7bce / #391271 |
| Text color / Text color hover | Button text color and its hover color (Custom or Underline style). | #ffffff |
| Position | Where the button sits relative to the text: Bottom or Right. | Bottom |
Banner General¶
This section sits under the same Content tab and controls the banner's own width and spacing within the row.
| Option | What it does | Default |
|---|---|---|
| Width | How wide each banner is: auto, % (percent), or px (pixels), with separate Value fields for Desktop, Tablet, and Mobile. | auto |
| Padding | Spacing around the banner inside the row (top/right/bottom/left) for Desktop, Tablet, and Mobile. | Desktop/Tablet 0/10/0/10 px, Mobile 0/5/5/0 px |
Tips¶
Match your slides to your content
For a homepage hero, set Items per slide to 1 on every device. For a logo or product strip, use more items per slide and turn off arrows and dots.
Keep autoplay comfortable
If you enable Autoplay, keep the speed at 3 seconds (3000) or more so shoppers have time to read each slide.
- Give every banner an Image alt text to help SEO and shoppers using screen readers.
- Use the same image width and height across banners so the row stays tidy.
- Turn on Show different image on mobile to crop tall hero images to a shorter, mobile-friendly shape.
- For videos, host the MP4 on a service like Cloudflare R2 so it plays reliably in Safari.