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. Want a horizontal banner that spans the entire grid from side to side? Use Hero placement above the first product row. Inline banners sit among products and can be resized across multiple columns and up to four rows by dragging any edge. Neither placement requires a particular image size in pixels; your storefront controls the final height and cropping.

​
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 50 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 → Merchandising Rules.
  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.
    • Type — select a banner type. Every store has a built-in Link type; if you’ve created custom types in Settings → Banner Types, they appear here too. The type controls which fields appear in this panel (and which modes are allowed). See Create a banner type.
    • 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 — select one:
      • Overtake — the banner replaces a product card in its grid cell.
      • Inject: the banner occupies its chosen grid space, with products flowing around it. Only Inject banners can carry a click-through link on the built-in Link type.
      The picker only shows modes the banner type allows.
    • Link (built-in Link type + Inject mode only) — the URL the banner clicks through to. Custom types have their own click-through fields under Type fields.
    • Type fields — the ordered list of fields defined on the selected banner type. Required fields are marked with an asterisk and block Save if empty. Product, collection, variant, and file fields open a picker; text, number, date, URL, and color fields render inline inputs. Removing a field from the banner type later drops its stored value from every banner of that type.
    • Layout: place the banner separately for desktop and mobile:
      • Hero: drag the banner into the area above the products. It spans the full width of the product grid, not just one or two columns.
      • Inline: drag the banner to the position you want among the products, then drag its left or right edge to resize across the available columns. The editor keeps inline banners one product-card row tall; there is no fixed 1×1 or 2×2 size picker.
    The first time you place a banner on one device, Layers mirrors that placement to the other device automatically so you don’t have to drag it twice. Once both devices have a placement, you edit them independently. Moving or unplacing the banner on one device no longer affects the other.
  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. Layers toggles scheduled banners on and off automatically, 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. Layers applies banners 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 but 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

  • 50 banners per rule.
  • Inline widths fit within the available grid columns. Hero banners span the full grid width and are not constrained to inline tile sizes. See Banner sizes and placement.
  • 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.