[2022 FREE] How To Add TABS to the Shopify Product Descriptions? Step-By-Step Tutorial

If you want to add product tabs to your Shopify product description, you are in the right place! In this video, we will show you the EASIEST way of adding tabs to your Shopify product page without the app. This method is FREE and tested hundreds of times.
🎯🎯 Backup your Shopify Store ➡ tinyurl.com/53...
👊👊 Learn how to double or triple your revenue in 6 months with Merchant Mastery - tinyurl.com/2s...
Get instructions here -- ecomexperts.io...
📷 Camera Andrew Uses: tinyurl.com/57...
💡 Video Lighting Andrew Uses: tinyurl.com/y3...
🎙 Microphone Andrew Uses: tinyurl.com/fr...
Gear Andrew Uses: tinyurl.com/5h...
Test Your Shopify Speed --- testmystorespee...
Add tabs to product descriptions to your Shopify store without the app for FREE - Step by step tutorial by EcomExperts.io
Just sit back, relax, take notes, and in the next 10 minutes, you will be able to add tabs to the Product description to your Shopify store. Don't forget to like and subscribe because more Shopify videos are coming out soon.
Check out our most popular coding videos:
Create CUSTOM PRODUCT OPTIONS on Shopify - Without the App | • [2022 Free] Create CUS...
How To Add a CUSTOM FONT To Your Shopify Store | • [2022 Free] How To Add...
Shopify Quick ADD TO CART Button On Collection Page! | • Quick ADD TO CART Butt...
💡How To Add TABS to the Shopify Product Descriptions?💡(WITHOUT the App) | • [2022 FREE] How To Add...
How To Add a CUSTOM NOTE field on your Shopify cart page? | • [2022 FREE] How To Add...
How To Add a SIZE CHART To SHOPIFY Product Pages - WITHOUT THE APP | • [2022 FREE] How To Add...
Shopify Page Builder Apps:
GEMPAGES PAGE BUILDER & FUNNEL SHOPIFY APP - Honest Review | • GEMPAGES PAGE BUILDER ...
ZIPIFY Pages Builder & Editor- Honest SHOPIFY App Review | • ZIPIFY Pages Builder &...
Email Marketing Shopify Apps:
Klaviyo Marketing Automation - Honest Shopify App Review | bit.ly/3bhg7m9
Omnisend Email Marketing - Honest Shopify App Review | bit.ly/2yBAoVb
Seguno Email Marketing - Honest Shopify App Review | bit.ly/3c37jkd
WebPush Shopify Apps Reviewed:
PushOwl Shopify App - Honest Review | bit.ly/3bb6SnX
Smart Push Marketing Shopify App - Honest Review | bit.ly/2qHPkxA
Push Monkey Shopify App - Honest Review | bit.ly/397BUv8
Review Apps Reviewed:
Product Reviews Shopify App - Honest Review | bit.ly/prorevi
Judge.me Product Reviews Shopify App - Hones Review | bit.ly/333UK3K
Yotpo: Product & Photo Reviews Shopify App - Honest Review | bit.ly/32ZBNPv
Stamped.io Reviews & UGCs Shopify App - Hones Review | bit.ly/2WsbajZ
Dropshipping Apps Reviewed:
Oberlo Dropshipping - Honest Shopify App Review | bit.ly/3hb92Hq
Modalyst Dropshipping - Honest Shopify App Review | bit.ly/2Muyfy4
Spocket: EU & US Dropshipping Shopify App - Honest Review | bit.ly/3eXlnxh
Printful: Print‑on‑Demand Shopify App - Honest Review | bit.ly/2QTFfbu
All of our reviews are objective and contain no bias towards the product whatsoever. Make sure you support our future videos by liking, sharing, and subscribing to our channel.
Want to see a hands-on review of another Shopify app? Let us know which one in the comment section below!
Shopify started over ten years ago when our founder Tobi wanted to sell snowboards with his company at that time called Snowdevil. He quickly realized it was incredibly challenging to sell snowboards online without an easy to use ecommerce platform. So he decided to create it himself, and Shopify was born.
How does Shopify work?
Whether you’re a budding jewelry designer and want to start selling your products, or a musician and want to sell your latest mixtape, or if you have an established business and want to grow, Shopify can help you. Hundreds of thousands of entrepreneurs from over 175 countries trust Shopify to help sell their products.
Below you’ll find the different products or services that you can sell on Shopify. Even if you know what you’re selling already, it may give you some ideas for other services you could sell to grow your business.
Physical products: A physical product could be something you make by hand, something you have manufactured, or something you dropship to customers. Examples include jewelry, bath bombs, t-shirts, gift boxes, beef jerky, or pins to name a few.
Digital products: This could include ebooks, email templates, audio downloads, Lightroom presets for photographers, e-courses, or clothing patterns.
Connect with EcomExperts.io!
Our site - ecomexperts.io/
LinkedIn - / ecom-experts
Facebook - www.facebook.c...

