Custom Product Accordion Tabs

BACK

Home Shopify App Custom Product Accordion Tabs

[Shopify - 2023] How To Create Collapsible Accordion for Product Description - Product Page Tabs

hi guys welcome back with another Shopify tutorial and in today's tutorial we are learning how to add ,collapsible accordion on your Shopify product description so if you have a huge description ,and it's taking a huge part of your page so you should ,add collapsible accordion which will make your product page ,look more elegant and decent so without getting more delayed let's get into the tutorial,guys if you have a shopify product page where the description is long and you're getting a ,lot of wide empty space you can add collapsible accordions in order to make your product page ,look better so this is the tutorial which i'll be following ,i'll put the link in the description below so you guys can easily follow now let's go ahead ,and do the first step and in this step we will add the following code in our theme logic with file ,so in order to do that let's go back let's go to the backend of our shopify store,and from shopify store back in click on online store,and edit your current team code make sure to create a duplicate version ,if you are working on a live theme because i don't suggest you break anything on your live team ,so make sure to create a duplicate version before editing the chord now click on edit code,and from from there search for theme.liquid file,here's our theme.liquid file,and just below the head tag we will add following two lines,so copy it,and paste it below the head so i'll just add it on line number nine,click save,and then go to our second step which is adding the following code ,in our team css file so for that search for the css file,which is theme.css so click on theme.css file,and go down to the bottom of the file and here we can add our css cord,so this is our css cord i'll copy the cord and paste it hit save,and now let's go to our ,gs code so this code needs to be added in our js file of your shopify team now search for gs,and here we have theme.js file,so guys before we add the js code i would like you guys to subscribe my channel comment on the video ,below and let me know if you like this tutorial or if you wanna learn more about shopify so i ,just copied the js code and pasted on the bottom of theme.js file and now i'm going to hit save,now this is our fourth step where we will be creating ,meta fields and in order to do that i'll click on settings,and then click on meta fields,and from there i'll click on products,and from there i'll click on add definition now,i'll name this field first tab title,select the content type to be,text and then single line text,save the definition,and here we have the tab title field created now i'll create another field for description,and i'll name it first app description,now let's create second tab title second tab description and third ,tab title and third tab description so i'm gonna do this a little quick ,make sure to don't do any mistakes because the final step is to add the code in our theme.liquid ,file and if we do

The above is a brief introduction to Custom Product Accordion Tabs

Let's move on to the first section of Custom Product Accordion Tabs

WooCommerce Vertical and accordion tabs for product details

Login to your WordPress eCommerce site.,Goto "Plugins" --> "Add New",Click on "Upload Plugin",Choose your plugin zip file and click on "Install Now",Click on "Activate Plugin",Goto "WooCommerce" --> "Settings" --> "Products" --> "Vertical Product Tab",Here you can enable vertical tab/ accordion for product details.,Choose Type and set background color and other color settings,Now you can see it transforms product details tabs to vertical tab/accordion tabs,When you see it in a smartphone it becomes accordion tabs,You can also use this plugin as accordion tabs for desktop as well,You can also keep the default tab as it is and just transforms tabs to the accordion in smartphone only.

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

Continue the next second section about Custom Product Accordion 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

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

Continue the next third section about Custom Product Accordion Tabs

Change image on accordion tab click in Elementor Pro

in this video i'm going to be showing,you how to change an image whenever,someone clicks on your accordion tab,so if i were to go ahead and click on,this tab here,you notice the image is going to change,and basically it does the same thing to,the rest of the tabs,we can go ahead and swap an image out,whenever we click on a tab here,and that's pretty much what we're going,to be building if you guys do end up,enjoying this video make sure to like it,for the youtube algorithm and if you,guys haven't subscribed to the channel,please consider subscribing so you don't,miss out on any of my videos,hope you guys enjoy for those of you,wondering about this web agency template,i'll have a link to it down in the,description so you guys can go ahead and,download it for free now let's go ahead,and begin here now make sure that you,have your accordion and your image,inside a section with two columns you,can also use a toggle,widget as well and the toggle widget is,this one here so you can either use an,accordion or a toggle widget but for,this example we're going to be using an,accordion because whenever you click on,a different tab here it's going to go,ahead and close the next one that's why,i like using the accordion first thing,that we need to do is go ahead and click,on your image and then go into advanced,and then on your css classes,go ahead and type in toggle dash img,which stands for image now we can go,ahead and paste our script,now you can add it in the elementor code,area or you can add it inside of your,page i prefer the elementor code area,but for those of you guys wondering if,you don't have elementor pro you can,just go ahead and add an html widget and,then add the same code down here that,you would add in your elementor code,area i'm going to go ahead and delete,this for now and open up a new tab here,i'm going to go to my dashboard and then,go into elementor and elementor to,custom code and go ahead and click on,add new custom code so we're going to,call this accordion image swap and we're,going to have this on the body end very,important where you're going to use,always load jquery and then we're going,to go ahead and paste in our simple,jquery here okay so before we start to,edit this code we need to go ahead and,open up our media we need to grab some,of the image urls that we're going to be,adding to our,script here so make sure that you upload,your images that you want to be swapping,let me go ahead,and choose this one here,i'm going to copy this and then i'm,going to go ahead and add it to my code,here,there we go just like this just add it,right in here then now let's go ahead,and click update in case you made any,changes but now we need to go ahead and,find the exact tag of this um tab here,so let's scroll down right click it go,into inspect now we already have it set,to this image which is fine so we're not,really going to see much of a change,here but we're going to add it right in,here to this title here which is 2,4 9 1. and then w

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

