[Shopify - 2024] How To Create Collapsible Accordion for Product Description - Product Page Tabs
ฝัง
- เผยแพร่เมื่อ 7 ก.ค. 2024
- In this video, I'm going to show you how to create collapsible accordions for your product descriptions using HTML and CSS. This is a great way to add some extra visual interest to your product pages, while also making them more user-friendly. So if you're interested in learning more, keep watching!
Do you want to create collapsible accordions / tabs for your product descriptions on Shopify? You're in luck! In this video I'll show you how to do just that. It's really easy and it will make your product descriptions look great which will shows nice looking tabs without any paid app. Enjoy!
Tutorial link for code: websensepro.com/blog/how-to-c...
00:00 Intro
00:50 Adding script code
02:14 Adding CSS code
02:55 Adding JS code
03:35 Creating Meta Fields
06:50 Adding code in product-template.liquid file
08:19 Previewing Accordions in Product Description
08:30 Adding Metafield values
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us/ - วิทยาศาสตร์และเทคโนโลยี
![[Custom HTML in Shopify] How To Create Custom Section For Raw HTML](/img/n.gif)
Hy! it helped me a lot! Thank you
Your welcome
@@WebSensePro how do i get the links to copy?
@@nyaradzotaguzu9060 using html Ahref
Really helpful. I hope you will keep giving us such a precious content.
For sure
It worked!!!! Great. Thanks man
Great to hear!
So useful 😍 Thank you so much!
Your welcome dont forget to subscribe
Amazing explanation 👏👏
Thanks for appreciation, if this video/channel you helped in any way please support by Subscribing and Hit the Like button.
Thank you!! This helped me figure out how to setup the collapsible tabs that the one free theme includes, was going bonkers trying to figure it out. 🤣🤣
Lol dont forget to subscribe
@@WebSensePro Already have. lol
Great video guy
Glad you enjoyed it
You are a legend thanks
Thanks for appreciation, dont forget to subscribe and put the bell icon on
Thank you Sir. Helped me out
Thanks for appreciation, if this video/channel helped in any way please support by Subscribing and Hit the Like button.
Thank you for this video! It was clear and easy to follow - just subscribed to your channel! Could you also make a tutorial on how to add icons on the collapsible accordions? Thank you!
Sure thanks for the idea
thank you!
You're welcome!
was able to use this with the forge theme (with a few changes) thanks for your help :)
Glad I could help!
Thanks a lot man
Happy to help! Don't forget to sub, like and share
Thanks man it worked fine and helped a lot. You are a savyour
Very Helpful WSP thank you. Can you please advise if a table or text plus image can be added in the tab description area? For example a 2 column table and an image underneath it. Thank you in advance
Yes you can add just have to play with a little HTML and CSS
Awesome video brother
Your welcome
Thanks for the video. Please make a video on how to make menu-submenu accordian style in main menu for mobile view.
Thanks for the idea
Thank you!
But how do I add breaks in the description? It's all one big wall of text. doesn't work as you suggested
Edit: Figured it out: just add not at the start of each sentence
Great
This is genius! Is there a way to add an icon/element next to the tab title? For instance, I'd love to add an icon of Earth next to one of the titles in the accordion. Thank you!
Yes you can do that using font awesome
Thank you, very much! If I want the first part of my product description to always be visible and not an accordion, would I just not include it in a metafield? Thank you for any help...
Correct
Thank you for the great video. Is there an option to add an accordion under the existing product description - instead of replacing the description entirely with the accordion. Thank you
Yes just dont delete add code below description code
This is great but my tabs won't expand or collapse. I'm using the latest Dawn theme. I'm thinking this has something to do with the js code maybe being in the wrong place. I'm getting an error that says "Asset should be served by the Shopify CDN for better performance." Any ideas?
Please contact via websensepro.com/contact-us for paid support
Thanks for the vid. Before I jump in, will this technique work for multiple products which obviously have different descriptions and sizing details? I added collapsable tabs to my site but the content in each tab replicates for each product which is silly. Thanks
You can use Meta fields with them
Hi there,
Thank you so much! However, none of my metafield text is showing! I can only see the arrows, and no text, even after I've labelled them. Help please?
Hi Ashley,
Will have to check from backend, please email websensepro@gmail.com for premium support.
Thanks!
Hey thanks a lot for this tutorial! It was really helpful, but i just wanted to make a note that with the Debut theme ver. 17.14.1 jquery 3.2.1 worked but the 3.5.1 did not. I don't know the reason for this as i'm very new to customizing shopify but thought it might be helpful.
Also, if possible could you please share how to alight the accordion to the left and not the right as it is above? Thanks a lot again!
Thats weird will check that out
@@WebSensePro awesome, also sorry i meant align* to left
I have over 200 products in the store. When I follow this process, which I did in a duplicate Debute, all products show only the tabs without information. So I must edit over 200 pages. Is there any way to add these tabs to only particular pages?
Yes can be easily done via Shopify if condition
Hey, thanks for the detailed video. However, I'm unable to find theme.css file (or any .css file). I'm using the Debut theme Version 16.7.1.
You can add CSS code in any CSS files
In the dawn theme 14.0.0 there is no theme.css. Any updated tutorial?
Will create one
Hello, I am stuck on step 5. I am using the Prestige theme and I was able to locate the product theme but in the text field the only area I see product.description is lined to pin interest?
Contact websensepro.com/contact-us for paid support
For the Studio template, there's no theme.js, which one should I use instead?
Any .js file with in theme files, let us know if it works fine on studio theme
I dont have a theme.css file and product template liquid file located in my shopify code please how can i go about it, is it that i have another version and how can i go about it in this case?
Which theme and version you are using?
Am looking for a solution for this> we already have accordion menus (4 of them expandable) however we want to move them all up on the page to under reviews and before Add To Cart. How can we do this while preserving all the text contained within please ? 🙂
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Does not work with new themes like Dawn and probably other now in 2023
It actually works. It depends why you are using it. I am going to update this tutorial with Dynamic Accordions
tried to do this but the first script has a red line and I get this message when I hover over the script "avoid parser blocking script by adding 'defer or 'async" any help with this please .
Just add asyn like
hello sir , hope you are doing great eveything is very well but in my free refresh theme, i did not get these file theme.css, theme.jss , “product-template.liquid how should i do now with reference to it ? must tell sir i am waiting for your respond
This tutorial was created when it was Debut theme which is no longer supportable. In your refresh theme you can use built in feature you can use "Collapsible Row" block
i think this is gonna work
Yes it will 😅
The css code was not showing as an option for me, the end result was simply three bullet points added where there should be collapsible fields and nothing pulling through from metafields, any tips welcome!
Add css code in theme.liquid in tag
I’m using the prestige theme and on my product page only first and third title and description show up .
Also is there a way to change it so that the first tab does not automatically open when you press on the product . My first tab is automatically opened whenever I open a product on mobile and computer
Yes it's possible some JS code
Hello, I don't have the theme.css in my shopify sense theme. What should I do?
Sense theme has base.css file
hey bro, while adding the css code, apperantly i dont have any files in the asset file its empty what should i do
? thanks!
That's weird never saw any theme without CSS files. If you want help please email websensepro@gmail.com
hello great video. I just have one question. I dont have the file theme.css. Does shopify had changed the name? Thanks
Add CSS code on any .css file, your code should work. Great muscles bro :p
hello. I am using the craft theme. I couldn't find theme.css so I pasted the code to base.css However, I don't seem to find theme.js Where should I paste the code please
Find other JS file
The code on the screen does not match the code in the link provided to get the code. Is this an error? There are two lines codes on the screen but one from the tutorial's page. I tried with the code from the link and it does not work for me.
Thats weird it should be working fine
Hi, i have added but the text content didn't appear. Hope you can help. Thanks
Match custom field names properly in the code, make sure there is no spelling mistake
I can't find theme.css in the craft theme, where can I add the second step? thank you
theme.liquid
Hello Sir, I need to add button above product picture on shopify how would i do that? Pls help me out!
Subscribe to our channel and stay tuned, we will create a tutorial on your request. Thanks
hi how do i add different collapsible content across all my products. the problem im facing is the collapsible stays the same through all the products, i want to add different details in accordance to the product. please let me know how it can be done.
You can do this by adding meta fields, check our video related to meta fields
If this video/channel helped you in any way please support by Subscribing and Hit the Like button.
Error: Cannot overwrite generated asset 'assets/theme.css' in second step (theme.css). Please Help!
Please share video time stamp where you got this error
I cant find the theme.css folder in my theme. Is there any way to bypass this or do i need to change theme for that?
You can add any .css file, which theme you are using?
I’m using studio theme
hi, how do I put the collapsible content under the product pictures?
Will need to change liquid code for that
Hi! My collapsable items aren´t working, any help with that? Thanks
Hi Gustavo, Sure email info@websensepro.com for premium support
what should i do if we need ::after icon on right side?
Add css in code :)
Not working on Dawn theme v10???
its not clickable or collapsible
You can add Collapsible row from Customize settings
In dawn theme there is no theme.css file so how can I edit ? Pls answer sir asap!!
This is not for Dawn theme, dawn theme already have this feature built in
i dont know why but i cant find the css file it is not possible any more?
Are you in Dawn theme? You should have base.css file
Hi
Great video but my theme (Dawn) didn't have a "Theme.css" in "edit code" when i searched for it?
Use base.css
@@WebSensePro Thank you! And what do i do with the "theme.js" issue? :) I don't have that either.
I see now in product.json in templates that i have a "collapsible_tab" look already built in my theme.
Please see below code:
*
"collapsible-row-0": {
"type": "collapsible_tab",
"settings": {
"heading": "Materials",
"icon": "leather",
"content": "",
"page": ""
}
},
"collapsible-row-1": {
"type": "collapsible_tab",
"settings": {
"heading": "Shipping & Returns",
"icon": "truck",
"content": "",
"page": ""
}
},
"collapsible-row-2": {
"type": "collapsible_tab",
"settings": {
"heading": "Dimensions",
"icon": "ruler",
"content": "",
"page": ""
*
But there is no way for me to edit or add the information for each individual product that i have, do you know what i mean?
I dont have Theme.css file, on Down 5.0 version how can i do That?
Add code in any CSS file
theme.css and themes.js are not showing
Hope you can help, I’m stuck on the last step, I don’t have anything coming up when I search description?
Would love to help email us at websensepro@gmail.com
Would love to help email us at websensepro@gmail.com
hii, i want to add thumbnails of a featured product in cart in shopify so please make a video on it
Sure , will make one
How do I make the accordion static on all product pages? I want the functionality of the accordian, but instead of product descriptions - to say "30 days returns" Warranty" etc etc
You can directly add Text in main-product.liquid file. Just skip the Meta fields part
@@WebSensePro Amazing! Thank you so much
@@WebSensePro Sorry but the accordion content isnt showing, the drop down doesn't work.
@@nicolettezoric2200 Will have to check backend if there is a code mistake. You can order our premium services from fiverr.com/websensepro
brother I am using debutify theme 4.2.0 version and I do not see the " {{product.description}}, what do i use instead please, everything else works perfectly . I just need to finish this step. Please help and thanks for the video
You dont find anything when you search for 'description'?
@@WebSensePro i see many options with description but i don't see specifically "{{product.description}} like on the video
@@WebSensePro do I replace just any "description"?
@@focusrelentlessly8829 try doing that make sure to have a duplicate theme before doing so
@@WebSensePro alright, i will. Thank you
i didn't find product.description tag in debutify free theme code please help
Tutorial is for Debut theme
Can you add collapsible accordions to specific collections or specific products? Or can it only be added to all products as you have shown?
Yes it can be displayed on Specific products and collections but will need to use additional code for that.
@@WebSenseProwill you please share code here, if possible?
Is it possible to move it below the image of the product?
Unfortunately it's not as it will only work with in Form Fields
Hi, tutorial request: how can I add a collapsible row to a multicolumn section discription
Collapsible accordion you mean right?
Sir I got struck in another situation. I want to both accordions and description + Images. Somethings like this ⬇
First Description
Seond Image
Third Accordion
Yes its doable via code, you can contact us websensepro.com/contact-us
Is there a way to create this so that it shows up for some products, but not all?
Yes you can create a new product page template
hello i get to the end and then there is no product description code in the product template liquid what should i do?
Which theme version you are applying that on?
@@WebSensePro debut
Hello! Can this method be use on dawn theme ?
Yes you can! But not like this as ita for debut theme
how do i add link on the tab description
Currently it does not support links. I am in process of finding a solution for that
How can we have information inside the tab include line breaks? For example I have a FAQ tab, and between each question I need a space
Just add
@@WebSensePro doesn't work inside the descriptions, even if it's multi-line metafield I don't know why
@@WebSensePro I am trying to add and , it doesnt work either for me
@@imachynna I just figured it out, add infront of each sentence you want to break. Do not use
@@hasher22 try adding and css class
Can I do this with shoptimized theme?
Yes please email websensepro@gmail.com for paid support
I can't see product description on my product template code, what do I do?
Try adding Test on your liquid code and find position to add custom code provided on this video
hi i tried doing this on dawn 9 but have't found theme.css, theme.js and product-template.liquid files, can you guide me how to add those files?
Dawn already have accordions by the name of "Collapsible Row"
How can you do this in dawn theme?
Dawn had built feature for adding accordions
thanks but what if you have 200 products then what i do?
Similarly you do for all the product page descriptions
my theme.css tab is not showing
Add to any css file
Brother. I followed the exact same method and even cross checked multiple times.
But this method is not working in my Dawn Theme
This is for Debut theme but it should work fine in Dawn Theme as well
Product-template.liquid is not present in Dawn.
So I did that in the main-product.liquid file.
Not a single metafield was visible on the product page.
Do you have any other tutorial for this ??? Accordion in Dawn Theme
Anyone knows why I cannot see theme.css under asset in my shopify codes? Thx
Which theme are you using?
@@WebSensePro brother I am using debutify theme 4.2.0 version and I do not see the " {{product.description}}, what do i use instead please, everything else works perfectly . I just need to finish this step. Please help and thanks for the video
It does not work with debutify theme
Its for Free Themes of Shopify
great video but the secoud stage is not possibale becouse "theme.css" is not exsit,what can I do?
You have base.css?
@@WebSensePro
yup I found thank you!
@@WebSensePro
I have another problem
I can't find the "theme js"
It shows me only "theme - editor.js" Is it correct to choose this one?
Try adding on it
@@WebSensePro thank you
I already found a solution
Is there a way I can put an image instead of text inside the meta descriptions?
You want to replace button with images?
@@WebSensePro no, the text that appears within the meta description. I wanted to replace it with images. But I found a way to do it with a built in feature in my theme (warehouse, last version). So I have it figured out. Thanks anyway
does this work with latest dawn theme ?
It depends on how you want to use it
hi is it possible to get the links to copy?
Use HTML ahref
This code is use in Dawn theme also ? ?
No this is for debut theme
How can I add image and table?
I am using
Empire
4.2.3
Subscribe to our channel, will create video on this topic
can't find theme.css, please help
You should have base.css if you are using dawn. Dawn also have builtin accordions
sir meta field has changed ..can give a guide on it
Yes its now under "Custom Data"
Can I use the Code in the Debutify Theme?
Not tested in Debutify, try and let us know if you get any issue
I cannot find the theme.css file on the dawn theme
Add in base.css
@@WebSensePro brother I am using debutify theme 4.2.0 version and I do not see the " {{product.description}}, what do i use instead please, everything else works perfectly . I just need to finish this step. Please help and thanks for the video
@@focusrelentlessly8829 search for description, you dont find anything?
Dude this doesn't work. Your blog post where you paste the code isn't the same you provide in the video. Fix it
Sure, will do
Bro! The first code is different, it's missing the second line!!
I mean there is no {{ 'jquery.... etc
What to do please!
Are you referring Accordion liquid code?
@@WebSensePro The code of the very first step. On the website is different than in the video (I mean on the website it's missing the second line). Hope you understand what I mean.
Also, I couldn't find theme js. There's only Theme js liquid. Can I still apply the tutorial?
@@howardmathews5572 Which theme you are using? Tutorial is for Debut theme
@@WebSensePro Debutify. I think it still should work, as they have similar structure.
@@WebSensePro It's funny though that you didn't mention Debut in the article, in the video, and description. But whatever. I'll install an app and save this headache lol.
i cant find css and js files in my theme
Which theme you are using?
@@WebSensePro dawn
@@emporia5148 you should have css and js files.
Doesn't work for me, I have Debutify Theme
Its for debut theme
id see any product description in my product theme
Not clear what you mean
@@WebSensePro how can i contact you?
info@websensepro.com
hi, i have added, but it is not collapsable
Did you add jQuery in your theme?
any help
Thank you so much for the tutorial, i'm also struggling to find the Product-template.liquid file and specifically the 'product-description', within the code. I was wondering if you would be kind enough to help me locate it please, my options within 'Sections' are:
product--featured-product.liquid
product--shop-the-look.liquid
template--product--recommentations.liquid
template--product-description.liquid
template--product.liquid
Thanks for contacting, please share all the details via email to websensepro@gmail.com
@WebSensePro "description": {{ product.description | strip_html | json }}
This is the code and when I'm replacing it, it is not working.
Which theme you are using?
this does not work with debut as there is no product-template.liquid so upset this is what i needed to make my page look better
Whats your theme version?