# General Banner

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

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

<figure><img src="/files/8Xf1OXLZecyt5oPfK3vz" alt=""><figcaption></figcaption></figure>

The General Banner section is a versatile promotional tool for your store. You can display a bold banner featuring an image or a video to capture attention and highlight key messages. It’s ideal for showcasing special announcements, new collections, or limited-time offers.

Additionally, this section includes an optional countdown timer—perfect for creating urgency during sales or product launches. With customizable visuals and messaging, the General Banner helps you engage customers and drive action right from the storefront.

## **Adding a Section**

In order to add a section, you need to go to **`Customizer`** → **`Add Section`** → **`General Banner`**.

## **Section settings**

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

1. **`Enable rounded corners`** - the setting allows you to add rounded corners for the container;

### Colors

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

1. **`Section background`** - background color setting;
2. **`Text content background`** - background color for the content;
3. **`Enable glass effect`** - the setting allows you to add glass effect for the text content background;
4. **`Text`** - text color setting;
5. **`Link`** - \*\*\*\*setting link text color;
6. **`Button background`** - setting the background color of the button;
7. **`Button label`** - setting button label color;
8. **`Button border`** - setting the color of the button border;
9. **`Button background (hover)`** - setting the background color of the button on hover;
10. **`Button text (hover)`** - setting button label color on hover;
11. **`Button border (hover)`** - setting the button border color on hover.
12. **`Overlay`** - overlay color for media content;
13. **`Image border color`** - the color of the border that can be added to the media content;

### Layout

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

1. **`Container width`** - a container width of the section. If the “Inherit” value is selected then the container width is based on the group 'Layout' settings in the Theme settings;
2. **`Desktop offset top`** - the **top** indent of the section on the **desktop**;
3. **`Desktop offset bottom`** - the **bottom** indent of the section on the **desktop**;
4. **`Mobile offset top`** - the **top** indent of the section on the **mobile**;
5. **`Mobile offset bottom`** - the **bottom** indent of the section on the **mobile**.

## **Blocks settings**

**Block limit** - `1`

The section contains three different types of blocks (banner options): `Full-width`, `Countdown timer`, and `Two columns`.

### **Block Wide Media**

### General

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

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

1. **`Desktop banner min height`** - set a minimum height for the banner on the desktop;
2. **`Mobile banner min height`** - set a minimum height for the banner on the mobile;
3. **`Media type`** - selector for choosing the type of media content to be displayed. Available types are:
   * **`Image`** - a normal image will be displayed;
   * **`HTML5 video`** - **HTML5** video will be displayed;
   * **`Youtube/Vimeo`** - a video from the **YouTube** or **Vimeo** platform will be displayed.
4. **`Label`** - field for **Label**;
5. **`Heading`** - field for **Heading**;
6. **`Text`** - field for **Text**;
7. **`Button label`** - a field for the label content of the button;
8. **`Button link`** - the **URL** field for the button;
9. **`Button aria-label`** - field for **aria-label**, this field is needed to improve **accessibility**, people using **screen readers** will hear the purpose of this button;
10. **`Overlay opacity`** - **overlay** transparency adjustment;
11. **`Overlay color`** - setting allows you to select the color of the overlay;
12. **`Image desktop`** - choose a picture to be displayed on the **Desktop**;
13. **`Image mobile`** - choose a picture to be displayed on the **Mobile**;
14. **`Image border width`** - the setting allows you to set the size of the border;
15. **`Image border indent`** - the setting allows you to set the indent of the border;

### Video

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

1. **`HTML5 Desktop Video`** - a field to add an **HTML5** Video to be displayed on the **Desktop**;
2. **`HTML5 Mobile Video`** - a field to add an **HTML5** Video to be displayed on the **Mobile**;
3. **`Youtube/Vimeo Desktop Video Url`** - a field for adding a link to **YouTube** or **Vimeo** video to be displayed on the **Desktop**;
4. **`Youtube/Vimeo Mobile Video Url`** - a field for adding a link to **YouTube** or **Vimeo** video to be displayed on the **Mobile**.

### Alignment

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

1. **`Content alignment`** - content position selector within the block. Text can have 3 positions:
   * **`Left`** - content positioning on the left side;
   * **`Center`** - positioning content in the center;
   * **`Right`** - positioning content on the right side;
2. **`Content alignment mobile`** - content position selector within the block on the mobile. Text can have 3 positions:
   * **`Left`** - content positioning on the left side;
   * **`Center`** - positioning content in the center;
   * **`Right`** - positioning content on the right side;
3. **`Block alignment horizontal`** - block horizontal position selector. A block can have 3 positions.
   * **`Left`** - block’s positioning on the left side of the container;
   * **`Center`** - block’s positioning in the center of the container;
   * **`Right`** - block’s positioning on the right side of the container.
4. **`Block alignment vertical`** - block vertical position selector. A block can have 3 positions.
   * **`Top`** - block’s positioning on the top side of the container;
   * **`Center`** - block’s positioning in the center of the container;
   * **`Bottom`** - block’s positioning on the bottom side of the container.