Continue the next fourth section about Custom Product Accordion 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 fourth section, I believe you have a general understanding of Custom Product Accordion Tabs

Continue the next fifth section about Custom Product Accordion Tabs

Product Accordions in the Flex Theme

hey scott austin here and in this video,i'm going to give you some code that you,can use,to add accordion functionality onto your,product page in the flex theme,so if i scroll down to the bottom of,this product page here this is what i,mean by accordion functionality i like,to put the shipping and return uh,policies right onto the product page in,this accordion uh function so it doesn't,you know take up vertical space but,people can click on it and you know read,more information about it if they want,to and what i'll also do is i'll add,code to this for things like a,description about the vendor you know so,if it's you know from nike i'll say,about nike and have a little you know,paragraph or a couple lines that you,know text about nike and whatever other,information so you can,build on this code that i'm going to,give you and add more logic to your,accordions to have more information,stacked inside of the accordion,so quickly show you how this works,inside of theme customization because,what we're going to do is we're going to,make a section,um,in online store 2.0 all right we're,going to make a section so that's this,here this,product accordion section,and i can take that section and move it,anywhere that i want to,which is you know the beautiful sections,anywhere functionality can move things,up and down so,what we're going to do is we're going to,create two files,one is a,in our so now i'm in edit the theme,one is a section,and that one is called product accordion,or product,underscore accordion i do a double,underscore on the naming convention that,shop or the out of the sandbox team uses,within the flex theme so if i go down to,my sections here right they've got,product double underscore breadcrumbs so,i created a product double underscore,accordion and then the other file we're,going to create is a snippet file and,that i call product dash accordion dot,liquid,and we'll store that in our snippets,folder,and you'll see here it's going to be,right there,so what you'll want to do to start,is,add a new section by clicking this,little add a new section right here,and then you'll also want to add a new,snippet,using that link right there and use the,code that's gonna be on the,below the video if you're looking at,this on youtube there'll be a link in,the youtube comments to go to my uh jade,puma blog where you'll see the code,snippets there so you copy and paste the,code for those,and,this section file is actually pretty,simple i'm using this the standard,section functionality which puts spacing,above and below the element you can vary,it so if you're in theme customization,under product accordion the only,settings over here are the spacing,settings and the width that it takes so,there's no,content specific settings so the generic,settings that almost all sections in the,flex theme have,and then you'll see,here we also one other thing is we have,this specified only for product,templates um because this product,accordion is going to call,the prod

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

Continue the next sixth section about Custom Product Accordion Tabs

How to Create Dynamic Accordions or Tabs in Divi with ACF Pro - Divi Machine

