Horizontal tabs

The Horizontal tabs section offers an organized and interactive layout, featuring horizontally aligned tabs that users can click to reveal detailed content.

With a variety of block types and customizable options, this section is ideal for displaying product features, or details information like ingredients, brand story, etc. The dynamic tab interface reduces clutter, enhances readability, and provides a seamless navigation experience across desktop and mobile devices.

1, How to add section in theme editor:

1

In your theme editor (Customize), scroll to the bottom of the template and select Add section.

2

In the list, locate and select Horizontal tabs section. The section will now be added to your page, ready for customization.

2, Section settings

• Section header:

  • Desktop content alignment: Control the horizontal alignment of the section header on desktop screens: Left, Center, Right

• Mobile layout:

  • Open first tab by default: If enabled, the first tab will automatically open on mobile devices. Ensures immediate visibility of content, improving user experience.

• Section:

  • Show divider line: If checked, a horizontal divider line will appear between the tabs and the content below. This helps visually separate the tab navigation from the section content, improving clarity and structure.

3, Block settings:

• Common features across blocks: All blocks in the Horizontal tabs section share the following feature:

  • Tab title: Enter the title for each tab. If left blank, the block will not be visible.

• Unique features by block type:

1

Rich text block

• Content: Enter inline text content for the tab.

• Tab content from page: Pull content directly from a page. If set, this overrides inline text.

• Button settings: Add text for the button label. Assign a clickable link for navigation. Choose the visual appearance of the button: Solid, Outline or Text.

2

Multicolumn block:

Allows you to showcase up to four columns of content with images, headings, descriptions, and buttons. This block is ideal for summarizing key features, benefits, or options in an organized layout.

• Layout: Select the number of columns to display (2, 3, or 4 columns). The block automatically adjusts the column layout to match the selected number.

• Image ratio: Set the shape of the images in each column: Portrait, Square, Circle, Landscape

• Each column within the block has these settings:

  • Image: Upload an image for the column.

  • Heading: Add a heading for the column.

  • Description: Enter text below the heading. Provide additional details under the heading. This text can elaborate on the feature or benefit being highlighted.

  • Button settings: Configure the label, link, and style of the button for the column.

3

Media with text block:

Combines images or videos with text to create a visually engaging layout. It’s perfect for explaining products, showcasing tutorials, or highlighting specific promotions.

• Image settings: Upload an image to the block. Adjust the height of the media. Choose whether the media appears to the left or right of the content.

Note: Media height setting & Desktop media position setting apply to both image and video.

• Video settings: When both an image and a video are set, the video will override the image.

  • Shopify-hosted video: Upload a video to be hosted on Shopify.

  • External video: Add a YouTube or Vimeo URL to display external videos.

  Note: If both a Shopify-hosted video and an external video are provided, the Shopify-hosted video will take precedence.

  • Video thumbnail: Set a custom thumbnail image for the video. The thumbnail will display before the video is played.

  • Enable video autoplay: Video automatically mute to enable autoplay.

  • Video description: Add alt text for the video, improving accessibility for screen readers.

• Content settings: Add a heading for the block. Provide detailed description below the heading. Add a call-to-action button and customize the button appearance.