How to Add Interactive Tabs With Popups to Your Shopify Store

Tabs with popups Shopify tutorial thumbnail
Reading Time

I'm a Shopify Expert with 9+ years in this (I don't mean that in an arrogant way). Tabs with a popup are useful when you have a lot to say and you don't want a wall of text on the page.

Long story short, this section is a grid of clickable cards. Click one, a popup opens with an image, a description, a few feature blocks and a button. No app, no extra JS from a third party.

I built it this way because most tab apps load a library you don't need. This one is copy/paste. Last tested on Dawn in 2026.

Works on Dawn, Sense, Craft, Spotlight, Taste, Refresh and most OS 2.0 themes. Download a backup of the theme first. If something breaks, you can roll back in about 10 seconds.

This tutorial is compatible only with Shopify's official free themes: Colorblock, Craft, Crave, Dawn, Origin, Publisher, Refresh, Ride, Sense, Spotlight, Studio, Taste & Trade.

Looking to install this on a premium or custom theme? Contact us.

How to add it

  1. From your Shopify admin, go to Online Store > Themes.
  2. Find the theme you want to edit, click the 3 dots > Edit code.
  3. Open the sections folder and click Add a new section. Name it exactly ezfy-tabs-with-popup. The file name and the section name have to match, otherwise Shopify won't load it.
  4. Paste this code, then save. This is the whole section, schema included:
  5. Click Save.
  6. Click the 3 dots > Customize.
  7. Click Add section and look for SJ Tabs With Popup. Add it to the template you want.
  8. Add a tab block for each item, then save.
  9. Save the theme.

If you prefer Shopify's own editor docs, they cover Edit code here: Edit your theme code.

How to customize it

Start with the section title. Then add a block per tab. Each tab can have a label, an optional image, a popup title, a description, a main image, up to four feature highlights and a button.

You can freeze page scrolling while the popup is open. Do that. Otherwise people scroll the store behind the modal and get lost.

Colors, sizes, borders and the popup layout are in the section settings. Keep the popup content short. Four features is already a lot on a phone.

If the tabs don't show up

Check the section file name. It has to be ezfy-tabs-with-popup.

In Customize, look for SJ Tabs With Popup.

If the popup is empty, the tab block is missing the popup title or image. Add those in the block, not only in the section.

If you get stuck, tell me which theme you're on. That usually solves it.

Back to blog

Leave a comment