How to add tabs in Dawn theme UNDER the product description section

Store Design
1

Hello,

We are using the Dawn theme and on our product pages, we would like to use tabs. The problem is that Dawn theme only propose the block “collapsible tab” in the product description section.

Our tabs contain a lot of text, hence we don’t want to put them in the product description (on the right of the product pictures) but below the product description. This way the tabs can use the full width of the screen and it’ll be easier to read for our users.

How can we achieve this :

  • by a plugin (I saw some tabgs plugin but they are not free) ?
  • by using custom liquid (I’m not familiar with this yet but ready to try if guided) ?

Thanks a lot :slightly_smiling_face:

2

Hello

I have understand your request here and I will like to shear you tips on how to do it

1 Like
3

Thanks for your help :slightly_smiling_face: can’t wait to see our product pages with those nice tabs !

4

Hello @RachealOlubiyi

I was under the impression you had an idea on how to add the tabs we are looking for.

Any chance you or somebody from the Shopify community could help us ?

Thanks in advance for the help :slightly_smiling_face:

5

@marion1234 did u get an answer for this? I would love to know how you achieved it.

6

In order to do this, there is multiple ways.

The easiest is a plugin that allows to do this.

Another is using a HTML editor. You can use the one from out the sandbox that works well.

https://parallax-dev-shop.myshopify.com/pages/tabs?ref=out-of-the-sandbox

You can edit then just cut and paste. Pretty simple there but if you have a lot of products this can be a lot of work to copy and paste each one the way you like it.

The Other way is to modify the liquid page to add the scripts to this
The code most common would be.

  1. Product description tab
  2. Shipping tab (which is taken from a page called Shipping)
  3. Policy tab (whose content is taken from a page called Policy)

To see how this is done here is a tutorial

https://happypoints.io/add-tabs-to-shopify-product-page-without-app-c2-stt-57/

The other way is to add jquery and then add the proper javascript for logic.

You can see that here. https://www.codegearthemes.com/blogs/shopify-help/add-tabs-in-product-descriptions

7

Thanks for the help.

FIY We have not tested yet your solutions as in the meantime we settled for keeping the tabs in the product description to save time.

8

Just in case, some one need an updated solution