[@EcomExperts]

👊👊 Get access to *THE BEST* Ecommerce Email Marketing course ------ tinyurl.com/nnhrezf7

[@jacobreed2709]

Thank you so much Andrew! You really helped upgrade my shopify store! Thanks again!

[@anirudhaharitsa7850]

Hey Andrew. Very helpful videos. New sub. Could I know how I could add these tabs to all the product pages at once?

[@devine_noise]

Thank you, you saved me time at work where I had to implement this same functionality. I used snippets for each tab inside a product-desc.liquid section that's rendered on the product template. Data is populated through meta fields since the client has a couple thousand products.

[@Frozen1ne]

This worked great! I am curious on how to optimize this for mobile? The tabs are all over the place when I view my site on a mobile device.

[@kimjin470]

Really wanna say thank you for teaching this, you have helped my store so much, i always wanted to upgrade my store to give customers a better shopping experience, Adrew you had made it so much easier!

[@EcomExperts]

Thank you! :)

[@RickyRubik]

Nice video man, nowadays you can only find a few real videos that make the difference and explain what they promise to! keep it up!

[@EcomExperts]

Hi Ricky! I really appreciate your comment. We are always trying to be honest with all of our titles, descriptions and thumbnails. We are here to help, not deceive you.

[@RickyRubik]

@@EcomExperts that it really very appreciated! Keep it up!

[@kelvinleonidas3449]

a trick : you can watch movies on kaldrostream. Me and my gf have been using them for watching lots of of movies during the lockdown.

[@mohamedezequiel9458]

@Kelvin Leonidas Yup, been watching on kaldroStream for years myself :)

[@renedominic2627]

@Kelvin Leonidas Yea, I've been using KaldroStream for years myself :)

[@severogarciavelazquez7244]

I dont have the Product.liquid on templates. What do i do?

[@pinged9063]

hi, i dont have product.liquid. Is there something else I can use?

[@kenzanassila7211]

Thank you so much for your help !!! Your video is perfect. Greetings from France

[@EcomExperts]

Glad it helped!

[@riddhimagaratikar8401]

Thank you for this video. This was VERY Helpful. I have a quick Question: How do I change the width/height of the "cell" ? The one I use is not optimizing this for Mobile phones. Thank you in advance :)

[@janaisvilla6193]

Hi Andrew, I don't have the product.liquid under templates. Is it because I'm using a newer version or did I miss something?

[@STARESSO]

Good video! Coucou, may I ask why I input some contents on one tab, the content would so easily also shows on the other tabs?...

[@Thatswalter]

Great work, Andrew! I followed your instructions step-by-step, and now I have some great-looking tabs on my store's product descriptions... Keep up the good work! I just subscribed to your channel :)

[@EcomExperts]

Fantastic! Glad it helped :)

[@jannekegeven8153]

Thank you so much for this Andrew! I've been looking for a solution to make tabs on my product pages and I'm definitely not a confident coder, but this was super easy to follow and implement. Th tabs look great on both Debut and Narrative theme!

[@ggdsgoldengrovedentalservi9492]

Brilliant tutorial! So easy to use - only question, can the layout of the tabs be optimized for mobile phones?

[@ivyxmxk]

Hey, thanks so much. When I do this my list tap are vertical hyperlinks as opposed to horizontal tabs. Do you know what could have caused this please ?

[@yaritzidayannogeronavila6537]

Hello! I know this video was posted a while ago but I hope you are able to reply. I followed the steps and it works well except there are 4 light gray bullet points floating over the tabs toward the left. How would I remove this? Thank you!

[@nishachhantyal3582]

Thank you so much for your video Andrew.

[@EseAbigail]

WOW, thank you so much Andrew for this. It worked seamlessly! I'm so grateful you took time out to explain this and most of all thankful that you provided the codes. God bless x

[@EcomExperts]

Glad it helped! Wait until you check out the strategy videos and realize they too will make you more $ ;)

[@EseAbigail]

@@EcomExperts Andrew You are a star. I will be checking all you videos. Thank you for being so helpful xx

