Product Tabs in the Turbo theme in a Shopify Store

Product Tabs/Accordions are a great way to display a lot of product information on a product page.  Here's an example of what the tabs can look like on the product page on desktop/laptop:

And here's what the accordion looks like for the same content on mobile:

 

Here's the code for how to do it in the Turbo theme without an app, just liquid edits to the theme code.  This is a manual theme edit, so the code examples that I provide here will need to be edited by you to work for your store (tabs, colors, etc will need to be updated for your situation).  This code works in the Turbo theme and will provide tabs on the desktop/laptop and accordions on mobile.

What we're doing here is slicing up the product description with code that takes the product description content and turns it into a tab/accordion format.  What I do is replace the product.description element in the product.template.liquid section code with the following code that takes the product description content and slices it up and renders it in the tabs/accordion format. 

The first step is to add the following code to the very top of the product description content for the first tab.

And then this is the code that you put in the product description for each of the subsequent tabs.

This code gets added to product.template.liquid file.  In this code example, you'll also see an example of how to render a 'fixed' tab, in this example its for reviews from a review app. 

Here's the code to add to the CSS file.  It's this CSS that renders tabs on desktops/laptops and then converts the presentation to accordion layout on mobile.  I always create my own CSS file for a theme instead of trying to edit the theme's CSS files.  You'll need to edit this code quite a bit to map to your store's brand.



Jade Puma is a certified Shopify Expert. If you need any help with your Shopify store, we can help.


Stay in the Know