# DECO Product Banners

{% hint style="info" %}
**DECO Banner:** Notification bars, which **HANG ON THE TOP/BOTTOM/ CUSTOM POSTION** of your page(s) to notify **SALE** campaigns, **special deals** or to **highlight important information** about website.
{% endhint %}

<figure><img src="/files/k8dZrJWAv6ONDtuD87IB" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/GnZ8fN9dmR8WOOGVcN5i" alt=""><figcaption></figcaption></figure>

### What are DECO banner types I can select?

* After hitting on "Create banner"/"Create", select 1 of banner types here to start:

<figure><img src="/files/5kO9qGn4TSb1Rwnv5s6P" alt=""><figcaption></figcaption></figure>

### How can I create my banner?

* You will need to **go through 2 steps**: **Content** > **Design**

<figure><img src="/files/aM3hLP6srGFbPRYkmfuJ" alt=""><figcaption></figcaption></figure>

## Step 1: Content

* Here is where you can **choose** which **basic look** for your banner: Banner content, Pages to display, and Time to display
* Depending on which kinds of DECO Banner you selected, it'll have the different look on "Content" section

### 1. Fixed banner

* Banner ***won't move,*** the text inside will stay still

<figure><img src="/files/fFp5a7rIru3QZsPzQRKr" alt=""><figcaption></figcaption></figure>

### 2. Automatic banner

* The content inside will ***keep moving horizontally*** based on the duration you set up

<figure><img src="/files/mxiJJf6I1pFDhySH6i8F" alt=""><figcaption></figcaption></figure>

### 3. Slider banner

* The content will ***slide vertically or horizontally*** with the duration as you chose, you also can **choose to show "x" button** and **"arrow" button** or **not.**

<figure><img src="/files/F4buEs855Ek31nb23oeh" alt=""><figcaption></figcaption></figure>

### 4. Countdown banner

* This is a banner type to be used when you want to create a sense of urgency for customers, especially for sale campaign, or big events.

<figure><img src="/files/M8BGv37enfBWHnTr5nFA" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
"**Countdown timer**" for "**Fixed banner"** only: You can adjust the time for this countdown timer, then also choose action when the time is expired:&#x20;

* **Do nothing** (Banner still display on your store)&#x20;
* **Hide banner** (Banner will stop showing up on your store)
  {% endhint %}

<figure><img src="/files/DwlST5JU0ohojm0IhLAT" alt=""><figcaption></figcaption></figure>

## Step 2: Design

### Position

* You can choose the position of your banner at: **Top page, Bottom page or Customized position**

{% hint style="info" %}
**Note:** You can tick **"Sticky banner"** if you want your banner **still be visible when you scroll through your pages**
{% endhint %}

<figure><img src="/files/NYJOUau8qP0A12H89Prz" alt=""><figcaption></figcaption></figure>

How can I add my banner to customed position?

Here is the detail video for you:&#x20;

{% embed url="<https://youtu.be/1to_GBjeOX0>" %}

### Banner design

* You can custom color for your banner, text, close button
* Here, you can also **custom banner size/ banner text size differently** on **desktop/ mobile** OR between **Product page and collection page**

<figure><img src="/files/b7hawz8mMGoAuxG6Yq02" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/T9L7HgJdORGtDAQscLc5" alt=""><figcaption></figcaption></figure>

### Button

* If you enable "Call to action" button(CTA button), you can customize its color, size, etc here:

<figure><img src="/files/VhCmypLdq808CpCQDuz5" alt=""><figcaption></figcaption></figure>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://deco-product-labels-and-badges-1.gitbook.io/deco-guidelines/our-features/deco-product-banners.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.