Banner Settings

Configuring Your Banner

Customize every aspect of your banner with our comprehensive settings panel. The settings panel provides fine control over scheduling, playback behavior, and dimensions.

Scheduler

Configure when your banner appears:

  • Permanent visibility - Always visible (default)

    Your banner will be constantly displayed on your store without any time restrictions.

  • Date range - You can set specific start and end dates and hours
    • Start date: Select the day, month, year and hour when your banner should start appearing. If left empty, the banner will be visible immediately upon publishing.
    • End date: Select the day, month, year and hour when your banner should stop appearing. If left empty, the banner will remain visible indefinitely.

Pro Tip: Schedule banners in advance for holiday sales or special events. This ensures your promotions go live automatically at the perfect moment, even outside business hours.

Playback Options

Fine-tune how your banner slides transition and behave:

  • Auto-play - Enable/disable automatic slide change progression
  • Pause on hover - Enable/disable the option to stop the automatic slide progression when a user hovers their mouse over the banner. Useful for giving users more time to read content.
  • Navigation arrows - Show/hide left and right arrows for manual slide navigation
  • Navigation dots - Show/hide the indicator dots at the bottom of the banner
  • Animation speed - Control how fast the slide transition animation occurs (100ms - 2000ms, typically 500ms recommended)
  • Animation type - Choose between slide (horizontal movement) or fade (cross-dissolve) transitions
  • Interval (slide interval) - Set how long each slide displays before automatically advancing to the next one (1000ms - 30000ms). Longer intervals work well for content-heavy slides.

Note: Animation type 'slide' creates a horizontal sliding motion between slides, while 'fade' creates a smooth cross-fade effect. Choose based on your banner's visual style.

Recommended Settings

  • Interval time: 5-7 seconds per slide is the sweet spot for most banners. This gives users enough time to absorb the content without feeling rushed.
  • Pause on hover: Enable this to let users control the pace. It's especially useful for text-heavy slides or when users might want to click links.
  • Auto-play: Great for hero banners and image showcases. Consider disabling for critical announcements where users should see all slides.
  • Navigation controls: Show both arrows and dots for maximum user control, or hide them for a cleaner look on simple single-slide banners.

Dimensions

Control your banner's size and responsive behavior.

By default, the banner's dimensions are calculated based on two factors:

  • Width: 100% of the container (stretches to fill available horizontal space)
  • Height: The value set in the "Banners maximum height" field (in pixels)

Global Setting: The "Banners maximum height" is a global setting found in Settings > Theme Settings. This value applies to all banners by default and ensures consistent heights across your store.

Height Override Modes

You can override the default height behavior for individual banners:

  • Default - Uses the fixed height defined in "Banners maximum height"
    • Best for maintaining consistent banner heights across your store
    • Recommended for most use cases
  • Percentage - Set the height as a percentage value of the viewport height (vh)
    • Ideal for responsive designs that adapt to different screen sizes
    • Example: 50% means the banner will take up half the browser window height
    • Be careful to prevent pixelation on larger screens - provide high-resolution images
  • Full Window Height - Banner stretches to fill 100% of the viewport height (100vh)
    • Perfect for hero sections and full-screen landing experiences
    • Creates impactful, immersive first impressions
    • Works best with high-quality, large images or videos
  • Custom - Set a specific height in pixels for this banner only
    • Overrides the global setting with a banner-specific value
    • Useful when one banner needs different dimensions than others
    • Remember to test on mobile devices to avoid excessively tall banners

Best Practices:

  • For hero banners, consider Full Window Height or high percentage values (70-100%)
  • For announcement banners, stick with Default mode and keep heights modest (300-500px)
  • Always test on mobile, tablet, and desktop to ensure your chosen dimensions work well across all devices
  • If using percentage or full window height, ensure your images are high resolution (at least 1920px wide) to prevent blurriness on large screens

Margins

Add spacing around your banner by configuring margin values for each side. Margins control the empty space between the banner and surrounding page elements.

Linked & Unlinked Modes

The margins control features a link toggle button that lets you switch between two modes:

  • Linked (uniform) - When the link icon is active, all four sides share the same margin value. Changing any field automatically updates all others to match. The badge displays the uniform value (e.g., "20px").
  • Unlinked (independent) - When the link icon is inactive, each side can have its own margin value. This allows you to set different spacing for Top, Right, Bottom, and Left independently. The badge displays "Mixed" when values differ.

Margin Fields

Four margin fields are available. Each field supports pixels (px) or percentage (%) as the unit, and the unit can be changed independently for each side:

  • Top: Space above the banner
  • Right: Space to the right of the banner
  • Bottom: Space below the banner
  • Left: Space to the left of the banner

Best Practices:

  • Use linked mode for quick, uniform spacing around your banner
  • Use unlinked mode when you need tighter side margins but more vertical breathing room (or vice versa)
  • A small top and bottom margin (e.g., 10-20px) helps separate the banner from adjacent content
  • Set left and right margins to 0 if you want the banner to stretch edge-to-edge within its container
  • Consider using pixels (px) for top and bottom margins to maintain consistent vertical spacing, while percentage (%) can work better for left and right margins as it adapts proportionally to different screen widths
← Previous: Slide Types Next: Banner Placement →