In this article, we show you the new strategy of Merchandising - Banner
⚠️ This feature will only work with theme V3 and above
⚠️ Legacy users: To enable this feature, you will need to subscribe to our Visual merchandising add-on
If the add-on is not subscribed, the button is still visible in the Merchandising strategy list, but the button will be displayed as locked
Feature Overview
Banners are a popular merchandising strategy that utilizes images on your storefront to directly link to specific products or landing pages, thereby increasing cross-sell opportunities. Banners are effective as people tend to respond more positively to visuals than text-heavy information. They help steer consumers towards specific products or categories, thereby enhancing visibility and sales.
These banners are crafted to grab attention, engage users, and ultimately drive up sales.
Product Description
This strategy is effective for all types of sorting on the search results pages.
This new strategy is located at the bottom of the Strategies list
You can add up to 4 banners for each search term and each collection.
This strategy is not applicable for global rule in both Commerce search and Collection page (only relevant for Specific search terms and Specific collections)
How to use (step-by-step instructions)
As this is one of the 6 strategies of Merchandising, the beginning steps to Add a new rule will be similar to the 5 previous strategies (Pin, Boost, Demote, Hide, and Filter)
Step 1: Click the “Add new rule” button
From the app’s admin, select “Merchandising” > Click “Add New Rule” > Select “Commerce Search” or “Collection page”
Step 2: Set rule conditions
Rule name: You must enter a name for the rule.
Active date: You can optionally set the validity period of the rule by clicking on the date range box.
Apply to
Select the “Specific search terms” option in Commerce Search
or
Select the “Specific collection page” option on the Collection page
Step 3: Set merchandising strategy
Select the Banner strategy. After clicking the Banner button, the Banner customization panel will be displayed on the right side of the screen.
💡 All the input fields in this panel are required.
1. Banner position in product list
The banner will be placed first by default. You can move them to any position between 1 and 50 on the product list. The changes you make will be shown in the preview.
2. Banner name: set the expected name for your banner.
3. Banner image: select the image for your banner.
You must choose the right image definition and limitation to ensure it displays nicely in your store. Acceptable file formats are .jpg, .jpeg, and .png (max 2Mb).
💡 By default your banner is the same size as a single product item in your live theme, including the product image and product information. You can make it larger using the Banner Grid settings below.
4. Banner Grid: choose how much space your banner takes up in the product grid.
Width: how many product columns the banner spans, from 1 column up to 6 columns.
Height: how many product rows the banner spans, from 1 row up to 3 rows.
The default is 1 column by 1 row, which matches the size of a single product item. Banners you created before this setting existed stay at 1 column by 1 row until you change them.
⚠️ Choose your image to match the size you pick. Your banner image is cropped or stretched automatically to fill the space you set, and there are no fit or cropping controls. A banner that spans 4 columns is much wider than it is tall, so an image made for a single product slot will look stretched or badly cropped. Upload an image with roughly the same proportions as the size you have chosen.
⚠️ Banner Grid is available on the TURBO version with a GMV-based pricing plan, and applies to the product grid on your collection pages and search results on desktop. On mobile and tablet your banner is always shown at 1 column by 1 row.
5. Redirects: Set the expected link for the banner after it is clicked.
6. Open redirect link in a new tab: select this checkbox to allow opening a new tab after clicking the banner.
After finishing setting up all the fields, you can see the details of the Banner appear in the Summary same as other strategies
You can click on this link to quickly preview the banner on your store.
In the preview section, you can see the banner that you just set up displayed in the search results/collection.
How your banner fits into the grid
Products fill the grid in order, and your banner is placed at the position you set. If there is not enough space left in that row, the banner moves down rather than overlapping your products.
If enough columns remain in the row, the banner appears at the position you set.
If not, the banner moves to the start of the next row, and the remaining space in the row above is filled with products.
If your banner is wider than the number of columns being shown, it fills the whole row.
Products carry on filling the grid after the banner, so your layout never shows empty gaps.
Because shoppers can change how many columns they see, the same banner sits in different places depending on the view. A banner at position 3 that is 2 columns wide appears in the first row of a 4-column grid, but moves to the second row in a 3-column grid, and fills an entire row in a 2-column grid.
💪 Use the View As options in the preview to check how your banner looks at different column counts before you publish.
⚠️ Banners are hidden when shoppers switch to List view.
If a large banner does not fit at the end of a page, products move to the next page and the remaining products move up, so each page stays full.
Feel free to reach out to our dedicated support team via chat if you have any questions or require additional assistance.