---
title: Banner Blocks
description: "To **create a new banner block** you should: 1. Go to Banner Blocks under the Web Personalization menu. 2. Choose a Page where you want the banner to appear. You can set different Banner strategies for various pages on your…"
url: "https://releva.ai/documentation/web-personalization/banner-blocks/"
updated: "2024-10-02"
category: User Guide / Web Personalization
---

# Banner Blocks

To **create a new banner block** you should:

1. Go to Banner Blocks under the Web Personalization menu.
2. Choose a Page where you want the banner to appear.
   You can set different Banner strategies for various pages on your shop. Releva comes pre-configured with Home, Category, Product, Cart, and Search pages.

   - To create a new page, click on “New Page”:

     ![](http://releva.ai/wp-content/uploads/2024/10/1-6.png)
   - Name your Page.
     Each page can contain as many banners as you want.
   - Add Matching URL
     For each new Page, you must add the matching URL by clicking on the gear icon.

     ![](http://releva.ai/wp-content/uploads/2024/10/2-7.png)Add the page's pathname (NOT the full URL) where you intend to showcase the recommenders/banners.

     ![](http://releva.ai/wp-content/uploads/2024/10/3-3.png)
3. At the bottom of the area of each page, select New Banner Block.

   ![](http://releva.ai/wp-content/uploads/2024/10/4-3.png)
4. Select these options from the details modal that displays:
   - A name for your banner (it will appear in the Releva Admin interface)
   - Tags (keywords)
   - The Banner from the dropdown menu
     Next, you have an Edit button to edit the selected banner. The Duplicate & Edit button will automatically make a copy of the banner and navigate you to the Content menu of the Banner.*Tags property is used to associate keywords with banners. As tags are returned in the banner object of the response by our JavaScript SDK, you can define a visualization strategy and customize the display of banners using keywords. You can define tags by writing in the text field and hitting ‘Enter’.

     ![](http://releva.ai/wp-content/uploads/2024/10/5-3.png)
5. Click on the Display Configuration section in the banner block. You can edit here:
   **Banner type**
   - [Static](https://releva.atlassian.net/wiki/spaces/CST/pages/1767243793)
     Placed in a specific place via CSS selector and displayed all the time.
   - [Pop-up](https://releva.atlassian.net/wiki/spaces/CST/pages/1766719532)
     Pop-ups, also known as lightboxes, typically display in the center of your website and are great at attracting attention from your visitors.
   - [Bar](https://releva.atlassian.net/wiki/spaces/CST/pages/1767079970)
     Bars provide a full-width message that typically sits on top of your site or at the bottom.
   - [Flyout](https://releva.atlassian.net/wiki/spaces/CST/pages/1767243805)
     Flyouts appear in the bottom right or left of a screen and are a bit more subtle than a pop-up, but more likely to draw attention than a banner or embed form because they include movement.
   - [Custom](https://releva.atlassian.net/wiki/spaces/CST/pages/1766719554)
     Your integration will handle the visualization of the banner with custom JavaScript.

     ![](http://releva.ai/wp-content/uploads/2024/10/6-1.png)
   - **URL Filter**
     You may choose to include or exclude this pageBlock from specic pages based on what the page URL looks like.For example, if you wish this banner/recommender to only appear on the page [https://info@shop.com/categories/footwear](https://info@shop.com/categories/footwear), you should add **footwear** in the field **URL contains**. If you add **footwear** in the field UR**L doesn't contain** the pageBlock will NOT appear on the page [https://info@shop.com/categories/footwear](https://info@shop.com/categories/footwear). If values are entered into both fields, you will activate both include and exclude filters.``` typing in both fields.
   - **Advanced styling**
     You can add advanced styling to the type of banner you are creating, like close button background, border, padding, rounding, etc.
   - **Custom CSS**
     Enter your custom CSS code in this section. To specifically target this template, you can utilize the ID selector #undefined-modal.