> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uselayers.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Add a banner to a merchandising rule

> Embed a promotional banner into a Shopify collection grid as part of a merchandising rule — full-width hero or inline tile, with independent web and mobile media.

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](/platform/merchandising/banners) 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](/help/configuration/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.

## Related

* [Banner Injection](/platform/merchandising/banners) — full reference for the response shape and rendering rules.
* [Rendering banners in Liquid](/developers/rendering-banners-in-liquid) — theme-side render guide for developers.
* [Rendering banners with the SDK](/developers/rendering-banners-with-the-sdk) — SDK equivalent.
* [Create a merchandising rule](/help/merchandising/create-merchandising-rule) — full rule walkthrough.
* [Edit, disable, or delete a merchandising rule](/help/merchandising/edit-disable-delete-merchandising-rule)