# Mini banner

<figure><img src="/files/3fUTeAsUbZ4CWLYInhQL" alt=""><figcaption></figcaption></figure>

## **Adding a Section**

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

## **Adding a Section**

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

<figure><img src="/files/9oihDA89mZD4qYOXZ6Xm" alt=""><figcaption></figcaption></figure>

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

## **Section settings**

### **General**

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

<figure><img src="/files/3uztsgX616uZCt4dYxu0" alt=""><figcaption></figcaption></figure>

<figure><img src="/files/2laWRpu4FT05HdHFtjiK" alt=""><figcaption></figcaption></figure>

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

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

<figure><img src="/files/0tqQZ3rbtZAv9cBUtuGC" alt=""><figcaption></figcaption></figure>

1. **`Enable rounded corners`** - you can specify rounded corners for the section and indents on the sides;
2. **`Desktop banner min height`** - set a minimum height for the banner on the desktop;
3. **`Mobile banner min height`** - set a minimum height for the banner on the mobile;
4. **`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.
5. **`Label`** - field for **Label**;
6. **`Heading`** - field for **Heading**;
7. **`Text`** - field for **Text**;
8. **`Button label`** - a field for the label content of 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. **`Button link`** - the **URL** field for the button;
11. **`Image desktop`** - you can set a picture for the desktop;
12. **`Image mobile`** - can set mobile image, if not selected will be desktop image;

### Video

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

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

1. **`HTML5 desktop video`** - you can choose a video for your desktop, only work with 'HTML5 video' media type;
2. **`HTML5 mobile video`** - you can choose a video for your mobile, by default, there will be a picture from the desktop, only work with 'HTML5 video' media type;
3. **`Youtube/Vimeo desktop video url`** - you can set YouTube/Vimeo video URL for desktop, only work with "YouTube/Vimeo video" media type;
4. **`Youtube/Vimeo mobile video url`** - you can set YouTube/Vimeo video URL for mobile, by default, there will be a picture from the desktop, only work with "YouTube/Vimeo video" media type;

### **Alignment**

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

1. **`Content alignment desktop`** - 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`** - block 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.

### Color

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

1. **`Section beckground`** - you can set the background for the section;
2. **`Label`** - you can set the color for the label;
3. **`Text`** - you can set the color for the text;
4. **`Button background`** - you can set the background for the button;
5. **`Button label`** - you can set the color for the button label;
6. **`Button border`** - you can set the color for the button border;
7. **`Button background (hover)`** - you can set the background for the button on hover;
8. **`Button label (hover)`** - you can set the color for the button label on hover;
9. **`Button border (hover)`** - you can set the color for the button border on hover;
10. **`Overlay`** - you can set the color for the overlay;

## Blocks settings

### Logo

<figure><img src="/files/7oi619yo1eKiEkZWo5NW" alt=""><figcaption></figcaption></figure>

1. **`Image`** - you can set a picture for the Logo;


---

# 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/mini-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.