Tabs Section for Shopify

🥳 Recently updated to version 2
Tabs turn into collapsible accordions on mobile + more settings!

Add a Tabs Section to your product pages. 

It's easy to install with just a copy & paste, and can be used on any theme.

Add tabs for a variety of content types, and customize the design to your needs.

Simple design:

Use Emoji's:

Change alignment, colors, text style:

Use it for a long product description:

Tabs appear as accordions on mobile screens:

Preview:

https://dev-code-shop.myshopify.com/products/the-complete-snowboard

(password is 123, use the link again after logging in)

Content types

You can add different types of content in each tab:

Rich Text

Add any text here. You can use this for text that is shown across all products, or you can use a Metafield to show text that is unique to a product, like specs.

Product Description

This simply outputs the product description. Really useful if your description is long, and you don't want it taking up a lot of space above the Add to Cart button.

Page

This outputs any page content. For example, the Shipping & Returns policy, or an FAQ page.

Custom Liquid

You can use code here to output anything you want. Great for embeddable content like iframes for videos, calendars and other widgets.

App block

You can add any app here that provides blocks. A common use is a customer reviews app like JudgeMe, Yotpo, Shopify Product Reviews and others.

Works on all themes

The section will inherit your theme's style settings automatically.

The fonts, heading sizes, and colors should immediately be the same as the rest of your store.

Comes with settings to customize the look

Add a custom heading to each tab

The tab headings can be whatever you want them to be. And you can use emoji's inside them as icons.

Choose Tabs colors, size, alignment

Customize the color of the tab headings, on hover, and when active. Adjust the font size. Set the alignment of the tabs to left or centered.

Change the spacing in tabs & accordions.

Plenty of settings for paddings between various elements.

Choose container width on text blocks

A common design mistake is allowing really wide text across the page, which is hard to read. A narrow container around 600-800px will keep customers more engaged.

Simple install process:

1. Open up the code editor for your theme (Online Store > Theme > ... (three dots menu) > Edit Code
2. Click "Add a new section" under the sections folder.
3. Paste in the code and save. Done!

Now you can find the section in your theme customizer, together with all your other theme sections.

Why use my Shopify add-ons instead of apps?

No monthly fees

Buy it once and own it for life.

And if I release an updated version, you get it for free.

Built into your theme editor

Edit everything in one place using the native Shopify interface, not a separate app screen.

Lightweight

Shopify apps will slow down your store. Add-ons using native Shopify code will not. 

Seamless design

Apps sometimes stand out like a sore thumb. A built-in solution will look like part of your theme, be less buggy, and feel faster. 

Feedback?

I will be updating this product if I get any requests for new settings, features or bug reports. Feel free to email me at hi@ed.codes.