With banners, you can highlight promotions, campaigns, and brand imagery directly on your search results and category pages. In this article, we'll explain how to set up a new search banner.
Step 1: Name and position
In the app, navigate to Search > Banners. To add a new banner, click + New.
Banner name: Enter a clear name for the banner. This name is used for recognition within the Tweakwise App overview.
Position: Choose where the banner should appear on the page. You have three options:
Container top: Places the banner at the very top of the results page (above the page title/header 'Search Results').
List top: Places the banner above the sorting options and pagination, but below the page title.
Products top: Places the banner directly above the product grid (below the header, pagination, and sorting options).
Step 2: Configure Triggers
Here, you specify when the banner should be displayed:
Search category: Select the category in which search queries will be performed. Leave this empty if the banner should be shown for searches across all categories.
Trigger search terms: Enter specific keywords (for example,
discountorsummer). The banner will only appear when the visitor's search query exactly matches the specified term. If you leave this empty, the banner will appear for every search query.
Note: A banner configured for a specific keyword always takes precedence on the same location over a generic banner that applies to all search terms.
During this time period: Set a start and end date to define the timeframe during which this search banner will be displayed.
Step 3: Configure Images and Links
Under the image settings, you determine which visual assets are shown for Desktop (width greater than 768px) and Mobile (width less than 769px), as well as what happens when a visitor clicks on them:
Banner image: Enter the URL of the banner image to be displayed. Use an image with the same width as your website's container.
Destination URL after click: Enter the URL of the landing page where the visitor should be redirected.
Click action: Use the dropdown menu to select whether the link should open in the same tab (Open in same tab) or in a new window (Open in new tab).
💡 Tip: Want to show a banner exclusively on desktop or mobile? Simply fill out the fields for that specific viewport and leave the other empty. If both are filled in, Tweakwise automatically selects the correct banner based on the visitor's device.
Click Save and exit.