[@spencerharris4814]

I am trying to add a description with separate paragraphs and a list but when I save it and look at my website it is all bunched together as one big paragraph. Any tips?

[@harvesth9886]

Thanks Andrew! It works well! But what if the content in the description is a list (without bullet). How should I make it? Thanks!

[@cardjourneys717]

Is this method optimized for mobile? Also how do I make it so the tabs call on pre-written pages like “shipping”, “FAQ”, “Covid-19 announcements”, etc? That way I don’t need to write the info in the tabs of every single product page. Thanks in advance!

[@emily6479]

Hi Andrew, this is great! Thanks so much. I'm wondering how to change the font of the tab names (i.e. Description, Size Chart, etc)? My theme is Envy. I've tried to search font-family in the code, and tried changing this but it didn't work. Any thoughts? I'm new to Shopify and have no experience with code.

[@stephandhr07]

Great video, you the man!

[@EcomExperts]

I appreciate that!

[@isaiahparker862]

this helps out so much! thank you man

[@EcomExperts]

Glad it helped!

[@mkpatel14]

Hi Andrew, I am trying to add bullet points for features within the product description what is the best way to do this so it looks good on desktop and mobile. Currently the feature list only looks good on mobile.

[@160rav]

great video, simple and straight forward, however you added code to html for single product, so do I have to follow same process for all product, > 500?

[@pascalkoch6237]

Thanks for the video. Is this regular practice? Its a flexible method but it seems a little bit dirty to me, isnt it?

[@EcomExperts]

yeah... it's not ideal on the long run. let's just say I wouldn't build it like this if you hire us to do it BUT for a generic youtube video to non-coders that all have different code bases, it works well

[@pascalkoch6237]

@@EcomExperts I see, yes. What would be your professional way? I can't find another method actually..

[@vendingpending]

I have followed the steps exactly and cannot get the tabs to function independently. I can click through them but they all show the information from every category. I am using Empire as the theme. Anything you could recommend to fix this issue. It looks awesome and I would love to be able to get it to work.

[@ZeeWolfed]

Thanks so much it's work prefectly

[@robinbroodje]

Hi Andrew, I followed the steps on my debut theme untill 7:05. However it still looks like the description in 09:06 (live site), so no tabs. Do you know what I did wrong?

[@puystersauce]

Been trying to use this but i think i am doing something wrong or it is not supported for Shopify 2.0 online stores code? HELP. Thank you.

[@mzsourpuss46542]

Thankyou for this video. I have followed every step twice and the tabs are not changing when i save it. They are still showing as dot points. Do you know what I could be doing wrong and why it is not changing :(

[@kapowugc]

Thank you thank you thank you 🙏🏽

[@kyleklooster3248]

Thanks for the video, do you know how to customize it for the theme Narrative? I followed your steps to a T and my tabs appear but aren’t clickable. I’ve heard the Narrative theme can be difficult and doesn’t align the same as the other available base themes. Please let me know if you have a fix for this! Thanks.

[@EcomExperts]

Let me check

[@elliminieren8041]

Hello, this tutorial was awesome to follow. But I got one question remaining... which CSS code line is responsible to center the font in its height in relation to the box its in? I managed to change font, colors and stuff like that, but English is not my first language so I'm a little lost on this last thing :)

[@deardiaryco]

Does this work with Brooklyn theme?

[@saravikberg8864]

Great video! How do I change the dimentions of the tabs? I have three tabs on my product page but one is larger than the other two? Is there a code that forces the tabs to be the same dimentions? Thanks!

[@EcomExperts]

If you have experience with coding you can play with CSS code in the Step 5. :)

[@giacofa99]

Hey Andrew! How do you remove the automatic scroll down to text when clicking a tab? What part of the code should I delete? I'm using the Narrative Theme & it looks different from yours

[@OttKaselaan]

Thanks! But wouldn’t it be easier to use some kind of tab app?

[@EcomExperts]

It is easier, but all customer facing apps are adding additional requests and slowing down your store, so even if the app is free, it is always a better solution to go with code.

[@OttKaselaan]

Andrew from EcomExperts thanks Andrew! So, now is time to start coding, it seems☺️ I hope I won’t f*ck it up😅

[@EcomExperts]

Make a duplicate of your live theme! :D

[@vuongtuananh6899]

Hi, I use Narrative Theme,. I did everything as intruction but the tabs didn't show up in column, they show in row like in 9:06, what I should do next? thank you

[@shimahariri5396]

