# Banner with hotspots

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

Create engaging and interactive banners with clickable points (hotspots) that provide additional details about your products, features, or other relevant information.

## How to add a Banner with hotspots section to your Shopify store

{% hint style="success" %}
Steps:

1. In the theme editor **(Customize)**, click **Add section.**
2. Locate **Banner with hotspots** section.
3. Make necessary changes.
4. **Save.**
   {% endhint %}

## How to customize a Banner with hotspots section

### Section settings

#### Section header

Customize the text and alignment to ensure the banner effectively communicates your message and encourages engagement.

<details>

<summary>See settings</summary>

* **Subheading**: Add a short, secondary heading to complement the main heading. This can provide additional context or detail.
* **Heading**: Enter the primary title for your banner.
* **Heading size:** Adjust the size to fit your design preference and ensure readability. Choose from available heading sizes.
* **Text:** Add a detailed explanation or summary for the banner. Use rich text formatting like **bold**, *italic*, links, and lists for better visual emphasis.
* **Text size:** Select the size of the description text.
* **Button label:** Input the text for the call-to-action button.
* **Button link:** Add a link to the button to direct users to a specific page, product, or collection.
* **Button style:** Choose a style for the button.
* **Text alignment:**
  * Align the text in the section to the **Left**, **Center**, or **Right**.
  * Adjust alignment based on your banner’s design and layout.
* **Text alignment on Mobile:** Override desktop alignment settings specifically for mobile devices if needed.

</details>

#### Banner settings

Configure the visual and functional elements of your banner, including the background images, hotspot icons, and additional details.

* **Image** and **Mobile image**: You can upload different images for desktop and mobile view separately.&#x20;
* **Icon style**: Choose the apprearance of the hotspot icon.

{% tabs %}
{% tab title="Plus" %}

<figure><img src="/files/aEOSFFZjmgGawlTrEt7f" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="Dot" %}

<figure><img src="/files/uZor0TdaY7RW4NjNCgUl" alt=""><figcaption></figcaption></figure>
{% endtab %}
{% endtabs %}

* **Icon color**: Customize the color of the icons based on the banner’s background:
  * **Light:** Ideal for darker images.
  * **Dark:** Perfect for lighter backgrounds.

### Block settings

Configure individual hotspots within the **Banner with Hotspots** section. Each hotspot is customizable, enabling you to provide additional context or highlight specific features on the banner.

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

#### General settings&#x20;

* **Image**: Upload an optional image to represent the content in the hotspot pop-up card.

{% hint style="warning" %}
The image works for desktop view only.
{% endhint %}

#### Content settings

* **Heading:** Enter a concise title for the hotspot.
* **Description:** Add a brief description to provide more information about the feature or product.

#### Hotspot positioning

* **Vertical alignment:** Adjust the vertical position of the hotspot on the banner. The slider allows precise placement.

Example: Set to **50%** to align the hotspot at the middle of the banner vertically.

* **Horizontal alignment:** Adjust the horizontal position of the hotspot.&#x20;

#### **Hotspot on mobile**

You can adjust the position of the hotspots when a mobile image is selected.

***

<figure><img src="/files/6RW1JWuKNf9ovVFLkLXc" alt=""><figcaption><p><a href="https://apps.shopify.com/xflow?utm_source=foxecom&#x26;utm_medium=help_center_hyper&#x26;utm_campaign=banner">Install XFlow Back In Stock Automation FREE</a></p></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://docs.foxecom.com/hyper-theme/theme-sections/banner-with-hotspots.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.