### Block Side-by-Side

### General

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

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

1. **`Desktop banner min height`** - set a minimum height for the banner on the desktop;
2. **`Mobile banner min height`** - set a minimum height for the banner on the mobile;
3. **`Media type`** - selector for choosing the type of media content to be displayed. Available types are:

* **`Image`** - a normal image will be displayed;
* **`HTML5 video`** - **HTML5** video will be displayed;
* **`Youtube/Vimeo`** - a video from the **YouTube** or **Vimeo** platform will be displayed;

1. **`Media content position`** - image position selector. There are two options:
   * **`First`** - the image will be placed before the text block;
   * **`Last`** - the image will be placed after the text block;
2. **`Label`** - field for **Label**;
3. **`Heading`** - field for **Heading**;
4. **`Text`** - field for **Text**;
5. **`Button label`** - a field for the label content of the button;
6. **`Button link`** - the **URL** field for the button;
7. **`Button aria-label`** - field for **aria-label**, this field is needed to improve **accessibility**, people using **screen readers** will hear the purpose of this button;
8. **`Image desktop`** - picker picture displayed on **Desktop**;
9. **`Image mobile`** - picker picture displayed on **Mobile**.
10. **`Image border width`** - the setting allows you to set the size of the border on the image;
11. **`Image border indent`** - the setting allows you to set the indent of the border on the image;

### Video

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

1. **`HTML5 Desktop Video Url`** - a field to add an **HTML5** Video to be displayed on the **Desktop**;
2. **`HTML5 Mobile Video Url`** - a field to add an **HTML5** Video to be displayed on the **Mobile**;
3. **`Youtube/Vimeo Desktop Video Url`** - a field for adding a link to **YouTube** or **Vimeo** video to be displayed on the **Desktop**;
4. **`Youtube/Vimeo Mobile Video Url`** - field to add a link to **Youtube** or **Vimeo** video to be displayed on the **Mobile**.

### Alignment

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

1. **`Content alignment`** - content position selector within the block. Text can have 3 positions:
   * **`Left`** - content positioning on the left side;
   * **`Center`** - positioning content in the center;
   * **`Right`** - positioning content on the right side;
2. **`Content alignment mobile`** - content position selector within the block on mobile. Text can have 3 positions:
   * **`Left`** - content positioning on the left side;
   * **`Center`** - positioning content in the center;
   * **`Right`** - positioning content on the right side;

### **Block** Sale Timer

### General

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

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

1. **`Desktop banner min height`** - set a minimum height for the banner on the desktop;
2. **`Mobile banner min height`** - set a minimum height for the banner on the mobile;
3. **`Media type`** - selector for choosing the type of media content to be displayed. Available types are:
   * **`Image`** - a normal image will be displayed;
   * **`HTML5 video`** - **HTML5** video will be displayed;
   * **`Youtube/Vimeo`** - a video from the **YouTube** or **Vimeo** platform will be displayed;
4. **`Label`** - field for **Label**;
5. **`Heading`** - field for **Heading**;
6. **`Text`** - field for **Text**;
7. **`Button label`** - a field for the text content of the button;
8. **`Button link`** - the **URL** field for the button;
9. **`Button aria-label`** - field for **aria-label**, this field is needed to improve **accessibility**, people using **screen readers** will hear the purpose of this button;
10. **`Image desktop`** - choose a picture to be displayed on the **Desktop**;
11. **`Image mobile`** - choose a picture to be displayed on the **Mobile**;
12. **`Image border width`** - the setting allows you to set the size of the border;
13. **`Image border indent`** - the setting allows you to set the indent of the border;

### Timer

1. **`Year`** - years of the end of the countdown timer;
2. **`Month`** - month of the end of the countdown timer;
3. **`Day`** - day of the end of the countdown timer;
4. **`Hour`** - hour of the end of the countdown timer;
5. **`Timezone`** - Timezone;
6. **`Timer cell background color`** - setting the background color for the time cell;
7. **`Timer cell color`** - setting the text color for the cells of the countdown.

### Video

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

1. **`HTML5 Desktop Video`** - a field to add an **HTML5** Video to be displayed on the **Desktop**;
2. **`HTML5 Mobile Video`** - a field to add an **HTML5** Video to be displayed on the **Mobile**;
3. **`Youtube/Vimeo Desktop Video Url`** - a field for adding a link to **YouTube** or **Vimeo** video to be displayed on the **Desktop**;
4. **`Youtube/Vimeo Mobile Video Url`** - field to add a link to **YouTube** or **Vimeo** video to be displayed on the **Mobile**.

### Alignment

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

1. **`Content alignment`** - content position selector within the block. Text can have 3 positions:
   * **`Left`** - content positioning on the left side;
   * **`Center`** - positioning content in the center;
   * **`Right`** - positioning content on the right side;
