Try Hyper free

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

Steps:

  1. In the theme editor (Customize), click Add section.

  2. Locate Banner with tabs section.

  3. Make necessary changes.

  4. Save.

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.

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

Section header

Customize the heading that appears above tabs.

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

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.

Change the image card ratio and content alignment in the section settings. Card settings

PreviousBanner with hotspotsNextBefore/after image slider

Last updated