# Banner with hotspots

![image](https://docs-assets.foxecom.app/hyper-theme/Hyper%20docs%20screenshot%20do%20not%20delete%20(1)_SNg1k0ib.jpg)

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 type="success">

Steps:

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

</Hint>

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

<Expandable title="See settings">

* **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.

</Expandable>

#### 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">

![image](https://docs-assets.foxecom.app/hyper-theme/image_aEOSFFZj.png)

</Tab>

<Tab title="Dot">

![image](https://docs-assets.foxecom.app/hyper-theme/image_uZor0Tda.png)

</Tab>
</Tabs>

* **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.

![image](https://docs-assets.foxecom.app/hyper-theme/image_BxorZa75.png)

#### General settings

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

<Hint type="warning">

The image works for desktop view only.

</Hint>

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