HYPER theme
Try Hyper freeResourcesOther solutions
  • What is Hyper theme
  • Changelog
  • Refund policy
  • Support policy
  • Getting started
    • Install Hyper theme
    • Set up my store as Hyper demo
    • Update Hyper theme
    • Theme license & Transfer
  • Page's global sections
    • Announcement bar
    • Top bar
    • Header
      • Mega menu
      • Use Country/ Region selector
      • Use Language selector
    • Footer
    • Cart drawer
    • Popup
    • Product compare
    • Quick view
    • Spotlight picks
  • Theme sections
    • Banner with hotspots
    • Before/after image slider
    • Brand logos 🔥
    • Button group
    • Collapsible tabs
    • Collection list
    • Collection list slider
    • Collection tabs
    • Contact form
    • Countdown timer
    • Custom content
    • Custom liquid
    • Email signup
    • Favorite products 🔥
    • Featured blogs
    • Featured collection
    • Featured countdown timer 🔥
    • Featured product
    • Horizontal products list 🔥
    • Image with text
    • Image with text overlay
    • Image with text slider 🔥
    • Lookbook slider
    • Multicolumn
    • Multicolumn with icon
    • Press 🔥
    • Products bundle 🔥
    • Promotion banner
    • Recently viewed products
    • Rich text
    • Shop the feed 🔥
    • Scrolling banner
    • Scrolling gallery images
    • Scrolling promotion
    • Slideshow
    • Tabs content
    • Testimonials
    • Testimonials masonry 🔥
    • Video
    • Video hero
  • Theme settings
    • General
    • Animations
    • Blog cards
    • Buttons
    • Cart
    • Color swatches
    • Colors
    • Currency format
    • Custom CSS
    • Layout
    • Logo
    • Product badges
    • Product cards
    • Product compare
    • Quick view
    • Search behavior
    • Social media
    • Typography
  • Collections & Products
    • Product page
      • Product template
      • Breadcrumbs
      • Product information
      • Quick comparision table
      • Quick order list
      • Related products
    • Collection page
      • Collection template
      • Collection banner
      • Product grid
    • Collections list page
  • Other pages
    • Blogs
    • Blog posts
    • Cart
    • Password
    • Search page
  • FAQs
    • Add Highlighted text to your Headings
    • Add gift wrap option to my cart
    • Change the default sorting of a collection
    • Combined listings app
    • Customize the checkout
    • Remove 'Powered by Shopify' in Copyright
    • Remove text Tax included and Shipping calculated at checkout below the product price
    • Set up Local Pickup option
    • Set up quantity rules and volume pricing in B2B
    • Show Payment icons
Powered by GitBook
On this page
  • How to add a Tabs content section to your Shopify store
  • How to edit a Tabs content
  • Section settings
  • Block settings
  1. Theme sections

Tabs content

Create organized, scroll-free pages with dynamic tabbed layouts

PreviousSlideshowNextTestimonials

Last updated 2 months ago

The Tabs content section lets merchants present essential info—like specifications, brand story, shipping policies, and more—in a clean, collapsible tab format. This improves user experience and keeps your pages streamlined.

How to add a Tabs content section to your Shopify store

Steps

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

  2. Locate Tabs content.

  3. Make necessary changes.

  4. Save.

How to edit a Tabs content

Section settings

Color scheme

Select a color scheme that matches your aesthetic.

Tab settings

  • Tab navigation style:

Headings are cleaner for simple layouts, while Buttons add more visual weight for a more interactive look.

  • Text alignment: Align your tab content to the left, center, or right.

Block settings

Available blocks:

Image with text

Combine a heading, paragraph, and image—great for product specs or storytelling.

Choose Desktop image position as Left/Right based on visual flow.

On mobile, the image and content are vertically stacked by default.

Tab

Showcase content using Rich text editor, Custom liquid, or pull a page's content.

Sidebar

A great space for additional highlights, icons, or CTAs that complement the main tab content.

  • You can only add one sidebar block per Tabs content section.

  • The Sidebar block is not scroll-sticky, so keep it simple and concise.

  • On mobile view, the Sidebar block shows at the end of the section.

  • Position: Place the Sidebar at the Right/Left of the section.

  • Content: Add a Heading and Description to the Sidebar.

  • Icon with text:

You can add up to 3 icon + text rows.

Each one includes:

  • Icon from the built-in library (like Heart or Truck)

  • Custom Image if you prefer using branded icons

  • Width and Color to control icon size and match your branding

  • Heading for the text that appears next to the icon

  • Button: Optional call-to-action with label text. Good for linking to another section or page.

Learn how to set up your Color schemes:

Notes:

🎨
✅
Colors
Image with text
Tab
Sidebar