Product Tabs ‑ Easy Tabs

BACK

Home Shopify App Product Tabs ‑ Easy Tabs

How to add tabs on your Shopify store's product pages

hello everyone this is corin from speed,ecom and in this new tutorial,we are going to see how to add tabs on,your shopify product pages,this is a very useful one because you,will no longer need to add,all the redundant information in the,product descriptions,manually this way you can only do it,once and it will show in every product,page,this is what it will look like at the,end and before we begin,please don't forget to subscribe to the,channel so that you don't miss out on,any of the upcoming,cool tutorials that we have prepared for,you also there is one other thing you,need to do,before making any changes to your theme,files so go to online store,themes then click on actions and click,on duplicate,this way you will have a copy of your,theme and in case you make any mistakes,you will be able to go back to your,original theme files,without losing your work you can see,that i,already have a copy of my theme so we,will start with the tutorial,it's going to be fairly easy you have to,go back to the,written tutorial page you will find its,link in the description of the video,and you have to copy this code,there you go and once you've copied this,code you will go back to your store,click on actions then edit code,here you will have to open the sections,folder,and open the file under the name product,dash,template.liquid,there you go now in this file there is a,lot of code and you will have to find a,specific line of code,that goes by product that descriptions,so you can just do a ctrl f,and then product that description,there you go it's here then you will,have to delete,this line completely and paste the code,that you just copied,once you've done so you will have to,click save,now let's see what it looks like in the,product page this is a normal product,page of my demo store,you can see there are no tabs and if i,refresh the page,you will see the different tabs show,here,first you will notice that the,description that is unique to every,product and that you can add in the,shopify product editor,will go under the description tab then,you will also notice that we have two,additional tabs,and these are the tabs that we can add,generic content that will be shown in,all of the,product pages and now i will explain how,you can customize these additional tabs,so go back to the code editor and here,we will be able to add all the content,we want,alright so the first thing you can,modify are the titles of each tab,you can see we have three lines of code,here that represent,each title of each tab we have tab one,description,tap through shipping and returns and tab,three any questions,you can really personalize the titles by,anything you want for example,say you don't want to add shipping and,returns information,so you can just change the title and,change the content of the tab itself,then here we have the contents of each,tab itself,you can see that for tab one we have the,line of code that goes by,product that description which is the,code that we just deleted

The above is a brief introduction to Product Tabs ‑ Easy Tabs

Let's move on to the first section of Product Tabs ‑ Easy Tabs

[ 2022 FREE ] How To Add TABS to the Shopify Product Descriptions? ✅ Easy Tutorial

hey there welcome to you in my youtube,channel in this tutorials i am going to,show you how to add,review,as a tab with product description in,your shopify product page so first i am,going to show you a real example,looks here,here is the product description and,additional information with tab,and here is a review tab so basically i,wanted to add a,tab,for review,in my clients website here is my,client's website and i'm going to open,any product from,here here is the product page and i,wanted to add a button,for review as a tab,with description,now i am going to show you how you can,do this first i am going to my,shopify admin panel click on the app,because,i will use a free app for this project,then,click on the,view more app in this collection,now i am going to search,ymq free product tab,then click on the search icon here is,the app that we are looking so i am,going to click on this app title,click on the add app button,click on the install app,okay we have installed app now going to,set up this app,so click on the add static tab button,title review,then,select type,shopify review we have to add another,app that names shopify review so i'm,going to copy this,app name go to my admin panel click on,the view,more app in this collection,search shopify review click on the,search icon here is the app that we are,looking product review,click on the add app,install app,okay we have done now go into product,tab refresh this page click on the,array static tab type review reviews,select shopify reviews then click on the,save,okay we have done,now i'm going to,check my website,wow,we can see that there is a review tab,looks very good and we have to remove,this,wow it's work so we have done this,process very successfully so thank you,for your time to watch this video if you,think this video is helpful then click,on the like button and subscribe to my,channel have a nice day bye

