# Banner with tabs

<figure><img src="/files/xAgFReZDksT7eLG0HTJf" 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](/hyper-theme/theme-settings/colors.md) 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](/hyper-theme/faqs/add-highlighted-text-to-your-headings.md)

</details>

#### Tab settings

<figure><img src="/files/8A683lFYelF2faYROcq4" alt=""><figcaption></figcaption></figure>

Control the size of the tab titles and icons.

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

#### Card settings

<figure><img src="/files/pTNzNN7aBGMhngvmgROE" 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="/files/t2GlNEMYuL70h4ppmDHr" 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="/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-tabs.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.