# Mini Banners

## How to enable section?&#x20;

First navigate to your **Page Builder** [*(how to launch Page Builder?)*](/themes/manifest-theme.md#page-builder)

Open the interface and navigate to the Mini Banners tab.

Inside the settings list, locate the **Banner count** setting from the available options. Choose the desired number of banners you wish to display by selecting the appropriate value, which ranges from **none** to **2**.&#x20;

If you prefer to disable this section entirely, simply choose the "**none**" option from the dropdown.

## Overlay opacity & color

This section offers the flexibility to adjust the overlay opacity and color, enhancing the visibility of the text displayed on top. The settings textfield accepts two values: the opacity and the hex color. The opacity value ranges between **0.0** and **1.0**, including decimal points, while the hex color follows the format "**#FFFFFF"**. To input these values into the settings field, separate them with the **|** symbol, such as "0.&#x35;**|**#FFFFFF" as an example.

## How to add image? <a href="#id-1189107808-mw66je" id="id-1189107808-mw66je"></a>

To assign an image, the first step is to upload the image to the image manager in the admin panel.[*(How to upload using image manager?)*](https://support.bigcommerce.com/s/article/Using-the-Image-Manager#uploading)

After uploading the image, select the link labeled **View Full Size** under desired image. Then, in the browser address bar, copy the image name located between "**/uploaded\_images/**" and the "**?**" symbol.

*Ex: /product\_images/uploaded\_images/**banner\_image1.png**?t=1606861987&*

Once copied go back to the theme editor and paste in the textfield labeled **Upload photo** and **save**.

## How to add link?

To assign a banner link, locate the textfield labeled **banner link** and insert text.

{% hint style="warning" %}
Please note that when assigning a banner link, it is important to keep it within 64 characters in the textfield. Exceeding this limit may result in errors when saving changes.
{% endhint %}


---

# 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://help.gordonbyte.com/themes/overview/mini-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.
