How To Add TABS to the Shopify Product Descriptions? [Works on All Themes Free/Paid] in 2024

TABS In Shopify Product Page Descriptions:
In this tutorial, you'll learn how to create tabs for your Shopify product page to make it look clean and organized, even if you have a lot of information to display. No manual coding is required; you can achieve this with a Dawn theme.
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
🔷 Timestamps:
00:00 - Introduction
01:25 - Functionality of Product Tabs
04:40 - Adding the New Tab Section
08:30 - Adding the New Template for the Product Tab
10:30 - Creating Meta Field
13:25 - Conclusion
Code/Blog: websensepro.com/blog/how-to-a...
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us

[@WebSensePro]

th-cam.com/video/CmX7zqixna8/w-d-xo.html Checkout updated Tutorial for tabbed content

[@WebSensePro]

We will add more functionality if we get 1000+ likes on this video. Upcoming functionality includes styling options, font, and padding options.

[@WebSensePro]

🔷 Timestamps:
00:00 - Introduction
01:25 - Functionality of Product Tabs
04:40 - Adding the New Tab Section
08:30 - Adding the New Template for the Product Tab
10:30 - Creating Meta Field
13:25 - Conclusion

[@user-dv9hh9gm3j]

This is super helpful thank you!

[@WebSensePro]

Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.

[@krs2717]

This video helped me a lot. Thank you

[@WebSensePro]

You're welcome!

[@realitiesoflife0]

Thank you so much

[@WebSensePro]

You're welcome!

[@miteshlakhwani]

Amazing video sir you're awesome

[@WebSensePro]

Thanks! 😊

[@ShoneTheGenije]

One advice. Purpose of the Tabs should be to pack information in compact way, without extending the page height and scroll length. Therefore, on mobile Tabs buttons should stay horizontally stacked, otherwise it is the same as collapsible rows element that we already had. Only one small benefit is that the currently opened tap closes, when the next one is tappet and extended. Which is something I'm sure could be fixed in the default collapsible row section. Also, instead of having to add Tab Title and Tab Content both from separate Metafield, it should be enabled to dynamically input both of those trough one met-field reference to meta object (containing both Tab Title and Tab Content) and being editable from one place for all the common info. That should also limit the need for extensive product page templates.
Also, worth mentioning lack of styling options, like choosing theme colour scheme.
I like your videos, and I'm thankful for the free code, so I really hope this will help you make code that solves actual problems. This one really ins't far from one we had.

[@WebSensePro]

Normally it's not needed to create 2 different meta fields. You won't need to change Tab Title much just the Tab Description for every product. Horizontally stacked tabs for the mobile version will look very weird when you have long Tab Titles as they won't fit if you have more than 2 tabs

[@ShoneTheGenije]

​@@WebSensePro Firstly, I might want to change Tab Title for various products, not sure how are you so sure I wont. Even if I won't, in case I want to change it globally for all the products it is applied to, meta object is a perfect way to do that at one place, rather than on all products separately. So, Tab Title and Tab Content should be able to dynamical connect to Meta Object trough meta field.
Secondly, horizontally stacked Tabs could be scrollable and fulfil the purpose of reducing the page height and scroll length. Firsts example that comes to my mind is Printful. Go to any product page and see how much have they packed in Tabs sections, what type of content is on those sections as well as how did they solved it for the mobile.
I know you are doing your best, and I know you are giving it for free, but without solving the real problems its hard to reach the real potential value. So I hope you understand I'm giving you thees advice from best intentions.

[@raufaamir]

Thank you for the super easy tutorial. Can we add tabular data or custom HTML in the tab content section?

[@WebSensePro]

Yes

[@webatAMP]

Thank you

[@WebSensePro]

Your welcome

[@susannenagy333]

Thank you - your video was very helpful and have a question. Is it possible to add style/format text for each tab? For example add bold/and add hyperlinks to website urls? I tried to add some basic html tags into the text block but it didn't work. I see your comment below "Upcoming functionality includes styling options, font, and padding options." Did that happen yet? THANK YOU!!

[@WebSensePro]

Yes, it happened. Checkout the updated video here th-cam.com/video/CmX7zqixna8/w-d-xo.html

[@quinetenteriennarien26]

Hi, how do you add Table Size to the description Tab you've just create? Seems like you can just add words to the Tab, and not Table with cm, Lenght, width size etc. 👈👀

[@WebSensePro]

Will need extra code for that

[@WebsiteVideosTheYachtRigger]

thank you

[@WebSensePro]

You're welcome

