Promotion bar
Use the Promotion banner section to announce a campaign, event, or other promotion. Choose between two column or one column layout, then add custom promo text, images, buttons, and colors.
See the Promotion banner section for a more compact promotional section. See the Sales banner for a similar section with a prominent sales price.
Set up section
In the editor side panel, click (+) Add section and select Promotion bar. Use the drag handles ⋮⋮ to re-order sections.
Click the section to edit general section styles, like colors, width, and padding.
Editing templates change all pages that use that template. For unique pages, use new templates or dynamic metafields
Add content
Change the Heading and Text that display within the bar. Add a Button to link to your collections or products or any other page with a custom label.
Heading
Enter text to show a heading.
Text
Enter multiple lines of text.
Button link
Select or paste a URL for the button.
Button label
Enter text to display a button label. Leave this field blank to remove the button.
Button style
Choose a style for the button. Select Solid, Outline, or Text.
Banner background
Choose to display a background image that spans the entire bar instead of a background color.
STEPS
In your theme editor (Customize):
Click on the Promotion banner section to open the settings.
(Optional.) Under Background image, click Select image to upload a background image.
For optimal quality across all devices, we recommend images with a minimum width of
2500px.Use Image focal points to specify the main focus of your images. The focal point of your image will remain centered and within frame when your site adapts to different screen sizes.
See our image guide to learn more about specifying a focal point for an image used within a section or for an uploaded image file when used anywhere on your site.
Use the color selector to change the Text and Background color.
The background color appears when there's no background image.
(Optional.) Change the Overlay color and Overlay opacity using the slider to increase the contrast between the text and background image (if used).
These settings help make your text clear and readable.
(Optional.) Click the Overlay gradient option to add a color overlay that fades across a range of hues.
You can choose the style, angle, position, and opacity of the gradient. See Shopify's color gradient guide to learn more.
Click Save.
Background
Color scheme
If not using an image, select a color scheme to apply a Background color.
Image
Select or upload an image to display as the background. There are no required image dimensions. We recommend a minimum width of 2500px.
Mobile image
Select or upload an image to display as the background of the banner on mobile devices. There are no required image dimensions. We recommend a minimum width of 1200px.
Image focal point
Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes. You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our Image settings guide.
Mobile Image focal point
Select the most important part of your image to keep centered. Use focal points to avoid unwanted cropping across different screen sizes. You can specify a focal point for an image used within a section or for an uploaded image file. Learn more in our Image settings guide.
Background image overlay
The color overlay adds a layer of color to your image. Overlays help balance image and text for clarity and readability.
Click section to find settings
Color scheme
Select color scheme to apply 'Background' or 'Gradient' colors.
Overlay opacity
Use the slider to change the transparency of the overlay. Set the opacity to 0% to turn off the overlay. Set to 100% to display a solid color (instead of the image).
Banner height
Adjust the section Height.
Click section to find settings
Height
Change the height of the bar for desktop screens: between 60 and 300 pixels.
Mobile height
Change the height of the bar for mobile screens: between 60 and 300 pixels.
Related links
Countdown banner Countdown bar Promotion banner Sales banner
Last updated