hello my name is pete,welcome to this tutorial with the,machine this is going to be talking,through the accordion,or the tabs so in order to have this you,have to be using,advanced custom field pro unfortunately,here you can use the repeater,top field so you have to have the,repeater field in order for this to work,so what a repeater field is essentially,in this field type you choose a repeater,which is an advanced custom fit pro and,then here you have subfields,so you add all your different subfields,then when you're on your edits,your your post edit page here you can,add,another row for example and you add name,position score which in my,field group i have name position score,so you just basically add,add them over and over and over again to,repeats,and it's a good way to to give the user,the ability to add as many,as they need,okay so that's a repeater,now how do we translate that into,accordion or a tab,so you can see how it works over here so,we have these accordions,i mean ignore the the the beauty i,haven't,really made them look really nice or we,have tabs,and you can use our settings to,customize these just like in divi,okay so in your layouts,in your theme builder layout,add a repeater module which is our divi,machine module,this in case you haven't watched this,there's a video on this but obviously,it's changed now because this is an,updated version but there's two ways to,do it one is to just add your advanced,custom field items and then we repeat it,in a grid format,or you can use the advanced custom field,pro so this is where you need to select,a repeater field as your first thing you,need to do,then the repeater name which is the one,that you created,so i'm just going to select repeater,which is this over here,okay once i've done that i can select my,repeater field type,so what i wanted to show so one custom,loop layout here i can just create a,custom loop layout and then it'll be,repeated over and over again,i can select table and the table will,then render a responsive table that,needs to be basic fields only,then i've got these two new ones we've,added on machine 2.0,which is tabs and accordion so in this,option i'm going to select accordion,then in this new tab there's tabs,according settings,the first thing you need to set is what,is the title of the accordion or tab,so you see it's got this name frank over,here it's got frank,this is the title so you need to you,need a towel,divvy machine what is going to be the,title so in the theme builder we select,the title,so i want to go to my repeater,and it's going to be the name the name,is what i want it to be,so it'll be this this subfield,the next thing i'm going to do is select,the loop layout,so what the loop layout is is whatever,is showing inside of the accordion or,inside of the tab,i've just done it very very simple but,you can you can,you know explore your options with the,custom loop layout,so we select tabs loop layouts which if,i go to the divi,theme builder tabs video pl

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

Continue the next seventh section about Custom Product Accordion Tabs

𝐇𝐨𝐰 𝐓𝐨 𝐂𝐮𝐬𝐭𝐨𝐦 𝐀𝐜𝐜𝐨𝐫𝐝𝐢𝐨𝐧 𝐅𝐨𝐨𝐭𝐞𝐫 𝐈𝐧 𝐃𝐚𝐰𝐧 𝐓𝐡𝐞𝐦𝐞 - 𝐒𝐡𝐨𝐩𝐢𝐟𝐲 𝟐.𝟎 𝐓𝐮𝐭𝐨𝐫𝐢𝐚𝐥𝐬

hey welcome back graduates so today i'm,going to be teaching you how to add in,an accordion style footer to your dawn,theme now the reason why you're going to,want this is because it's going to help,organize your footer a lot of people,plaster their footers with,massive massive amounts of length links,and it's very confusing you know you,want your p you want your customers to,be able to easily contact you for,support check your privacy policies any,any important information you know have,a newsletter down there and just keep it,organized that way they're not scrolling,you know for you know miles and miles of,links which a lot of people do,especially with the dawn theme so we're,going to teach you how to add this,awesome little uh you know accordion,footer where that way you can you know,collapse and close and you know keep,things organized so anyways let's get,right to it i'm going to show you how to,do this you're going to have this little,file here that's going to tell you step,by step by step on how to install this,on your store and it's very very,painless like all of our tutorial videos,we keep it painless make it easy that,way you can save time save money and you,know make more money so let's get right,to it as always so we're going to close,out of this preview and what we're going,to do you're going to be in your your,shopify admin you're going to click on,online store and then you're going to go,and edit the theme you want to edit so,this one right here is dawn version 5.,yes it does work on the latest version,of dawn and also works on older versions,as well so we're going to click click on,preview here and let me just,make this small and just double check,that there's no accordion footer here,perfect so there's no accordion footage,so let's go and also edit the code,we're going to edit the code here and,then you will have a download file which,will contain two files the html file for,the readme and then the actual uh code,here i already i think i already have,this open but i'll open it up again,and then what you want to do is you want,to read what to read me so step one open,sections uh sections footer and we,already have that open so what will,happen is you'll log in you'll see this,and you're going to want to click on,sections you're going to want to go to,footer.liquid i can't spell clearly it's,in alphabetical order twitter.liquid and,that's it that's really it you open up,the file and it says add the whole whole,code before the whole file so what we're,going to do is we're going to get all,the code from this file here dawn,accordion footer.txt or txt and just,highlight all all of it copy it to your,clipboard,copy,and that's it now we're going to hit,enter,and paste,and then hit save,and that that's that's really it that's,that's the end of this tutorial that's,it's that easy and what we're going to,do is we're going to refresh,and just like that you have an accordion,footer now this flashing right here will,not actually show up it's

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

Continue the next eighth section about Custom Product Accordion Tabs

Shopify Tutorial: Hiding a Long Description in Collapsible Accordion (on free themes)