Hello, thank you very much for this amazing Video! Sadly it didnt work on my Website/Code. When i click on a Tab, the Site just jumps/scrolls down...do you know what i´m doing wrong? I´m using the Debut theme and your Version of JQuery. Maybe it´s a conflict with a Shopify App?

[@EcomExperts]

Hi Shima! Try to do it again, maybe you forgot something or removed some part.

[@kylehaddon7]

Thanks for the help! Everything works as it should on Desktop view but when switching to mobile, tabs will not change and page auto scrolls down? Also there is a border/background which takes away from it being "clean". Any ideas?

[@EcomExperts]

For that you need to brush up your CSS skills. Learning css is not that hard in 20h or so you should be up and running and be able to modify the background :)

[@Reza.Sarlak]

Thanks for the great Video. but what happened if I don't have product.liquid in my template ? I just have product.json

[@numannusrullah4838]

i want to show some related products on One Product as swatches . when user click on Product swatch will navigate to that specific clicked swatch product . for example shirt product have mode design like colors when Blue Product Display then other products display on that page as swatches like green , yellow, orange etc. when user click on yellow will navigate to yellow product and URL is also change according to product please help me with code . without any app .

[@Dagensehandel]

Thanks! Trying to upload photo to size chart but it's not working. I use the code from uploading photo to files in Shopify. Anyone know how to do it correctly?

[@jubz727]

Thank you!

[@EcomExperts]

You're more then welcome Jorge!

[@thuydoanphuong]

Hi Andrew, thanks for great guidance. I have this code {{ 'jquery-2.2.3.min.js' | asset_url | script_tag }} Do I delete it and add yours, or I keep this one?

[@EcomExperts]

The best way is to experiment and see what works best for you :)

[@ryenlee728]

is there a way to add images and videos from your computer into the tabs?

[@EcomExperts]

Yes there is! But unfortunately not as simple as a KZbin comment.

[@sykzen191]

hell good

[@abdonmcunha]

Does it work with the theme Debutify? I tried here but didnt show up the table.

[@EcomExperts]

Not sure. But you can ask their support to modify it for you :)

[@JahinShahriar]

can we add loxx or any review app in those tabs?

[@EcomExperts]

yes you could - by pasting the loox code into one of the tabs!!

[@afolabiabiodun7582]

Great video but sadly it not working for my theme - Providence. Do you know why?

[@EcomExperts]

I will test it and get back to you. :)

[@dajalynnee1754]

Am I able to use this code for the Debut theme?

[@EcomExperts]

Absolutely! This tutorial is done on the Debut theme. :)

[@zk1270]

Nice.thx

[@spacecantina.company]

Hey andrew, we are running a 2.0 theme and seem to have problems integrating most of this code into our store. There isnt a product.liquid but a product.json do advise!

[@Martin-zq4fq]

Bro this works perfect on the PC! mine looks the exact same as yours. BUT on mobile its different...😢could you pls tell me how i can make it look the same on mobile..?!😊

[@EcomExperts]

Hi Matijin! Could you provide a little bit more info? Which theme are you using? Which version of JQuery are you using?

[@Martin-zq4fq]

@@EcomExperts yess sure! i'm using Debutify. And i'm using de Jquery from your template! I also sended you photo's on facebook ❤

[@alexkaulich3680]

Hi, did you already fix that issue?

[@Martin-zq4fq]

@@alexkaulich3680 yes he did you have to make make the copy the live store

[@mohamedelbalboshy8101]

@@Martin-zq4fq Hey I have the same issue can you explain more how you fixed it?, Thanks in advance :)

[@EatingExplorer]

How come all of the text is visible and only scrolls down the text? How can I make it only visible when I click on the tab?

[@rickeshgurung7105]

Hey there, I just finished mines however my tabs looks like the ones at 9:06 . How can I make them look like yours. Thank you

[@EcomExperts]

Finished everything, meaning you followed the steps exactly like mentioned in the video ? Sounds like you only did it 50%. Let me know!

[@LeaTourneur]

@@EcomExperts Hi I get the same problem, and I did all the steps.. :( What do you think can go wrong ? Thank you ! :)

[@LeaTourneur]

I found the problem ! thanks you :D

[@santhanakrishna]

@@LeaTourneur Can you please explain what was the problem?

[@santhanakrishna]

And how you troubleshoot it?

[@abdonmcunha]

Hello, I cannot asscess the "Step 5: Adding CSS". There is a sign up label in front of it.

[@abdonmcunha]

Sorry, I made a mistake here. I got it.

