# Banner notifications

# Getting started

This article describes **Banners / list** tab in the admin panel, which will allow users to create header and side notifications on the website. Notifications work like CMS blocks using HTML + CSS code, and can be activated on specific altshops.

There can be more than one header banner <span lang="PL">**<span style="color: #4054a0;">(1)</span>**</span> visible at the same time. When the top banner is closed by the client, it will be not visible to the customer for configured in the [System / Settings](#h_01G94NV3F2RTBXK7A690G7C0TP) amount of days.

Only one side banner <span lang="PL">**<span style="color: #4054a0;">(2)</span>**</span> can be visible, and it is determined by their sort order.

<table id="bkmrk-%C2%A0%C2%A0-visualization-of-" style="margin-right: auto; margin-left: auto;"><tbody><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;">![POWERPNT_xadQT6uj9p.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/powerpnt-xadqt6uj9p-png.png)</td></tr><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;"><span class="wysiwyg-font-size-medium">  </span><span class="wysiwyg-font-size-medium"> *Visualization of the banners on the homepage (Desktop view)* </span></td></tr></tbody></table>

<table id="bkmrk-%C2%A0%C2%A0-visualization-of--1" style="margin-right: auto; margin-left: auto;"><tbody><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;">![POWERPNT_6mbJkpSY9X.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/powerpnt-6mbjkpsy9x-png.png)</td></tr><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;"><span class="wysiwyg-font-size-medium">  </span><span class="wysiwyg-font-size-medium"> *Visualization of the banners on the homepage (Mobile view)* </span></td></tr></tbody></table>

Table of contents:

1. <span>[Configuring the banners](#bkmrk-configuring-the-bann-1)</span>
2. [System / settings configuration](#bkmrk-system-%2F-settings-co)
3. <span>[ Customer perspective](#bkmrk-customer-perspective)</span>

---

# ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/SYAscreenshot-2020-04-29-at-19-12-41-png.png) Configuring the banners

Top and side banners can be created and managed in the  
***CMS &gt; Banners / list***

<span class="wysiwyg-color-black" style="color: #44549b;">![info2.svg](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/y0Uinfo2-svg.png) **Remember**</span><span class="wysiwyg-color-black" style="display: block; margin-top: 10px;">Every created banner needs to be activated in the desired altshop. More about activating banners in the altshops can be found in the [Banners / list - browsing and managing banners in altshop module](https://tauceti.zendesk.com/hc/en-us/articles/7001622990994) article.</span>

<table id="bkmrk-%C2%A0%C2%A0-visualization-of--2" style="margin-right: auto; margin-left: auto;"><tbody><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;">![POWERPNT_sL98uU7a6J.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/powerpnt-sl98uu7a6j-png.png)</td></tr><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;"><span class="wysiwyg-font-size-medium">  </span><span class="wysiwyg-font-size-medium"> *Visualization of the Banners / list tab* </span></td></tr></tbody></table>

In the **Banner / list** tab, it is possible to select the **Show X entries** **<span style="color: #4054a0;">(1)</span>** field to set the number of banners, displayed on one page (min 10 / max 100).

In this tab we can also find columns **<span style="color: #4054a0;">(2)</span>**, that can be sorted, with basic information regarding the banners:

- **ID** – Internal ID of the banner.
- **Location** – Top or Side location.
- **Name** – Internal name.
- **Start and End date** - Range of dates when the banner should be visible.
- **Is Active? –** Status if the banner is currently active.
- **Sort order** – Sort order of the banner.
- **Update time** – Last update time done by the user.
- **Actions -** Three action buttons that allows to 
    - **Edit** selected banner. Editing is the same action as **Add**, but with already existing element. More about it can be read below.
    - **Duplicate** selected banner. Duplicate creates exactly the same banner, but with a (x) at the end of the name (where X is a number).
    - **Delete** selected banner.

In order to create new banner, we need to click on the **Add** **<span style="color: #4054a0;">(3) </span>**button

It is possible to search for a desired banner by their name using the search box **<span style="color: #4054a0;">(4)</span>**, change the pages when the number of banners is by default bigger than 10 **<span style="color: #4054a0;">(5)</span>**, and see how many banners are currently visible on the page out of them all **<span style="color: #4054a0;">(6).</span>**

<table id="bkmrk-%C2%A0%C2%A0-visualization-of--3" style="margin-right: auto; margin-left: auto;"><tbody><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;">![POWERPNT_5nD2chUUAS.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/powerpnt-5nd2chuuas-png.png)</td></tr><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;"><span class="wysiwyg-font-size-medium">  </span><span class="wysiwyg-font-size-medium"> *Visualization of the new banner creation* </span></td></tr></tbody></table>

When creating new banner, we can specify:

- **Name** – Internal name.
- **Location** – Top or Side location.
- **Sort order** – Sort order of the banner.
- **Start and End date** - Range of dates when the banner should be visible.
- **Is Active? –** Status if the banner is currently active.

In the content tab, we need to type HTML code in order for it to be visible on the website for the customer.

Example code for Top banner:

```
<span lang="EN-US" style="font-size: 11.0pt;"><div style="width: 100%"></span><br></br><span lang="EN-US" style="font-size: 11.0pt;"><p style="text-align:center;">Connectes-vouz our creez votre compte pour profiter de vos <strong>avantages exclusifs</strong></p></span><br></br><span lang="EN-US" style="font-size: 11.0pt;"></div></span>
```

Example code for side banner:

```
<style type="text/css">.side-banner-content {<br></br>    height: 100%;<br></br>    color: #fff;<br></br>    display: flex;<br></br>    justify-content: center;<br></br>    align-items: center;<br></br>  }<br></br></style><br></br><div class="side-banner-content"><br></br><p style="color: #fff;">Connectes-vouz our creez votre<br /><br></br>compte pour profiter de vos<br /><br></br><strong>avantages exclusifs</strong></p><br></br></div>
```

  
With the correctly filled necessary fields and code, we can save the banner.

---

# ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/SYAscreenshot-2020-04-29-at-19-12-41-png.png) System / settings configuration

Layout banners can be closed by the customers, and they will reappear after a configured amount of time. It can be configured in the ***System &gt; System / settings &gt; Built-in functions &gt; Layout banners***

<table id="bkmrk-%C2%A0%C2%A0-visualization-of--4" style="margin-right: auto; margin-left: auto;"><tbody><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;">![POWERPNT_pjMmthYnYs.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/powerpnt-pjmmthynys-png.png)</td></tr><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;"><span class="wysiwyg-font-size-medium">  </span><span class="wysiwyg-font-size-medium"> *Visualization of the Layout banners tab in the System / settings* </span></td></tr></tbody></table>

There we can find two options, one for top banner and second one for side banners.

---

# ![Screenshot_2020-04-29_at_19.12.41.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/SYAscreenshot-2020-04-29-at-19-12-41-png.png) Customer perspective

Created and configured banners will be visible on the website. Top banners <span lang="PL">**<span style="color: #4054a0;">(1)</span>**</span> and side banners <span lang="PL">**<span style="color: #4054a0;">(2)</span>**</span> are visible on every page.

<table id="bkmrk-%C2%A0%C2%A0-visualization-of--5" style="margin-right: auto; margin-left: auto;"><tbody><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;">![POWERPNT_xadQT6uj9p.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/powerpnt-xadqt6uj9p-png.png)</td></tr><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;"><span class="wysiwyg-font-size-medium">  </span><span class="wysiwyg-font-size-medium"> *Visualization of the banners on the homepage (Desktop view)* </span></td></tr></tbody></table>

<table id="bkmrk-%C2%A0%C2%A0-visualization-of--6" style="margin-right: auto; margin-left: auto;"><tbody><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;">![POWERPNT_6mbJkpSY9X.png](https://knowledge.tauceti-digital.com/uploads/images/gallery/2024-11/powerpnt-6mbjkpsy9x-png.png)</td></tr><tr><td class="wysiwyg-text-align-center" style="text-align: center; vertical-align: middle;"><span class="wysiwyg-font-size-medium">  </span><span class="wysiwyg-font-size-medium"> *Visualization of the banners on the homepage (Mobile view)* </span></td></tr></tbody></table>