# Banner with tabs

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FUaH1VDAQaSVZEu4xmKkH%2FHyper%20docs%20screenshot%20do%20not%20delete%20(38).jpg?alt=media&#x26;token=a9e816b3-4983-461a-b3b2-6196e259b4e9" alt=""><figcaption></figcaption></figure>

Create a visually engaging layout with tabs that display different content when clicked. It's perfect for showcasing various product categories or promotions in a neat, organized manner.

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

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

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

## How to customize a Banner with tabs section

### Section settings

#### General settings

* **Color scheme**: Select [predefined set of colors](https://docs.foxecom.com/hyper-theme/theme-settings/colors) for the section. This color scheme affects the text color of the section.
* **Desktop height**: Define the height of the banner on desktop devices.
* **Image overlay opacify** 🌓: Controls the opacity (transparency) of the image overlay within the section.&#x20;

{% hint style="info" %}
A darker overlay can help make text and buttons more readable.

:bulb: **Tip**: Set the opacity to around **30-50%** for a subtle effect. If you have dark images, you may want to increase the opacity slightly to ensure readability
{% endhint %}

#### Section header

Customize the heading that appears above tabs.

<details>

<summary>See settings</summary>

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

:writing\_hand: [add-highlighted-text-to-your-headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings "mention")

</details>

#### Tab settings

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FElMoFYBwN3id3VxHOF7m%2Fimage.png?alt=media&#x26;token=0c15eb3a-50d5-43b5-834d-868f17544d05" alt=""><figcaption></figcaption></figure>

Control the size of the tab titles and icons.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FVnYlazGBJm6evVGi03tA%2Fimage.png?alt=media&#x26;token=1fa46512-3812-4644-8110-b3c41b0e706c" alt=""><figcaption></figcaption></figure>

#### Card settings

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2F5y6mM6xbGhkcN90AD7GX%2Fimage.png?alt=media&#x26;token=1d295327-8d4b-4170-b238-ec17ba806b42" alt=""><figcaption></figcaption></figure>

Customize how the image card appears within the tab.

* **Color scheme**: Select a color scheme for your image card. This color scheme affects the image card's background, text, and button color.
* **Content alignment:** Adjusts how the content within the image card (e.g., button, text) is aligned.
* **Image ratio**: Define the aspect ratio for the image displayed on the card. It helps adjust the shape and size of the image.
  * **Adapt to image**: The card adjusts the image to fit without stretching.
  * **Fixed ratios**: You can set the image to a specific ratio (square, landscape, portrait).
* **Title size**: Control the font size of the title within the image card.
* **Text size**: Adjust the font size for any descriptive text within the card.
* **Button style**: Define the style of the button inside the card.

#### Mobile setting

* **Mobile height**: Adjust the height of the card for mobile devices.

### Block settings

#### General

Give the tab a **title** and an **icon** before title if needed.

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FxjPmEY7XUvpQv3itvTfY%2Fimage.png?alt=media&#x26;token=4064a21c-f3eb-4154-a209-8a71f20700c9" alt=""><figcaption></figcaption></figure>

#### Image

Upload or select an image that will be display as a banner.&#x20;

You can configure images for both **desktop** and **mobile** views. This ensures that the visuals look great and are optimized for different screen sizes.

#### Image card

* **Card link**: Link the image card to a specific URL. When visitors click on the image card, they will be directed to the destination URL you specify here.
* **Image**: Select an image that will be displayed on the image card.&#x20;
* **Content**: Add a heading, subheading, and a button to the image card if needed.

{% hint style="info" %}
Change the image card ratio and content alignment in the section settings. [#card-settings](#card-settings "mention")
{% endhint %}

***

<figure><img src="https://3026705042-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FAJrvmfqcj9TMoPkl3bNc%2Fuploads%2FkUIzEsJKOeRiz891zyf5%2Flivechat883x471%20(1).png?alt=media&#x26;token=90cbed2c-e791-49c8-9f43-49a08bed6f1f" 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>