Ribbon banner

A slim strip that puts a few things side by side, such as an offer, a discount code and a button. Place it anywhere on a page to catch the eye without taking much space.

Updated 1 min read

A purple ribbon banner under the menu with a sign-up offer and a button

Add a ribbon banner

  1. In the theme editor, click Add section and choose Ribbon banner.
  2. Click Add block and choose what to show. The blocks sit in a row, in the order you add them.
  3. Choose a Section color scheme that stands out from the sections around it.
  4. Click Save.

Available blocks are heading, caption, text, buttons, images, icon, icon with text, stat counter, discount code, countdown, spacer and custom Liquid.

A dark ribbon banner with three short columns: Materials, Dimensions and Returns
Three text blocks side by side, used for product details.

Let customers close it

Turn on Show close button to add an × to the banner. Once a customer closes it, it stays hidden for them on that device, even on later visits.

Settings reference

SettingWhat it does
Full widthRuns the banner edge to edge, rather than within the page width.
Show close buttonLets customers hide the banner.
Content alignment on desktopLeft, center, or right align the last block, which pushes a button to the far end.
Vertical and horizontal paddingThe space inside the banner.
Gap between blocksThe space between each item in the row.
Background imageAn optional image behind the banner, with an overlay to keep text readable.
Show onMobile, desktop or both.
Only show at specific times of the dayUseful for messages like “Order before 2pm for next-day delivery”.