After seeing the first section, I believe you have a general understanding of Product Tabs ‑ Easy Tabs

Continue the next second section about Product Tabs ‑ Easy Tabs

How to add Product Tabs in Shopify | Free Easy Guide no Apps

hello everyone thank you again for,joining this is yet another video from,resolutions design this video we're,going to talk about how to set up tabs,in my product page,it's a beginners tutorial as always,mentioned before all of you guys that,are brand new watching this if you want,more topics on this please subscribe and,smash that like button it is very very,much appreciative that's how I'm able to,create more and more content and be,consistent previously before I was just,throwing like maybe one video a month or,whatever but now I'm realizing that a,lot of people are commenting and,therefore I'm trying to do a schedule,where I'm posting videos Mondays,Wednesdays and Fridays so hopefully if,you appreciate this type of content let,me know in the comments let me know to,keep pushing right and then I'll go,ahead and keep pushing right but in,order to do that please subscribe and,also push the like button let's get,right to it okay so we're gonna start,off with the coffee shop famous,combination coffee shop right and the,theme that we're gonna talk about is the,theme that I've been doing tons and tons,of tutorials on and it is called turbo,so I'm gonna leave the link in the,description turbo again it's the primary,reason as towards why I'm constantly,making these videos because we use it,for a lot of our websites we use it for,a lot of developments it just solves a,lot of things and so here yet again,another great feature from turbo let's,get right into the tab system okay so,tabs what I'm gonna do first is that I'm,gonna open a separate tab on my browser,now this tab it's from out of the,sandbox the folks that actually,developed this theme from out of the,sandbox created this link here and we're,gonna come back to explaining what this,is about in a second okay so in products,we're gonna go with our main example,we're okay so the first thing that we're,gonna do is we're gonna go right here,and copy that we're gonna put this,content right here,okay we're gonna call this instead of to,have one we're gonna call it description,tab number two we're gonna call it,shipping tab number three let's have,number three just to show you some,tricks right we're gonna say video okay,and right here we just want to use some,more generic terms right so shipping,especially if you guys are doing things,like Aliexpress or anything like that,just make it very clear as far as the,expectations when it comes to shipping,something like that and then the third,one is video now this is very,interesting because with video let's see,if we go to youtube right if we go to,you if we go to youtube and we just,search anything we just search something,like I don't know coffee coffee,commercial coffee mug commercial okay,red coffee mug commercial I seen on TV,this is just to grab an example right so,we're gonna go right here and what we're,gonna do is we're gonna try to see if we,could grab URL write a URL embed code so,if I click on share and I click on embed,right we're gonna get this

After seeing the second section, I believe you have a general understanding of Product Tabs ‑ Easy Tabs

Continue the next third section about Product Tabs ‑ Easy Tabs

Woocommerce Custom Tabs - How to Create & Manage Woocommerce Product Tabs

