Banner with tabs

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

#How to customize a Banner with tabs section

#Section settings

#General settings

• Color scheme: Select predefined set of 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.

#Section header

Customize the heading that appears above tabs.

#Tab settings

Control the size of the tab titles and icons.

#Card settings

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

Upload or select an image that will be display as a banner.

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.
• Content: Add a heading, subheading, and a button to the image card if needed.