[@simon-it5ru]

Hi - Thank you so much for this
At the minute 6.34 - you say to hide the related products, and then you still have the dots and suddenly it changes to the tabs, but it doesnt say how it changes to the tabs.
I currently have the dots and i think a lot of other people also had this issue.
Please can you advise what the next step is, how do you change from the bullet point to the tabs?
I am stuck.
Thank you so much for the advise and for the amazing video

[@WebSensePro]

Thats weird it should update styling on referesh

[@simon-it5ru]

@@WebSensePro so do you save first and then refresh or do you just refresh???
You seem to skip out a step on the video !!

[@TenKeep-qx9be]

@@simon-it5ru did you manage to solve this? I'm facing the same issue

[@simon-it5ru]

@@TenKeep-qx9be Unfortunately not. Let me know if you work it out. Very annoying

[@manjunathbhandari108]

Hello sir! Could you please make a video on How can we show product images on the my orders page

[@WebSensePro]

On orders page?

[@Laxmika]

Ok If I don’t see the add section on the customizу page. In place of this there is the inscription This page doesn't have any sections.

[@WebSensePro]

Please clarify, not clear what you are referring here

[@danrong1562]

Hey thanks for sharing, when i add the tab, i dont have the three tabs side by side, instead, i have bullet points. how can i fix that?

[@WebSensePro]

Redo it, you missed something

[@ahmedhashim5783]

same problem

[@ahmedhashim5783]

no resolving @@WebSensePro

[@amandarodrigueztejeda8098]

same problem here@@WebSensePro

[@nerissabalzary3461]

@@WebSensePro I have the same issue and redid it a few times, any tips? thanks

[@isaiahcho2787]

how do u change the size of the tabs? i woud like it to stretch across the whole bottom of the page

[@WebSensePro]

Will need to add more code

[@user-ds5zj3qu8s]

how to do you customise the tab colours, background and font?

[@WebSensePro]

By using CSS code

[@SDwannabeHD]

On page load when you click on another tab, the 1st active tab is always active. How do we disable the 1st active tab when we click on another tab please?

[@WebSensePro]

Hmm... will need JS code for that

[@chavelschenk]

@@WebSensePro I have the same issue. Othwerwise a very easy and clean way of adding tabs to your shop. Well done. Is it not possible to refer to the description text instead of having manually copy+paste. e.g. {{product.description}} and for the other tabs link to pages created e.g. Shipping?

[@willridley-smith2387]

Hi, I managed to fix this. At start of the javascript section, there should be 2 lines which say:
tabs= document.querySelectorAll('.custom-tab');
tabContents= document.querySelectorAll('.custom__tab-content');
Just add the following after these lines
tabs[0].classList.add('active');
tabContents[0].classList.add('active');
By the way I am not very good at code/standard practices so this might noy be the cleanest implementation of this.
Also just remove lines 32-34, these lines make the first tab change it's colour to appear active

[@shubhanshudutt4204]

On my device the tabs section is not available ,what should i do now

[@WebSensePro]

Will have to check where is the issue

[@muhammadjunaidmansoorfarid836]

i follow all step but when i open product page i am unable to add section in prestige theme.

[@WebSensePro]

Yes, because this tutorial is not for prestige theme

[@ShopifyGuy]

Any plans to update for DAWN 13?

[@WebSensePro]

Yes latest version is coming soon

[@NihaTarannumA]

I am not able to find tabs section in my shopify store

[@WebSensePro]

Updated video releasing soon

[@kiserionda6811]

It didn't work

[@WebSensePro]

Whats the error?

[@HxZD]

​@WebSensePro great video. The tab option doesn't show for me in the section

[@nicoleau469]

same here. Can't find 'Tabs' option from Section

[@analystt99]

This makes no sense, what ecomm page has tab 1 tab 2, come on

[@WebSensePro]

Check pinned comment. Tutorial has been updated

[@WebsiteVideosTheYachtRigger]

lol... you said pretty ugly... which is it...? Pretty or Ugly lol hhaha

[@WebSensePro]

Hahahaha slip of tongue

[@leopolddewulf8980]

Hello,
Thank you for the video and the advices !
How can we do if we want to have tabs with the product description ?
I can't add the liquid : {{ product.description }} on the tab section
Best regards

[@WebSensePro]

You should use metafields

[@blastaq4267]

Not working for me i have dots standing under each other! Pretty sure i copied the code correctly

[@WebSensePro]

Make sure CSS is added properly

[@WebsiteVideosTheYachtRigger]

[@WebSensePro]

Thanks