There are many uses for tabs in Shopify stores.
There are now some great apps available for this from the Shopify app store.

We would recommend using an app, unless you only need to add tabs to a few pages - the following is not suited to adding tabs across a lot of products!

If you don't want to use an app we also provide a tool for getting some tabs into your theme - "Tabitha".  However, managing the html in your product descriptions can be fiddly and it will be necessary to re-apply the code changes required to any new theme so you may find the app method more straightforward.

Tabitha

First, some quick instructions!

  1. If you haven't already done so already, copy the tab code into your template. Note that this code comes bundled with the Expression theme, from March 2014 onwards.
  2. Choose the number of tabs to show.
  3. Enter your content into each of the big text input areas. Make sure it looks right in here before copying the code over to Shopify later!
  4. Click 'Generate Tabs' to generate your tab-ready content.
  5. Copy and paste the generated HTML into your Shopify description. Make sure to click the 'Show HTML' Clean Themes Shopify Support - show html button button in the top right hand corner of the description box before doing so! This is HTML you're copying in, not text!

Clean Themes Support Image How to find the Show html button


Are you using this somewhere where the tab code isn't already installed?

Copy and paste the following code into your theme, just above the </body> tag in theme.liquid:

<script>(function(e){e.fn.willtabs=function(t){var n={tabTextColour:"#333",tabBG:"#f5f5f5",activeTabTextColour:"#333",activeTabBG:"#fff",borderStyle:"1px solid #aaa",tabTopMargin:"20px",contentPadding:"10px 0",tabButtonPaddingTopBottom:5,tabButtonPaddingLeftRight:20,activeTabVerticalOffset:6,borderRadius:2};e.extend(n,t);e(this).each(function(){if(e(this).hasClass(".willtab-container")){var t=e(this)}else{var t=e(this).find(".willtab-container")}t.each(function(){var t=e(this).children(".willtab-tabs");var r=e(this).children(".willtab-content");t.css({margin:n.tabTopMargin+" 0 0 0",display:"block","border-bottom":n.borderStyle}).bind("checkstyle",function(){var t=e(this).find("li");t.find("a").css({"float":"left","border-top":n.borderStyle,"border-right":n.borderStyle,"border-left":n.borderStyle,"border-bottom":"none",background:n.tabBG,padding:n.tabButtonPaddingTopBottom+"px "+n.tabButtonPaddingLeftRight+"px",margin:n.activeTabVerticalOffset+"px 0 0","text-decoration":"none",color:n.tabTextColour,"border-top-left-radius":n.borderRadius,"border-top-right-radius":n.borderRadius,position:"relative",top:0}).each(function(t){if(t>0){e(this).css("margin-left","-1px")}});t.filter(".active").find("a").css({color:n.activeTabTextColour,background:n.activeTabBG,"padding-top":n.tabButtonPaddingTopBottom+n.activeTabVerticalOffset-1,"padding-bottom":n.tabButtonPaddingTopBottom+1,"margin-top":"0",top:1})});t.find("li").css({"float":"left","list-style":"none",margin:"0"});e("<li />").css({"list-style":"none",clear:"both",height:0}).appendTo(t);r.css({clear:"both",padding:n.contentPadding});t.find("a[data-title]").each(function(){e(this).html(e(this).attr("data-title"))});t.find("a").bind("click",function(){r.children(".tab-"+e(this).attr("data-tab")).show().siblings().hide();t.children(".active").removeClass("active");e(this).parent().addClass("active");t.trigger("checkstyle");return false});t.find("a:first").trigger("click")})})};e(function(){e("body").willtabs()})})(jQuery)</script>


Enter your content here (paste it in, if you like)


How does it look?

Click this button to generate the tabs:

Then, see how they look below:





Now, copy the following into the HTML view of your description:

Continue shopping
Your Order

You have no items in your cart