Everything you need to set up and customize the Promotion block — from uploading your image and adding a link to configuring the sale overlay with percentage-off or custom text.
A Promotion is an eye-catching image block designed to highlight sales, special offers, or featured content on your store. It displays a full-width image that can link to any page, collection, or product in your store, making it perfect for drawing attention to your latest deals.
In the Boardwalk theme, the Promotion block renders a responsive image with an optional promotional overlay badge. The overlay can display a percentage-off discount (such as "30% off") or custom text (such as "FREE" or "New Arrival"). When a link is assigned, the entire image becomes clickable and features a smooth zoom effect on hover. The block also supports horizontal image flipping, custom overlay colors, and the option to open links in a new browser tab.
Follow these steps to add and configure a Promotion block on any page of your Shopify store using the Boardwalk theme.
In your Shopify admin, go to
Online Store → Themes, find Boardwalk,
and click Customize. Navigate to the page
where you want to display the promotion using the page
selector dropdown at the top center of the editor.
Click Add block inside any section that accepts image blocks, then choose Promotion from the block list. The block will appear with a placeholder image until you upload your own.
In the block settings, click the Image picker to upload or select an image from your media library. For best results, use a high-quality image that communicates your promotion at a glance.
Use the Link field to point the image to a collection, product, page, or any URL. When a link is set, the entire image becomes clickable and visitors will see a subtle zoom effect when they hover over it.
Under the Promotion Overlay settings, choose an overlay type to display a badge on top of your image. You can show a percentage-off discount or write your own custom text. Adjust the overlay and text colors to match your store's branding.
Click Save in the Theme Editor. Preview your page to verify the promotion image, link, and overlay are displaying as expected.
These settings control the image displayed in the Promotion block, along with options for flipping and linking the image.
The main image for your promotion. If no image is uploaded, a placeholder graphic will be displayed instead.
Mirrors the image from left to right. This is useful when you want a person or product in the image to face a different direction without editing the original file.
Turns the entire image into a clickable link. You can point it to any page, collection, product, or external URL. When a link is set, visitors will see a smooth zoom effect when hovering over the image.
When enabled, clicking the image opens the linked page in a new browser tab instead of navigating away from your current page. This setting only appears when a link is set.
The overlay is a badge that sits on top of your image to communicate a sale, discount, or other promotional message. You can choose between a percentage-off display or custom text.
Controls what kind of overlay appears on your image.
Options: None (no overlay),
Percent off (displays a discount
percentage), or Text only (displays custom
text you write). All other overlay settings only appear
when this is set to something other than None.
When enabled, adds an "up to" label above the
percentage number — for example, "up to 30% off."
This setting only appears when the overlay type is set
to Percent off.
Sets the discount percentage displayed in the overlay.
Range: 5% to 95% in increments of 5. This setting only
appears when the overlay type is set to
Percent off.
The main text displayed in larger type on the overlay.
Use it for short, attention-grabbing words like "FREE,"
"SALE," or "NEW." This setting only appears when the
overlay type is set to Text only.
An optional second line displayed in smaller type below
the header text. Use it for supporting details like
"Shipping" or "This Weekend." This setting only appears
when the overlay type is set to
Text only.
Sets the background color of the overlay badge. Supports transparency, so you can make the overlay semi-transparent or fully invisible while keeping the text visible. This setting appears whenever an overlay type is selected.
Sets the color of all text inside the overlay badge. Choose a color that contrasts well with your overlay background for readability. This setting appears whenever an overlay type is selected.
The Promotion block comes with features that work automatically — no apps or custom code needed.
When the image has a link, hovering over it triggers a smooth zoom-in animation. This gives visitors a visual cue that the image is clickable and adds a polished, interactive feel to your promotions.
The image automatically scales to fit the available space while maintaining its original proportions. It looks great on all screen sizes — from phones to large desktops — without any cropping or stretching.
Mirror your image from left to right with a single checkbox. This is handy when you want the subject to face a certain direction for your layout — no image editing software required. The flip also works correctly alongside the hover zoom effect.
The overlay color picker includes a transparency slider, letting you create semi-transparent badges that let the image show through. You can also set the background to fully transparent to display floating text with no background at all.
The block keeps its settings panel clean by only showing options that are relevant to your current choices. For example, the "Open in new tab" checkbox only appears when a link is set, and the percent-off slider only appears when the overlay type is set to Percent off.
The promotion image fades in smoothly as it scrolls into view, creating a polished entrance effect without any extra setup.