what you see here is a default,woocommerce single product page with a,three tabs in this video i'm going to,show you how to easily,without any additional plugin you can,add your custom tabs,for example in this product i added,this custom tab called measurement chart,and this tab is shown to all products on,the site,also i had a conditional logic for,example,if the category is pants then show,also this shipping information tab what,you see here,and also i built a third custom tab,it's shown only if the categories music,and this is an enquiry form here,so if you want to know how to create,custom tabs,then jump in it's going to take only a,couple of minutes,now let's dive in in order to add custom,tabs,you need to paste some code snippets i'm,going to provide you,the link to the code snippets is in the,description of this video,now you have two options so the first,option is you paste the,code i'm going to provide you in your,child teams functions php file,i use the second option which is i'm,using the code snippets plugin,it allows me to create custom snippets,and,if i switch the team the custom tabs,will not,disappear they will be there and it does,not depend on the,team so i'm gonna go to the plugins,add new,and now search for code snippets install,and activate it,and if you do that then you'll see the,snippets menu on the left,click on add new,now let's start with the basics give it,a title for example custom,tab before we gonna add some custom tabs,i'm gonna show you how to rename or,remove the,default tabs if needed so paste this,code here,and these are the default tabs,if i want to remove the reviews tab,i'm just gonna leave this one here,activated i'm gonna,deactivate those two at the moment,so i'm only gonna remove the review tab,select only run on site front and save,changes and,activate and now if i refresh it,as you see reviews tab is removed,if i want to remove the additional,information tab,i'm going to unset this one also save,changes again,refresh and there it is only description,tab,now i'm gonna delete this one and next,i'm gonna show you how to rename the,tabs,let's save it and refresh it,all three are back if you want to rename,tabs just paste this code once again,this renames the description this,renames the review,and this renames the additional,information,save changes,refresh and all,tabs are renamed next one i'm going to,show you how to reorder the tabs,for example maybe i want the product,data to be the first one here,therefore i'm going to delete this one,and paste this one here,as you see first one is reviews second,one is description and third one,is additional information,and here is a priority this is an,important part,here lower priority means that reviews,tab is the first one,take a look i'm gonna save it,and refresh it here is the reviews,but if i'm gonna give it a priority,25 then it's gonna be the third one,priority 5 for the additional,information,save it and refresh it,and there it is additional information,desc

After seeing the third section, I believe you have a general understanding of Product Tabs ‑ Easy Tabs

Continue the next fourth section about Product Tabs ‑ Easy Tabs

BOOST Sales with Product Page Tabs! NO APPS, NO CODING!

in today's video i'm going to show you,how to add tabs to your shopify product,pages without the use of any apps or,coding so that you can take your product,pages from this,to this,before we get into the video if you like,videos about winning products drop,shipping shopify themes apps and,tutorials do us a favor and hit that,subscribe button and turn notifications,on now let's get into the video in order,for this to work you need to be using a,2.0 theme that supports the collapsible,tab block however if you do not have a,2.0 theme you can still add tabs to your,product pages using a free app we show,you how to do it in this video okay,let's jump right in,first click on online store,then click customize on your 2.0 theme,i'm using shopify's free theme dawn now,click this drop down at the top and,click products,default product,under product information click add,block,then collapsible tab,now it's important to note that we are,editing a default product page so,whatever tabs you add here will be added,to every single one of your product,pages so this is going to be ideal for,one product stores or if you do sell,multiple different items you could use,this to display information that's going,to be the same for every single product,so things like your terms and conditions,or a mission statement for your brand,unless you have a one product store you,wouldn't want to add things here that,would vary from product to product such,as size information or ingredients list,if you want to do that no problem there,is a way to do that that will display,different information for each product,using meta fields i did a video all,about it that you can watch here,for this example i'm going to pretend i,have a one product store so my tabs can,be specific for this product since,there's only one now here's my product,description before you can see it's,quite long there's a lot of text here,and left like this it probably won't,convert well so i'm going to tighten,this up using tabs,someone commented on one of our other,tab videos asking which converts better,tabs or no tabs what i would say to this,is that it's all about how they are used,tabs should be used to condense,information of lesser importance to,leave room for and to draw attention to,your most important information so i'm,going to change my first heading to,specifications,and then i'm going to copy the product,specs and paste them under tab content,and then you can click on the drop down,under icon and select your icon,and then now you can see that we have,our first tab,i'm going to add in another block,click collapsible tab,and i'm going to title this one warranty,i'm going to copy and paste the warranty,information into the content tab,and then select my icon,i've done the same thing for shipping as,well and now you can see i have three,tabs,you can also attach information from,your pages so for example if i wanted to,add in my return policy i could add,another collapsible tab,and click select page select my r

After seeing the fourth section, I believe you have a general understanding of Product Tabs ‑ Easy Tabs

Continue the next fifth section about Product Tabs ‑ Easy Tabs

Flexible Product Tabs for WooCommerce

