Brickspace Lab
Contact usContact ShopifyTry a theme
Paper
Paper
  • Paper documentation
  • Getting started
    • Theme colors
    • Theme typography
  • Guides
    • Color and option swatches
  • Using device specific visibility
  • Dynamic discount popups
  • Adding product subtitles
  • Adding product badges
  • Replacing “Add to cart” for a product
  • Disabling "quick-add" for a product
  • Fixed buy buttons
  • Disabling default ratings when using a third party app
  • Migrateing custom changes
  • Different ways to display option blocks
  • Creating a Mapbox API key
  • Templates
    • Collection template
  • Product template
    • Dynamic variant images
    • Gift cards
    • Quantity picker
    • Subscription options
    • Sibling products
    • Bundled products
    • Custom fields
    • Content drawers
  • Blog template
  • Sections
  • Sections
    • Featured product
    • Slideshow
    • Email sign-up
    • Video
    • Alternative banner
    • Alternative collection grid
    • Banner
    • Blog posts grid
    • Collage
    • Collapsible content
    • Collection list grid
    • Collection list slider
    • Comparison table
    • Contact form
    • Countdown
    • Custom liquid
    • Discount banner
    • Featured collection grid
    • Featured collection slider
    • Icon grid
    • Image comparison
    • Image hotspot
    • Logo list
    • Navigation slider
    • Recently viewed
    • Rich text
    • Slider
    • Store locator
    • Testimonials
    • Cart drawer
    • Header
  • General
    • Changelog
      • v8.0.1
      • v8.0.0
      • v7.6.2
      • v7.6.1
      • v7.6.0
      • v7.5.0
      • v7.4.0
      • v7.3.0
      • v7.2.1
      • v7.2.0
      • v7.1.2
      • v7.1.1
      • v7.1.0
      • v7.0.0
      • v6.2.0
      • v6.1.7
      • v6.1.6
      • v6.1.5
      • v6.1.4
      • v6.1.3
      • v6.1.2
      • v6.1.1
      • v6.1.0
      • v6.0.1
      • v6.0.0
      • v5.2.0
      • v5.1.0
      • v5.0.1
      • v5.0.0
      • v4.1.1
      • v4.1.0
      • v4.0.0
      • v3.0.2
      • v3.0.1
      • v3.0.0
      • v2.0.0
      • v1.2.2
      • v1.2.1
      • v1.2.0
      • v1.0.0
    • Known issues and troubleshooting
      • v8.0.1
    • Cloning a demo theme
      • Poster
      • Parts
      • Pastel
      • Page 3
      • Page 4
Powered by GitBook
On this page
  • Section settings
  • Block settings

Was this helpful?

Edit on GitHub
  1. Sections

Banner

Last updated 21 days ago

Was this helpful?

The Banner section displays a background image or video with text overlay, creating visually appealing hero banners for your store. It supports both desktop and mobile-specific media assets with customizable text alignment and spacing.

Common use cases

  • Hero banner on homepage to showcase key products or promotions

  • Announcement banners for sales or special events

  • Category introductions at the top of collection pages

  • Welcome sections with branding elements

Usage tips

  • Use high-contrast images to ensure text remains readable

  • Keep content concise and focused on a single message or call-to-action

  • For mobile, consider using a different image that works well with portrait orientation

  • Test your banner across different screen sizes to ensure responsive behavior

  • When using video backgrounds, ensure they're not distracting from your main message

Section settings

Setting
Description

URL

Link for the entire section. When set, the whole banner becomes clickable.

Desktop background image

The main image shown on desktop devices.

Mobile background image

Optional alternative image optimized for mobile devices.

Video background

Optional video to play in the background of the section.

Show image

Toggle to show or hide the background image.

Show entire image

When enabled, displays the full image (object-contain). When disabled, crops the image to fill the space (object-cover).

Show video on mobile

Toggle to show or hide the video background on mobile devices.

Color scheme

Select the background color scheme for the section.

Text color

Choose default, force light, or force dark text color.

Border color

Select a subtle or strong border color.

Enable gradient

Add a gradient overlay that darkens the bottom of the image.

Border position

Choose where borders appear: none, top, bottom, or top and bottom.

Height

Select from extra small to extra large height presets.

Vertical alignment

Position content at the top, middle, or bottom of the section.

Horizontal alignment

Position content at the left, center, or right of the section.

Visibility

Show on all devices, mobile only, or desktop only.

Block settings

Heading

The heading block adds a large title to your banner. Limited to 1 per section.

Setting
Description

Content

Text to display as the heading.

Top spacing

Amount of space to add above the heading (0-300px).

Bottom spacing

Amount of space to add below the heading (0-300px).

Content

The content block adds descriptive text to your banner. Limited to 3 per section.

Setting
Description

Content

Rich text to display in the banner.

Top spacing

Amount of space to add above the content (0-300px).

Bottom spacing

Amount of space to add below the content (0-300px).

Buttons

The buttons block adds up to two call-to-action buttons. Limited to 1 per section.

Setting
Description

Primary button color

Select from primary, secondary, tertiary, neutral, or plain button styles.

Primary button label

Text to display on the primary button.

Primary button URL

Link for the primary button.

Secondary button color

Select from primary, secondary, tertiary, neutral, or plain button styles.

Secondary button label

Text to display on the secondary button.

Secondary button URL

Link for the secondary button.

Top spacing

Amount of space to add above the buttons (0-300px).

Bottom spacing

Amount of space to add below the buttons (0-300px).

App

This block allows app developers to add content to the banner section.