2. **`Content alignment mobile`** - content position selector within the block on mobile. Text can have 3 positions:
   * **`Left`** - content positioning on the left side;
   * **`Center`** - positioning content in the center;
   * **`Right`** - positioning content on the right side;
3. **`Block alignment horizontal`** - block horizontal position selector. A block can have 3 positions.
   * **`Left`** - block’s positioning on the left side of the container;
   * **`Center`** - block’s positioning in the center of the container;
   * **`Right`** - block’s positioning on the right side of the container.
4. **`Block alignment vertical`** - block vertical position selector. A block can have 3 positions.
   * **`Top`** - block’s positioning on the top side of the container;
   * **`Center`** - block’s positioning in the center of the container;
   * **`Bottom`** - block’s positioning on the bottom side of the container.

## **Trick (Unique Collection Banner)**

### **Create collection metafields**

1. Go to **Settings** → **Custom Data**
2.

```
<figure><img src="/files/m9StHlrYa7mtyx1w5MvF" alt=""><figcaption></figcaption></figure>
```

3.

```
<figure><img src="/files/CM7H9vkcQWcON5HXpqxR" alt=""><figcaption></figcaption></figure>
```

4. Go to ‘**Collections**’
5.

```
<figure><img src="/files/TmVmS12cfQl6QP3N4kQ2" alt=""><figcaption></figcaption></figure>
```

6. You can add a new custom field with ‘**Add definition**’
7.

```
<figure><img src="/files/TiRZTXmPvIZONG5J5SRT" alt=""><figcaption></figcaption></figure>
```

8. Add these custom fields if you need them to be unique for each collection

* Banner heading (type: **`Single line text`**, suggested key: **`banner.heading`**);
*

```
<figure><img src="/files/N34XbZpjgAyt09gAKf5I" alt=""><figcaption></figcaption></figure>
```

* Banner label (type: **`Single line text`**, suggested key: **`banner.label`**);
*

```
<figure><img src="/files/tMeyOokZOK0EljPJTu2F" alt=""><figcaption></figcaption></figure>
```

* Banner text (type: **`Rich text`**, suggested key: **`banner.text`**);
*

```
<figure><img src="/files/bh8bXO7FJO2Rz6XYFeYh" alt=""><figcaption></figcaption></figure>
```

* Banner background image desktop (type: **`File`**, suggested key: **`banner.background_image_desktop`**);
*

```
<figure><img src="/files/O4gExGE957tOrhtpqfov" alt=""><figcaption></figcaption></figure>
```

* Banner background image mobile (type: **`File`**, suggested key: **`banner.background_image_mobile`**).
*

```
<figure><img src="/files/RGJhV3OQ1RZDZgQHp8qi" alt=""><figcaption></figcaption></figure>
```

### **Fill collection metafields**

1. Go to **products** → **collections**
2.

```
<figure><img src="/files/kHvR8BiSe1Zyx09LkQhg" alt=""><figcaption></figcaption></figure>
```

3. Select **Collection**
4.

```
<figure><img src="/files/qxdUEBKztL0ks6itfGmj" alt=""><figcaption></figcaption></figure>
```

5. Fill **metafields**
6.

```
<figure><img src="/files/EcE9UdgQ4qkryusxbQi7" alt=""><figcaption></figcaption></figure>
```

### **Use metafields in the customizer**

1. Go to **Customize** → **Collection** → **Default collection**
2.

```
<figure><img src="/files/grYNeLcBjhCd0k8C0AgF" alt=""><figcaption></figcaption></figure>
```

3. Add the ‘**General Banner**’ section
4.

```
<figure><img src="/files/I7pcu7Mv9nIUhtKHkzXB" alt=""><figcaption></figcaption></figure>
```

5. Click on ‘**Insert dynamic source**’ near the field you want to be unique for each collection
6.

```
<figure><img src="/files/xpdupg6YJGvM9Y8HXaHs" alt=""><figcaption></figcaption></figure>
```

7. Select the correct **metafield** for each field
8.

```
<figure><img src="/files/bDoLdMQB7p5H9z6q9D3h" alt=""><figcaption></figcaption></figure>
```

```
<figure><img src="/files/6hCelxG80RJYgU4ki3Hm" alt=""><figcaption></figcaption></figure>
```

**Note:** You can make unique content by creating metafields and using it as custom data to customize whatever you want. You are not limited to the fields shown in the manual

## **Additional Information**

1. When choosing a media type, you must fill in the appropriate setting, for example, if you have selected the **Image** type, then below you will find the setting to upload images;
2. In cases where there are settings for different devices (**Desktop and Mobile**), you can fill in only one of the fields. The filled-out field will replace the empty one. For example, you can only fill in **Desktop**, which will be displayed in the same way for **Mobile** and vice versa;
3. If you set an incorrect date for the timer, the timer will not start and zero values will be displayed;
4. When the timer expires, zero values will be shown.


---

# 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://utd-bv.gitbook.io/manual-shopify-theme-ultra/ultra-sections/sections-and-snippets/general-banner.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.