hi this is Elliot from powerplugins.com,today I want to give you a quick,demonstration of our fantastic flexible,product tabs for woocommerce plugin,flexible product tabs for woocommerce is,available directly from powerplugins.com,licenses are available for single or,multiple domains and as ever with power,plugins the more licenses you need the,cheaper it gets,something we feel is important to,support all you web designers and,developers out there,before we start I'm going to assume that,you already know how to install a,WordPress plugin if you don't please,take a moment to pause here and quickly,search up that process and come straight,back to resume this demonstration,once you have the plugin installed,navigate to the product tabs menu item,and select all product tabs,select new product tab,now you'll see a very basic dashboard,I have a product set up for a principal,printable hoodie it's a variable product,and what I want to do is add an,additional tab down here that can,display users submitted photos of people,wearing their hoodies,so I'm going to give this product tab a,title of customer,photos,I can then select my block,this plugin works with the native,Gutenberg block editor,I'm going to select gallery,navigate to Media Library,and select my customer photos,insert my gallery and make the normal,adjustments that I would make,if it was in any postal page,then navigate to the bottom of the,screen,I've got some more options here that,allow me to show this tab to title which,is the title I've set above for customer,photos,or I can choose not to display it,I can give a shorter tab title for the,tab so rather than custom photos I want,this to say your,customer photos,I can set the priority of the tab so I,can move it along the sort order of tabs,that have been displayed so I want this,to be the first one and it will display,open straight away on the page I'm going,to set that to zero,I'm going to leave the tabs slug as it,is but it does give me the option to,manually adjust that should I need to,finally I just need to attach this to,the product that I want so if I start,searching for hoodie,I can add that there or I can continue,and add this to multiple uh products,if I check my page,you can see that the tab is not,displaying,but then click publish,foreign,page,and you can see that the tab has been,inserted there,I hope you find this demonstration,useful,as I've mentioned before,flexible product tabs for woocommerce is,available directly from,powerapplogins.com,thanks for watching

After seeing the fifth section, I believe you have a general understanding of Product Tabs ‑ Easy Tabs

Continue the next sixth section about Product Tabs ‑ Easy Tabs

How to rename products tabs woo commerce

hello there everyone my name is pritham,nikki and i welcome you all to my,channel,in this video i will be talking with you,about how we can,change the name of our tabs for example,here you can see instead of description,which,generally come by default uh it is,showing,uh as more information instead of more,information here i can see the rating,and then the product data,so i will quickly show you how you can,change,uh tab name or even do manipulation,whatever is your requirement so uh,you can actually check this link that,i'm going to show you,i will also put this link in description,down below and,here is the developer level,doc so do not worry about it because the,procedure is quite simple you do not,need to,understand how this work and i will just,show you quickly,you know so here are some snippets,for removing tab here it is uh for,renaming tab,here it is likewise for reordering,and for customizing in this particular,case we are interested in renaming our,tab so i will select this,snippet,okay so i have copied this and then,we will go back to dashboard and,go to plugin and click on add new,and you required to add a snippet plugin,which i already did but i will just show,you quickly,which one you have to,so just write snippet,code snippet so this is the plugin by,code snippet pro,so you need to install this,after you install it simply activate the,plugin,and then click here snip it,and then you can click on add new so let,me delete this one,so after i delete you will see these,tabs,will be uh converted back to the,original,which is description and review now,uh i will click on snippet again,and here i'm going to click on add new,and then i will paste the code that i,have copied from here,now we can actually understand this uh,what,exactly it is saying the tab description,which is the first tab uh is going to,rename as more information,so let's say you don't want to write,more information,you want to write something else for,example,uh more,let it be more because this is just a,demonstration,and uh in case of review we are writing,rating,these are the comments so you can also,understand what exactly does this mean,so i'm going to remove this third tab,which is additional information,and now let's save it and activate,now let's go back here and make a,refresh,and now you can see we have successfully,renamed our tab name,so i hope that this video helped you out,in figuring or in renaming your tabs,to uh whatever you want if yes then,don't forget to like and subscribe to,this channel and i will see you soon in,my next video till then bye