[@mirandaclark1734]

@@abdonmcunha I have the same problem with the sign up label in front of it. Did you sign up and it went away?

[@EcomExperts]

Hi guys! You will got the full code in your inbox. :)

[@DiamondLifer]

Does anyone know solution to be able to automate pairing different packages with your products on your store, giving that shipping calculation to the customer and then purchasing labels based on that? I need help friends.

[@the.yueyue]

could have given a warning that if you delete your product HTML and the coding doesn't end up to your liking that you end up deleting all your product description and cannot get it back...

[@EcomExperts]

You have a point! We should've worked on the duplicate of our product.

[@growmamaglow]

Can I hire you to do this?

[@amandabecerra3679]

Hi! When i try to add bullet points under one tab it then shows on all the tabs. Is that I did something wrong?

[@EcomExperts]

Hi Amanda! Which theme are you using?

[@HometownHeritageBoutique]

How to Display Image in the Collapsible Tab

[@olivierpluut]

How can you change the fonts of the tabs and tab description box? shopfiy doesn't let you change that. thanks!

[@EcomExperts]

You need to dig into the code for that - not hugely complex but it requires some understanding of css, so it's not really something i can cover in a 14 min video ...:(

[@jorgieporgie1000]

HI. Where do i find the documents please?

[@EcomExperts]

Hi Jorge! You can find the instructions if you follow the first link in the description box below. :)

[@tohmsgotschalk8302]

does work with Debutify?

[@EcomExperts]

Yes it does work well with Debutify. :)

[@majharulislam5805]

I dont find product.liquid page. Can anyone where I can find this file?

[@jimmoefoe1471]

Please help. I have all the descriptions in all the tabs.

[@jimmoefoe1471]

The same description goes for every tabs. What could I be doing wrong here?

[@jimmoefoe1471]

Okay it worked when I pasted the jquery tab.

[@danielarangel8809]

Hi Andrew! I tried this video and when I got to the end my tabs are just frozen in place. I am not able hover over each tab and see the description like you can in time slot 12:42 in the video. Plz help :)

[@EcomExperts]

Hi Daniela! Did you make a duplicate of your theme? I would suggest you to try again, maybe you missed some part, or removed something. :) Also which theme are you using?

[@danielarangel8809]

@@EcomExperts Hi Andrew, shoot! I didn't... It's not live yet though. I will try again and make a duplicate this time. The theme I am using is Atlantic.

[@danielarangel8809]

Hi Andew, I did try other tutorials before I found yours that was most helpful! but the others didn't mentioned anything about doing a duplicate :(.

[@danielarangel8809]

@@EcomExperts Andrew, i just found out from my boss that he bought the Atlantic theme but is using the default theme. Would this be why it isn't working ? Thanks :)

[@danielarangel8809]

@@EcomExperts Hi Andrew, i did more research and the theme i am using is a Debut theme, not default. Sorry. Hope you can help!

[@svsproductions1]

I cant for the life of me figure out to get tabs to grow and shrink based on container width using flex. Any one with any advice? Been trying to do this for almost 2 yrs but not big enough deal worth paying an expert to do.

[@Yaboikilljoy]

Hey Andrew id like to remove one tab (I only need 3) do I delete all existence on the 3rd tab in the code? Also, it works great but I didn't add the last step of code cause the tabs duplicate. I don't have "theme.scss.liquid" maybe updated files. MANY THANKS

[@SOGFLY1]

What’s the point of editing pages if it doesn’t show up on website

[@EcomExperts]

Just publish the duplicated theme and it is on the website :)

[@roxciraecollection592]

im so crushed because I can't get this to work

[@WinningMarketing]

Very OLD - doesnt work anymore as products.liquid not there

[@Kellymd0307]

That link isn’t working for me 😔

[@EcomExperts]

Which one?

[@dylanopowell5884]

pourquoi tu parles francais dans l"intro?

[@EcomExperts]

Car je suis au Québec! ;)

[@markusfreise]

Wow. This is not a good approach from a UX point of view for the editor and it makes editing the content not very intuitive.

[@EcomExperts]

true but then again its a free code walkthrough on youtube geared to non developers...

[@isabelt.3377]

No need to act like you work for MTV.

[@EcomExperts]

I would like to work on MTV! :D

[@channel1-g4g]

hi can you help there is no product.liquid on my themes

[@jewelryshoppingcom]

Hello can you please post the code i am not seeing it thank you

[@thekindnessskateshop2701]

same... hope it doesn't take a year to find lol