Rico©

Promotion Banner

Display a full-width media section with image or video background and an optional scrolling marquee strip pinned to the bottom.

The Promotion Banner is a full-width media section designed to create high-impact visual experiences across your storefront. It supports both image and video backgrounds with independent desktop and mobile media controls across all video types — Shopify-hosted, external YouTube or Vimeo, and direct MP4 URLs. An optional scrolling marquee strip can be pinned to the bottom of the section with configurable text, speed, direction, and overlay style.

Documentation screenshot

How to Edit the Promotion Banner Section

  1. From your Shopify admin, go to Online Store → Themes.
  2. Click Customize on the active theme.
  3. Select the Promotion Banner section from the left sidebar.
  4. Add Marquee Item blocks and adjust the settings according to your preferences.
  5. Click Save to apply your changes.

Section Settings

General

  • Color Scheme: Select a color scheme applied to the section.
  • Margin Top: Controls the spacing above the section. Scales automatically across desktop, laptop, tablet, and mobile.
  • Margin Bottom: Controls the spacing below the section. Scales automatically across desktop, laptop, tablet, and mobile.
  • Heading: Add an optional heading displayed above the media area.

Media

  • Media Type: Choose between Image or Video as the background media.
  • Desktop Image: Upload the image displayed on desktop devices. Only available when Media Type is set to Image.
  • Mobile Image: Upload a separate image for mobile. If left blank, the desktop image is used as a fallback. Only available when Media Type is set to Image.
  • Video Type: Select the video source. Options: Shopify; External — YouTube or Vimeo; Direct — MP4 URL. Only available when Media Type is set to Video.
  • Desktop Video (Shopify): Upload the desktop video via Shopify. Only available when Video Type is set to Shopify.
  • Mobile Video (Shopify): Upload a separate mobile video. If left blank, the desktop video is used as a fallback. Only available when Video Type is set to Shopify.
  • External Video URL (Desktop): Enter a YouTube or Vimeo URL for desktop. Supports standard URLs, short URLs, and YouTube Shorts. Only available when Video Type is set to External.
  • External Video URL (Mobile): Enter a separate URL for mobile. If left blank, the desktop URL is used as a fallback. Only available when Video Type is set to External.
  • Direct Video URL (Desktop): Enter a direct MP4 URL for desktop. Only available when Video Type is set to Direct.
  • Direct Video URL (Mobile): Enter a separate MP4 URL for mobile. If left blank, the desktop URL is used as a fallback. Only available when Video Type is set to Direct.
  • Section Height (Desktop): Set the minimum height on desktop. Range: 300–1020px. Default: 840px.
  • Section Height (Mobile): Set the minimum height on mobile. Range: 200–800px. Default: 660px.
Documentation screenshot

Marquee Settings

  • Show Marquee: Enable or disable the scrolling marquee strip pinned to the bottom of the section.
  • Vertical Padding: Controls the top and bottom padding inside the marquee strip. Default: 8px.
  • Overlay Style: Sets the background style behind the marquee. Options: None — transparent; Solid — flat color; Gradient — fades from solid at the bottom to transparent upward.
  • Overlay Color: Sets the color used for the solid or gradient overlay. Only available when Overlay Style is not set to None.
  • Gradient Start Opacity: Controls the opacity at the bottom of the gradient. Range: 0–100%. Default: 85%.
  • Gradient End Opacity: Controls the opacity at the top of the gradient. Range: 0–100%. Default: 50%.
  • Text Color: Sets the color of the marquee text and separator characters.
  • Direction: Controls the scroll direction. Options: Left to Right; Right to Left; Both — alternates direction.
  • Speed: Controls the scroll speed. A lower value scrolls faster; a higher value scrolls slower. Default: 400.
  • Item Gap: Sets the spacing between marquee items. Default: 8px.
Documentation screenshot

Marquee Item Block

Add up to 20 Marquee Item blocks to populate the scrolling marquee strip. Each block contains a single rich text field for the message content.

  • Content: Enter the text to display as a marquee item. Supports rich text formatting.

Fallback Behaviour

If no image or video is assigned, a placeholder graphic is displayed automatically. For video types, if no mobile video or URL is provided, the desktop video is used as a fallback. If no video is configured at all, a default placeholder video is displayed to maintain the section layout during store setup.

Best Practices

Do

  • Use high-resolution images for crisp display across all screen sizes.
  • Upload separate mobile images and videos optimized for portrait viewports.
  • Keep marquee messages short and easy to read while scrolling.
  • Use a gradient overlay when marquee text needs to stand out against the media.
  • Use Shopify-hosted videos for the best performance and compatibility.
  • Use YouTube Shorts URLs for mobile external videos to better suit portrait screen ratios.

Don't

  • Use low-resolution images that appear blurry on large screens.
  • Enable the marquee without adding any Marquee Item blocks.
  • Use excessively long marquee messages that are difficult to read while scrolling.
  • Link external videos from unsupported platforms other than YouTube or Vimeo.
  • Set section height too low when using a video background, as it may clip the content.
PreviousProduct ListNextNew Arrivals