After seeing the sixth section, I believe you have a general understanding of Product Tabs ‑ Easy Tabs

Continue the next seventh section about Product Tabs ‑ Easy Tabs

How to Add Tabs to Shopify Product Pages NO CODING!

if you want to take your product,descriptions,from this to this then keep watching,because i'm going to show you how to,break your product descriptions into,tabs,saving you precious retail space,funneling your customers through faster,no coding required before we get into,the video,make sure to hit that subscribe button,and click the bell if you're a first,time viewer,my name is jeff i worked at shopify for,three years and have reviewed,hundreds of stores struggling with,conversions the purpose of this channel,is to help you identify,and fix mistakes that are costing you,sales there are three ways to divide,your product description,into different tabs one is learning how,to code,two is copying and pasting somebody,else's code to the correct spot in,your code and the third is to use an app,as you may have noticed from other,videos that we've put out there,tabs by station is by far one of my,favorite apps,out there the two great things about it,is that it is both simple and it is,free so there is a hundred percent free,plan and you can 100,use it and it's very very useful now the,the paid plans they have what are called,uh shared,tabs and i'll get into that later on in,the video so the,the paid plans can be useful to you,especially if you've got different types,of,products um but even the even the,maximum plan is only six dollars a month,so,these guys are are awesome so first,things first you have to go to your app,section and actually go in and,install tabs by station and then what,you can do,is you can start using it so if you just,download it you don't even need to open,it if you don't want to,you can just start making tabs right,away so uh going back to our product,page here,i've taken out the the different tabs so,currently we've got,the full page taken up by these,different things you know there's,description features and specifications,so how do i,very easily and quickly uh translate,those into different tabs at the top,here,it's actually not that bad so i've gone,to the you know the back end of our,product here and what you would like to,do if you want to create a new tab,is simply highlight whatever you want to,be a new tab,uh go to formatting up here and by,default it uses heading four,so if i set that as heading four then,now that is a new tab,and it is titled as you type it in here,and we're gonna do the same thing for,the specifications here heading 4,and i'm just going to click save on that,so now if we go back to our our page you,can see that these are nicely divided,into those different tabs so literally,that is the,the bare bones of how to use that app,you can just,go through any of your products and,whatever you want to make a new tab,and just make it heading four and you,are golden,does that make sense let me know by,leaving a thumbs up,still have a naked question post it in,the comments so we can get back to you,so what else can this app do so i've,gone into the app,tabs by station and we're presented with,this screen here,uh wh

After seeing the seventh section, I believe you have a general understanding of Product Tabs ‑ Easy Tabs

Continue the next eighth section about Product Tabs ‑ Easy Tabs

How to Add WooCommerce Product Tabs in Elementor

in this video i'm going to show you how,to add woocommerce product apps to the,home page of your online store,with this you'll be able to display,featured products,best selling products,sales products or any kind of products,you want,so if you want to learn how to add,product apps to the home page of your,online store,keep watching,hello guys this is sonic here at giggle,babies web where i do web tutorials just,like this one so if you are new here,consider subscribing that's it let's,jump into the video,this is the website where i want to add,my product tabs to,to do that i click on edit with,elementor,inside the elemental editor i go to the,particular section where i want to add,my product tabs,in this case i want to add it,immediately under the hero section,so i hover on the next section below the,hero section and i click on the plus,icon right here,with this i'll be giving the opportunity,to add a new section i click on add new,section and i'm going to go ahead and,use a single column section,before i move forward i want to add a,pattern at top and at bottom,the section is selected i go over to,advanced i unlink the values under,pattern,top i enter 100,and then bottom i enter 100 as well,next i go over to widgets and i'm going,to go ahead and add in a heading widget,i call it top products,and i'm going to go ahead and center it,next i go over to widgets and i set for,tab,i have tabs with that drive here i drag,it and drop it under my title,by default i'll be presented with two,tabs,meanwhile i need three tabs so i'll go,ahead and duplicate any of this,or i can easily add a new item from here,so if i close this up from here i can,add a new item,in that way it will take me to the same,place,either way i'll achieve the same results,now the next thing i do is go ahead and,rename my tabs so i click on the first,one and i change the name from here,so i call this one featured,so that i display my featured products,in the first tab,i click on it to collapse it,the next one i click on it and i change,the name i call this one best selling,and finally the third one,i change the name from here and i call,it sale,perfect,if you are finding value so far please,give this video a thumbs up it does help,me out so that the video will be,suggested to more people on youtube and,also benefit more people all right let's,continue,now that i have all my tabs in place i,need to get the short codes that will,populate the various products,so to get the short codes i'll go to,this page,that is woocommerce short course,i'll leave a link to this page in the,description down below you can go ahead,and check it out,on this page you want to scroll to,example product scenarios,and this is where you can get the,various scenarios,so the first one i'm looking for,featured products,so i scroll to,features product that is scenario two,what i need to do is simply go ahead and,copy this shortcode,and i come back to elementor i click on,the featured products tab,take note in the text