hello guys today i'm doing a requested,video but i hope that this is going to,be helpful to a lot of people this is,for anyone that has a really long,product description right and it's,pushing the rest of the page down and,people need to you know really scroll,to kind of see more information about,the product it's even worse if your,description is up above your buttons,and then people don't actually see your,add to cart buttons and your quantity,field and stuff like that right so,you may want to somehow,contain this entire description,inside something like a collapsible row,an accordion a toggle drop down whatever,you want to call this kind of interface,you click it and it opens up your,description but when it's closed it,doesn't take up space,i'll also show you,a couple of different options for,example if you want a little bit of,preview text so if you want like a short,description here right,and then you want a read more,with the rest of your description,um then i'll show you how to do that as,well and i actually think that this is a,much nicer solution than simply this in,case you're wondering no i'm not talking,about just using the collapsible row,blocks because,this is very limited obviously you can't,put like this wasn't intended for a lot,of text and in this all you can do is,like bold and italic i am actually,talking about the main product,description,about this field and wrapping the output,in a collapsible row like this or,actually splitting it so as you can see,this first sentence from here,is the first sentence here,and then the rest of it starts from,lowdom altera,and this is a london altera here so,actually splitting it here in between,these paragraphs so that it outputs in,two different places,showing you how to do all of that oh and,i almost forgot to mention but you are,going to be able to set this classical,description,as uh enabled or disabled on a per,product basis so if some products have,short descriptions and you don't want,the collapsible accordion at all,then this will be false by default,actually,and to turn it on you will have to click,true right and this is using meta fields,so if you're interested,in one of the features of shopify 2.0,which is meta fields and this will also,be a small introduction to using emitter,field,in a real life scenario i'm going to be,using,dawn right you'll be able to follow this,tutorial exactly if you're using dawn or,if you're using any of the free,shopify 2.0,themes right like dawn craft,crave sense all of these they have the,same code they have the same settings,if you're using a different theme from a,different company not from shopify then,i think you're still going to be able to,use this tutorial and kind of apply the,same concepts to another theme it might,be a bit more difficult but,many of these collapsible rows are built,in similar ways and what we're actually,going to be doing in this tutorial is,copying the code,that does these collapsible row blocks,and simply wrapping it aroun

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

Continue the next ninth section about Custom Product Accordion Tabs

How to Build Custom Layouts in Elementor Tabs

hey this is brian with king grizzly,and today i want to show you how to put,rich content,into elementor tabs what i mean by that,and some of you probably encountered,this is you want to use a tab layout,but you don't want necessarily the same,content in every tab or you want,something unique,but by default tabs mostly just let you,put in some pretty straightforward,text and pictures so i want to show you,how we achieve this effect,on a client site so we'll hop over,to our sandbox and i'm going to go find,those,tabs i guess they're called tabs yeah,attached here they are,so we drop them in now they're,inheriting a little bit of styles from,our theme,but you should get something you know,like,this with these tabs on the on the left,and the right as you can see by default,yeah you could stick in a an image,picture you could i guess write some,html if you really wanted to but,sometimes clients want to be able to,mess with stuff themselves,and the visual builders handy so what we,want to do,is figure out how could we put something,unique inside these tabs,so i'm going to go over to my templates,so over here to templates i'm just going,to add a new one,and i'll call it a section i'm just,gonna,give it a name like tabs um,i'll just call it demo so this would be,like demo tab one,we'll try to come up with some rich,content to put in here,and then basically build whatever it is,we want to put,in there let me see if i can show this,as a,let's see okay well you can disregard,the header and footer those won't show,up so i'm going to add a section,let's just say i wanted two columns and,do that,maybe on the right column here i want,something like,an image gallery so,i'll drop that over here basically build,whatever it is i can dream up so i'll go,to the media library,i'm just going to grab some random case,study,screenshots for fun,create a new gallery sure looks great,of course i could style this in a way,that looks,pretty good maybe on the left i want a,heading,i love cats and,just adjust sort of as you would um,to get the effect you want,i could even put in an intersection if i,wanted but,um this looks pretty good now one thing,to think about is,this has padding this section already so,this padding will come over into my tabs,so that's something i'll need to think,about but for now i'm just going to,publish this,and then if i go,back to my templates,there should be a shortcode for that see,that let's just,grab that short code let's go,we may need a refresh let's go back to,the page we're building to tab one,i'm going to pop that shortcode in there,we'll see if this works,okay so preview that,look at that pretty cool huh so,that's how you can do it you can build,whatever you want,and put it in these tabs using a short,code,the gallery functionality is still there,super slick,fun way to use this tabs feature as you,can imagine,you're kind of only limited by your,imagination and you can of course style,for,tablet and mobile here in the template,right so i cou

Congratulation! You bave finally finished reading Custom Product Accordion Tabs and believe you bave enougb understending Custom Product Accordion 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