# Banner with tabs

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

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

Steps:

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

</Hint>

## 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 type="info">

A darker overlay can help make text and buttons more readable.

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

</Hint>

#### Section header

Customize the heading that appears above tabs.

<Expandable title="See settings">

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

✍ [Add Highlighted text to your Headings](https://docs.foxecom.com/hyper-theme/faqs/add-highlighted-text-to-your-headings)

</Expandable>

#### Tab settings

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

Control the size of the tab titles and icons.

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

#### Card settings

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

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.

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

#### 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 type="info">

Change the image card ratio and content alignment in the section settings. [Card settings](#card-settings)

</Hint>