After seeing the eighth section, I believe you have a general understanding of Product Tabs ‑ Easy Tabs

Continue the next ninth section about Product Tabs ‑ Easy Tabs

15. The product tabs with Bootstrap accordion

next we will take care of displaying,product types,that's like description,additional information product,attributes,reviews that are usually displayed in a,text component,but to make things more interesting we,will use bootstrap accordion component,so let's find it on the page,here it is and we can inspect the,structure,so it has,each item it has accordion items and,each item contains,a heading,and a panel,so that's a bit different like when we,have tabs,that that there would be like tab,parent element that would contain,individual tabs,and then there would be another element,that would contain,individual tap,panel content panels,but here with accordion,the layout is that we have like for each,for each tab we are repeating,one element that contains both the,header and the content panel,okay so,we will use product tabs action to do,that so let's add product tab section to,the top accordion element,and again we can see that,this will generate a template single,product,tabs tabs,and we first we have to choose the,layout either we will use the tabs,layout or the accordion layout,the difference is as mentioned before,that,for accordion we have,like the,item,that contains both,the heading and the content and then we,have this item repeated,for each,item for each,information panel,so okay,first of all we don't want to use,woocommerce default javascript to power,this accordion,because that would conflict with,bootstrap 5 javascript,so we will check this,and then,which element is repeated,for each panel,so this one accordion item is repeated,for each panel so we will select that,and then panel header,is the,element that represents the,header of the panel,inside the repeated panel,so this is this,the h2,and then panel header label,that's optional but usually,like in like in this case we have panel,header but then the actual text,is in the button element,inside h2 so we will select the button,as the element that,should contain the label of the panel,and then the content,this is then the panel content,and the content body where the actual,content will go,it might it's not necessary the same as,panel content like in our case we have,special accordion body,that then contains the actual,information so we will select that,okay let's,export,and see,what happened on the page,and we can see that,the,output,is the accordion,and then we have description we have,reviews,and,we can toggle between them,but uh notice them something special,kind of unusual like when we load the,page,both of the panels are open and that's,by design,so,because the first element is repeated,and the first element,has,if we go into the classes,so i will,disable javascript,so that we,it doesn't change while we are clicking,on it,so we have header,button,and here we have the the panel is,it has the show class that shows the,panel,and,if the header would have collapsed class,then this would be,like here you see it's collapsed that,closes,the the element but here we don't have,the collapsed class

Congratulation! You bave finally finished reading Product Tabs ‑ Easy Tabs and believe you bave enougb understending Product Tabs ‑ Easy Tabs

Come on and read the rest of the article!

I am a shopify merchant, I am opening several shopify stores. I use ppspy to find Shopify stores and track competitor stores. PPSPY really helped me a lot, I also subscribe to PPSPY's service, I hope more people can like PPSPY！ — Ecomvy