Skip to content

Leaderboard Banner Widget

Display one wide, eye-catching banner with an image alongside a heading, description, and call-to-action button. It is ideal for sale announcements, seasonal campaigns, or highlighting a key collection across the top of a page or between sections.

Page Builder name: Leaderboard Banner | PapaThemes Beautify — Version: 1.0.1

Add it to your page

  1. In your BigCommerce admin, open Storefront → My Themes and click Customize to launch Page Builder.
  2. In the left Widgets panel, find Leaderboard Banner | PapaThemes Beautify.
  3. Drag it onto the page where you want the banner.
  4. The widget appears with a sample banner. Click it to open the settings panel and customize it. You type the heading, description, and button label directly on the banner.

Settings

All options are under the Design tab, grouped into sections.

Design

Option What it does Default
Banner link Where the banner goes when clicked. Empty
Content align Where the text sits — horizontal (left/center/right) and vertical (top/middle/bottom). Left, Middle
Banner height Banner height on desktop, in pixels. 240px
Banner height (mobile) Banner height on mobile, in pixels. 240px
Background color Background color behind the banner. #f2f2f2
Image The banner image. Sample image
Image (mobile) An optional separate image for mobile screens. None
Image alt text Describes the image for accessibility and SEO. Empty
Image fit How the image fills its area: 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
Parallax? Adds a subtle parallax scrolling effect to the image. Off
Display in container div Keeps the banner aligned to your store's normal content width. Turn off for a full-width banner. On

Heading

Option What it does Default
Show heading Turn the heading on or off. Shown
Heading style Typography — Default or Custom; Custom reveals Font family, Weight, and Size. Default
Heading color Heading text color on desktop. #1a1a1a
Heading color (mobile) Heading text color on mobile. #1a1a1a

Text

Option What it does Default
Show description Turn the description on or off. Shown
Description style Typography — Default or Custom; Custom reveals Font family, Weight, and Size. Default
Text color Description text color on desktop. #1a1a1a
Text color (mobile) Description text color on mobile. #1a1a1a

Button

Option What it does Default
Button Turn the button on or off. Shown
Button style Typography — Default or Custom; Custom reveals Font family and the color options below. Default
Button radius Button corner rounding in pixels (Custom style only). 4px
Button color / Button color hover Button background color and its hover color (Custom style only). #de7bce / #391271
Button text color / Button text color hover Button label color and its hover color (Custom style only). #ffffff

Advanced

Option What it does Default
Style for theme Matches the widget's look to your theme: Kitchenary or Other Themes. Other Themes
Your theme name If you picked "Other Themes", type your theme's name here. Empty

Tips

Pick the right alignment

Use a left or right Content align to place the image on one side and your text on the other. Choose center to layer the text over a full-width image.

  • Upload an Image (mobile) when your main image is too wide to read well on phones.
  • Set separate Heading color (mobile) and Text color (mobile) values if your mobile image makes the desktop text colors hard to read.
  • Always add Image alt text so the banner is accessible and SEO-friendly.
  • Keep the message short — a clear heading, one line of description, and a single button work best.