Foxify - Smart page builder
Try Foxify freeResourcesOther solutions
  • About Foxify
    • What is Foxify?
    • Account & Billing
      • Free trial
      • Pricing plans
      • Use discount code
      • Change your plan
      • Uninstall Foxify
    • Changelog
    • Terms & Policies
  • Getting started
    • How to install Foxify
    • Quick start guide
    • Analytics
    • App extensions
      • Age Verifier
      • Ajax Add to Cart
      • Countdown Timer
      • Inventory status
      • Product Options Swatches
      • Quick View
      • Recently Viewed Products
      • Storefront Filters
    • Global styles
    • Pages list
      • Create a Home page
      • Create a Product page
      • Create a Collection page
      • Create a Landing page
      • Create a Blog post
      • Templates
      • Save a page as a template
    • Import & Export pages
    • Translation
  • FoxStudio 🔥
    • What is FoxStudio
    • FoxStudio editor
    • FoxStudio tools
      • Autosave
      • Grids guide and Snap lines
      • Pan & Zoom mode
      • Inspector panel
      • Layers
      • Layout template 🧩
      • AI responsive ✨
      • Prettify
      • Keyboard shortcuts
      • Undo & Redo
      • SEO checker
    • Working with Pages
      • Page settings
      • Edit a Section
      • Add a Section
      • Animations
      • Save and re-use Assets
    • Working with Elements
      • Add and Edit Elements
        • Text
        • Button
        • Image
        • Video
        • Countdown timer
        • Marquee text
        • Newsletter form
        • Contact form
        • List items
        • Slideshows
        • Tabs
        • Collapsible content
        • Testimonials
        • Navigation
      • Cells and grids
      • Constraints
      • Frame Elements
      • Resize an Element
      • Stack Elements
      • Copy & Paste Elements
    • FoxTransfer - Clone web design to Foxify
  • 🔥Figma to Shopify with Foxify
  • Basic editor
    • Page Editor
      • General settings
      • Styles settings
    • Sections & Presets
      • Before/ After slider
      • Blog posts
      • Collapsible content
      • Buy Now button
      • Collection list
      • Collection tabs
      • Countdown timer
      • Custom section
      • Favorite products
      • Featured product
      • Featured collection
      • Google Map
      • Handpicked products
      • Image banner
      • Image cards
      • Image with text
      • Lookbook
      • Multicolumn
      • Product tabs
      • Scrolling promotion
      • Slideshow
      • Tabs
      • Testimonials
    • Foxify layout
      • Menus
      • Link menus to Foxify layout
    • Advanced features
      • Custom code
      • Check SEO score
      • Keyboard shortcuts
      • Page revisions
      • Undo & Redo
  • Section design
    • Create a Theme Section
  • AI-powered fox magic
    • What is Fox Magic? ✨
    • All about credit
  • Build for Success series
    • FAQ page like Satyajewelry
    • Featured collections showcase like Puma
    • Home page 🔥
    • Landing page 🔥
    • Multi-column section like SkinnyTeatox
    • Newsletter section like Emmabridgewater
    • Product page 🔥
    • Scrolling promotion like Elementmatcha
    • Testimonial section
    • Video hero section like Swarovski
  • FAQ
    • Foxify Free plan is sunsetting
    • Foxify Gen 2 Beta Test
    • How to report an issue
    • Generic
      • Compare Foxify with other Shopify page builders
      • Completely remove Foxify code from my Shopify theme
      • How to change the app language 🌍
      • Pick a theme to work with Foxify
      • Does Foxify work for all the pages in my store?
      • How to get API Secret key in Foxify
      • How to join Foxify giveaway 2022
    • Edit your pages
      • Add custom font
      • Add custom icon
      • Change my page title and URL
      • Change the product prices' color
      • Create an anchor link
      • Create a parallax background
      • How to make rounded buttons
      • Set a page as Home page
      • Schedule your page to publish at a future date
      • Should I use Pixel, Rem, or Em?
      • Change the page background
  • Troubleshooting
    • Liquid error: Could not find asset snippets
    • Published page is not visible on live store
    • Compare-at prices do not show in live store
  • Shopify Apps Integrations
    • Air Product Reviews
    • DingDoong: Delivery + PickUp
    • Loox Product Reviews
    • LAI Product AliExpress Reviews
    • Wide Bundles - Quantity Breaks
    • Ai Loyalty, Email, Review, SMS 🔥
    • FoxKit AIO Upsell Cross-sell 🔥
    • Yotpo ‑ Product Reviews
    • Judge.me Product Reviews
    • BON Loyalty Program & Rewards
    • Kaching Bundles Quantity Break
Powered by GitBook
On this page
  • How to add Tabs
  • How to edit Tabs
  • Manage tabs
  • Customize your tabs
  • Add content over a tab

Was this helpful?

  1. FoxStudio 🔥
  2. Working with Elements
  3. Add and Edit Elements

Tabs

PreviousSlideshowsNextCollapsible content

Last updated 14 days ago

Was this helpful?

Tabs are a great way to organize content into separate sections on your page, giving users easy access to information without overwhelming them.

How to add Tabs

Steps:

  1. In the FoxStudio editor, on the left Sidebar > Click Add elements, or press E.

  2. In Advanced elements, select Tabs & Collapsible.

  3. Drag the tabs onto your canvas.

How to edit Tabs

Steps:

  1. Select the relevant tabs element in the editor.

  2. All the formatting tools for the element can be found in the right-hand sided Inspector panel.

Manage tabs

  • Add new tabs

Click Add tab to add a new tab. You can add up to 6 tabs within the Tabs element.

  • Reorder tabs:

Rearrange your tabs to change the order in which your content is displayed to your visitors by dragging the six-dot icon.

  • Remove tabs:

If you no longer need a tab, you can delete it to keep your Tabs up to date.

Customize your tabs

Click on the tab you wish to edit.

General setting

Edit the title of the tab to fit your content. Choose an icon from the icon library or upload a custom icon to represent the tab visually.

Design settings

Customize the tabs element so it matches the style of your brand.

Select the part you want to design in the drop-down:

  • Element container: Customize the wrapper that holds the entire Tabs element.

  • Tabs header: Customize the container that holds the tab titles, adjusting elements like alignment, borders, and spacing.

  • Tabs titles - Normal state: Style the tab titles when they are not selected.

  • Tabs titles - Active state: Style the tab titles when they are selected.

Add content over a tab

Add whatever elements you want to your tab including text, images, videos, and buttons. Using different content on each tab keeps visitors engaged and encourages them to explore your site further.

Use the Layers panel to easily navigate and manage the hierarchy of elements on your page.

Hover over the tab you want to remove, click the Remove icon.

Layers
Source:
Demo Decor - Product