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. 🤣🤣
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.
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!
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
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?
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!
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
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!
@@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?
Thank you so much for this tutorial, I just have a question about the theme I am using which is Trade. I cannot find css.theme file in there. Could I put the section code fraction somewhere else? Thank you!
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!
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...
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?
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 .
Sir I got struck in another situation. I want to both accordions and description + Images. Somethings like this ⬇ First Description Seond Image Third Accordion
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
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
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?
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?
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
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?
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 ? 🙂
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
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.
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 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
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
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
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
@@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?
@@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.
@@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
@@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
Hy! it helped me a lot! Thank you
Your welcome
@@WebSensePro how do i get the links to copy?
@@nyaradzotaguzu9060 using html Ahref
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
was able to use this with the forge theme (with a few changes) thanks for your help :)
Glad I could help!
Really helpful. I hope you will keep giving us such a precious content.
For sure
It worked!!!! Great. Thanks man
Great to hear!
Thanks man it worked fine and helped a lot. You are a savyour
Hey I only want 1 metafield not multiple want the description to show as it is and rest 1 or 2 with collapsible how to do that plsz help
You are a legend thanks
Thanks for appreciation, dont forget to subscribe and put the bell icon on
Amazing explanation 👏👏
Thanks for appreciation, if this video/channel you helped in any way please support by Subscribing and Hit the Like button.
Great video guy
Glad you enjoyed it
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
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
So useful 😍 Thank you so much!
Your welcome dont forget to subscribe
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!
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
Thanks a lot man
Happy to help! Don't forget to sub, like and share
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
thank you!
You're welcome!
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.
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 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
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 am using Refresh theme. Can't find theme.css file? Any way out plz?
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?
Thank you so much for this tutorial, I just have a question about the theme I am using which is Trade. I cannot find css.theme file in there. Could I put the section code fraction somewhere else?
Thank you!
Sure, you can search for "theme.scss" or "base.css".
Awesome video brother
Your welcome
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
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
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
there is no theme css file coming in shopify
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
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
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
Doesn't work in 2024 for dawn theme 😓
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
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
i think this is gonna work
Yes it will 😅
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
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
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
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?
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
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!
@@WebSensePro This happened to me as well! Did you find a solution @ashleylaura832?
It does not work with debutify theme
Its for Free Themes of Shopify
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
Hello, I don't have the theme.css in my shopify sense theme. What should I do?
Sense theme has base.css file
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
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
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
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
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?
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
I can't find theme.css in the craft theme, where can I add the second step? thank you
theme.liquid
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
my theme.css tab is not showing
Add to any css file
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
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
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.
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, tutorial request: how can I add a collapsible row to a multicolumn section discription
Collapsible accordion you mean right?
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
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
Hi! My collapsable items aren´t working, any help with that? Thanks
Hi Gustavo, Sure email info@websensepro.com for premium support
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
i didn't find product.description tag in debutify free theme code please help
Tutorial is for Debut theme
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
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
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
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
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
I dont have Theme.css file, on Down 5.0 version how can i do That?
Add code in any CSS file
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
I don't have the themes.css or the js file as you have?
custom.css, base.css
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
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
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
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
sir meta field has changed ..can give a guide on it
Yes its now under "Custom Data"
How can you do this in dawn theme?
Dawn had built feature for adding accordions
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
can't find theme.css, please help
You should have base.css if you are using dawn. Dawn also have builtin accordions
thanks but what if you have 200 products then what i do?
Similarly you do for all the product page descriptions
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"
theme.css and themes.js are not showing
Please contact via websensepro.com/contact-us for paid support
Can I do this with shoptimized theme?
Yes please email websensepro@gmail.com for paid support
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.
hi, how do I put the collapsible content under the product pictures?
Will need to change liquid code for that
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?
Doesn't work for me, I have Debutify Theme
Its for debut theme
hi is it possible to get the links to copy?
Use HTML ahref
hi, i have added, but it is not collapsable
Did you add jQuery in your theme?
any help
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
How can I add image and table?
I am using
Empire
4.2.3
Subscribe to our channel, will create video on this topic
there is no theme.css file in assets section.
Which theme you are using? If it's dawn it will be base.css
@@WebSensePro thanks for your reply
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.
id see any product description in my product theme
Not clear what you mean
@@WebSensePro how can i contact you?
info@websensepro.com
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