Leaderboard Banner Widget¶
Show a wide, eye-catching banner that pairs an image or short video with a heading, text, and up to three buttons. Great for promoting a featured collection, a sale, or a call to action near the top of a page.
Page Builder name: Leaderboard | Eyeva Glasses — Version: 1.0.4
Add it to your page¶
- In your store admin, open Storefront → My Themes and click Customize to launch Page Builder.
- In the Widgets panel on the left, find Leaderboard | Eyeva Glasses.
- Drag it onto the spot on your page where you want the banner.
- With the widget selected, open the settings panel on the right to customize it.
Settings¶
All options live under the Settings tab, in the General section.
Settings¶
General¶
| Option | What it does | Default |
|---|---|---|
| Display Image/Video | Show or hide the image/video side of the banner. When hidden, the text is centered. | Show |
| Image | The main banner image (shown on desktop). | A sample image |
| Image Alt | Describes the image for accessibility and SEO. | image alt text |
| Image Width | Image width in pixels. | 500 |
| Image Height | Image height in pixels. | 500 |
| Image Fit | How the image fills its area: Cover (fills and crops) or Contain (fits fully inside). | Cover |
| Image (mobile) (optional) | An alternate image shown on phones. Leave empty to reuse the desktop image. | Empty |
| Mobile Image Width | Mobile image width in pixels. | 1500 |
| Mobile Image Height | Mobile image height in pixels. | 1500 |
| Video URL (.mp4) | Paste a link to an MP4 video to play in the banner instead of (or over) the image. See the tip below about hosting. | Empty |
| Show video | When the video plays: Always (auto-play on load), Hover (play on mouse hover or touch), or In Viewport (play when scrolled into view). | Hover |
| Hide video when paused | When on, the video is hidden while paused so the image shows through. | On |
| Content Direction | Desktop layout order: Image - Text or Text - Image. | Text - Image |
| Content Direction (mobile) | Mobile stacking order: Image - Text or Text - Image. | Image - Text |
| Background | Banner background color. | #f7f7f7 |
| Background on Mobile | Banner background color on phones. | #ffffff |
| Heading | Show/hide the heading and type its text. | Shown — "Pick 5 pairs from our Home Try-On collection" |
| Text1 | Show/hide a block of text above the buttons. You type the content and format it with the visual editor. | Shown — "Start with a style quiz" |
| Text2 | Show/hide a second block of text below the buttons. You type the content and format it with the visual editor. | Shown — "Start with a style quiz" |
| Button1 | Show/hide the first button, plus its label, link, size, and style (see Button options below). | Shown |
| Button2 | Show/hide the second button, plus its label, link, size, and style. | Shown |
| Button3 | Show/hide the third button, plus its label, link, size, and style. | Hidden |
| Style | Inherit theme (match your theme's fonts, colors, and spacing) or Custom (set your own below). | Inherit theme |
| Base Spacing | Overall spacing scale for the banner (in rem). Custom style only. | 1 rem |
| Heading Font Size (Desktop) | Heading size on desktop, in pixels. Custom style only. | 36 |
| Heading Font Size (Mobile) | Heading size on phones, in pixels. Custom style only. | 28 |
| Heading Text Color | Heading color. Custom style only. | #333333 |
| Text Font Size (Desktop) | Body text size on desktop, in pixels. Custom style only. | 16 |
| Text Font Size (Mobile) | Body text size on phones, in pixels. Custom style only. | 14 |
| Text Color | Body text color. Custom style only. | #555555 |
| Link Color | Color of links inside the text. Custom style only. | #2D73BD |
Button options (Button1, Button2, Button3)¶
Each button has the same set of choices:
| Option | What it does | Default |
|---|---|---|
| Content | The button label text. | Button |
| Link | Where the button goes when clicked. | Empty |
| Size | Button size: Unset (default), Small, or Large. | Unset |
| Style | Button look: Primary or Default. | Primary |
Tips¶
Always set the image first
Even if you plan to use a video, add a banner image too. It loads instantly and acts as a fallback for browsers or devices that don't auto-play video.
- For the video, use a self-hosted MP4 link from a reliable third-party file host so it plays on all browsers, including Safari. Paste the direct file URL into the Video URL field.
- Keep videos short and compressed so the page stays fast, especially for mobile shoppers.
- Use the Image (mobile) option when your desktop image looks too wide or off-center on phones.
- Leave Style on Inherit theme for a look that matches the rest of your store; switch to Custom only when you need a specific size or color.
- Make sure your text stays easy to read against the background color or video.