Skip to main content
A banner is a promotional image you can inject into a collection grid as a consequence of a merchandising rule. Banners live alongside pins, expressions, and variant breakouts on the same rule — when the rule applies to a request, its banners apply too.

​
Before you start

  • A banner needs both a web image and a mobile image to go live. Either slot empty = banner stays off, even if you toggle it on.
  • A rule can carry up to 5 banners.
  • Banner placement, click-through links, and rendering happen on your storefront. Layers ships the banner config in the browse response — your theme is responsible for drawing it. See Banner Injection for the payload shape.

​
Steps

  1. Open or create a merchandising rule from Merchandise.
  2. In the right sidebar, switch to the Inject Banner tab.
  3. Click Add Banner. A new banner appears in the list with a default name.
  4. Click the banner to open its detail panel and fill in:
    • Name — internal label, never shown to shoppers.
    • Web Media and Mobile Media — click each slot to open the Store Media browser, which lists every image and video already uploaded to Shopify Files for your store. You can also upload a new file from this modal.
    • Mode — pick one:
      • Overtake — the banner replaces a product card in its grid cell.
      • Inject — the banner is inserted alongside product cards, shifting later products by one cell. Only Inject banners can carry a click-through link.
    • Link (Inject mode only) — the URL the banner clicks through to.
    • Layout — set independently for web and mobile:
      • Hero — full-width row above the grid.
      • Inline 1×1 or Inline 2×2 — a cell inside the grid. Drag it to the position you want.
  5. Optional: open Scheduling and Conditions on the banner to control when and to whom it shows. These layer on top of the rule-level schedule and contextual conditions — both must pass for the banner to serve. Scheduled banners are toggled on and off automatically by Layers, with changes typically taking effect within about a minute of the configured time.
  6. Toggle the banner on at the top of its detail panel.
  7. (Optional) Reorder banners in the list. Banners are applied in list order — the first banner wins when two target the same grid cell.
  8. Click Save Changes.

​
Preview the banners

Open the Preview tab on the rule to see how the rule looks for a representative shopper. The preview shows every enabled banner regardless of its contextual conditions, so you can audit the full set you’re editing. Live traffic still respects each banner’s contextual conditions, and scheduled banners only appear in browse responses while their schedule window has them enabled.

​
Edit, disable, or remove a banner

  • Disable temporarily — toggle the banner off in its detail panel, then save. The rule keeps the banner config; just stops shipping it.
  • Edit media or layout — open the banner, change the field, save. Browse cache is invalidated immediately.
  • Remove — click the delete icon on the banner row. Removal is captured in the rule’s undo history, so you can revert before saving.
Every banner add, edit, remove, and reorder is captured in the rule’s config history. If a banner change misbehaves, restore an earlier rule snapshot to roll back.

​
Limits

  • 5 banners per rule.
  • Banners only render in your storefront if your theme reads the banners array from the browse response (or the mirrored $app:banner metaobject). Talk to your developer before relying on banners for a live campaign.