Skip to main content

MultiTabs Block

Introduction

The MultiTabs Block lets you organize content into separate tabs inside your template. This is perfect when you have a lot of information but don’t want to overwhelm your users. Tabs make your template clean, organized, and easier to read.

1. Adding a MultiTabs Block

  1. Open the Components Panel on the right side of the editor.
  2. Drag and drop the MultiTabs Block into a column inside your section.

Important: MultiTabs must be placed inside a column. Columns control layout and ensure your tabs display correctly and don’t break your template.

2. Using Tabs

  1. The MultiTabs Block comes with four default tabs.
  2. Click any tab to select it.
  3. Change the tab title to something meaningful, like Refund Policy, Return Instructions, or any title that describes the content.
  4. Click inside the tab’s content area and start typing or drag in other blocks like Text, Image, or Button.

Why it matters: Tabs are like separate sections inside the block. Adding content inside a tab keeps it organized and ensures it appears in the correct place.

3. Styling MultiTabs

Use the Styles Panel to customize how your tabs look:

  • Colors: Change background, text, or active tab colors.
  • Typography: Adjust font style, size, or weight for tab labels.
  • Borders & Radius: Round the edges of tabs or add borders.
  • Spacing: Add padding inside tabs or margin outside for better layout.

Think of styling like decorating your tabs so they’re easy to read and visually appealing.

4. Tips for Beginners

  • Keep tabs organized by topic for clarity.
  • Don’t overload tabs with too much content—it’s better to keep content concise.
  • Preview your template on mobile and desktop to ensure tabs are easy to use.
  • Combine tabs with other blocks to make interactive sections like FAQs or product features.
Table of Contents