Shopify Tutorial: Hiding a Long Description in Collapsible Accordion (on free themes)
ฝัง
- เผยแพร่เมื่อ 17 ก.ค. 2024
- Learn how to shorten your product description by hiding it inside a collapsible tab AKA accordion.
This is not the collapsible tab block that Shopify gives you by default. We will be creating a custom one so that we can continue to use our product description field.
This tutorial will be easy to follow for the following themes:
- Dawn, Craft, Crave, Sense, Taste, Studio, Ride, Colorblock
It's also a good lesson for anyone learning Shopify theme development. I will touch on using Shopify 2.0 Metafields to enable or disable content, I'll introduce you to using Shopify Liquid Filters. And in general, demo how to do less work by not starting from scratch!
===== Grab the code =====
- ed.codes/blogs/tutorials/shop...
===== Related topics =====
- Dawn tutorials: • Shopify Dawn Theme Tut...
- Shopify 2.0: • Shopify Concepts
===== Who am I? =====
Hey! My name is Eduard.
I teach the tech side of starting and running a Shopify store.
Im a professional web developer, but my goal is to make Shopify easy with simple and straight-to-the-point videos.
Visit my website: ed.codes
===== Stay Updated =====
Want to see my latest tips, tutorials, and code add-ons? TH-cam won’t always show you. Subscribe to get emails directly from me: ed.codes/pages/newsletter
===== Check out my Shopify Add-ons =====
edcodes.gumroad.com/
Pre-built sections & features for Shopify 2.0 themes, often replacing the need for apps. Copy and paste the code into your theme.
===== Join "Shopify DIY" Community on Discord =====
Chat with me and other store owners and developers:
/ discord
===== FAQ's =====
My favorite Shopify Apps - ed.codes/blogs/resources/actu...
My favorite Themes - ed.codes/blogs/resources/best...
===== Buy me a coffee =====
www.buymeacoffee.com/edcodes
===== Chapters =====
00:00 What we're building today
02:40 Which themes is this for?
03:39 Get the code
04:07 Get ready
05:39 Enable using metafield
10:16 Coding the accordion
17:28 Splitting the description
22:48 Fallback when not splitting
27:03 Group coaching
29:00 See you next time!
#Shopify #Liquid #Coding
![How To Add TABS to the Shopify Product Descriptions? [Works on All Themes Free/Paid] in 2024](http://i.ytimg.com/vi/U5VieH88B_0/mqdefault.jpg)
![[TH] Esports World Cup : Grand Final](http://i.ytimg.com/vi/sedbKhFYDMo/mqdefault.jpg)
❗2023 Update❗I have built a product description section that you can easily add to your store without writing code! It works just like one of your Shopify sections. Check it out here - edcodes.gumroad.com/l/product-description-section
can i also hide the description in a collapsible row with this?
does it come with collapsible accordions?
Thank you so much. You are a true instructor. I haven't see any proper YT video explain this subject that well and crisp. Thank you 🤙🤙
I found you a few days ago and your tutorials have helped me so much making my site look so much better. Thank You
Very clear and helpful tutorial. Also very nice that you explain your thoughts more than other developers on TH-cam. I am happy I joined your group. It saved us tonnes of money already.
Thank you for the feedback! It's great having you in the group :)
Really man, this is one of the best TH-cam channels for Shopify tutorials. You just solved my work's problem today, thanks!!
Thank you so much for sharing your knowledge Ed - this tutorial has been very easy to follow and best of all it works!
Thank you for taking your time and making this! The only video on the subject which actually shows the process of how you complete this. Now my store is exactly how I envisioned it. Cheers lad!
It works really well. Your guide is very detailed and easy to follow. Thank you for providing such a helpful guide.
Another great tutorial!! Very clear and extremely helpful
thank you very much.
I rarely like or comment videos. But you are a cool guy and helped me out a lot. Thank you so much
It's really helpful and it worked for me. Thank you so much Ed.
I'm a beginner in e-commerce, I'm in a budget crunch. But I will surely join the paid membership in future whenever I have a sufficient amount to join.
Another great video, thanks Ed!
Worked really great, thanks so much!
Thanks for all the guides!
Done thanks bro looking for this for a while
Thank you so much for the sharing! It took me like 2 hours to follow😂, but it works now.
Brrooo i wanna thankyou soo much!! Made my website soo much more professional! Keep it upp!
Thank you for the tutorial, Ed. Can you do a video on how to have different descriptions for variants?
Very helpful Tutorial Thanks
sooo helpful! Thank you!
Hi Ed! Thanks for the video. Would the info you showed in this video work if I wanted the announcement bar to be expandable? Like in the Upscale theme?
Hey Ed, great video - super helpful and clear. I just had 1 question regarding the default state of the accordion. How can I have it opened by default?
Hi Ed,
Thanks for the video, it was really useful. I managed to apply the principles (with a couple of tweaks) to the Palo Alto theme.
The problem I am having is that there is padding between the product description block and the main accordion block situated below the product description, which means the product description appears slightly separated from the other collapsible menus.
Do you have any videos on how to modify the padding / margins between the blocks on a page? Or how to adjust the padding of a block when it's not editable from within the theme interface?
I can see how to fix it using a metafield for the description, but I think this is a less elegant solution.
Many thanks.
It was really helpful. Thank you! how do you split if you want to make accordion on just the middle paragraph?
Hi Ed, I followed this tutorial last night and it was great, thank you. If I wanted to do the same thing for a description on a collections page, would I follow the same steps?
Superb 🎯
absolutely loving all your videos! You've taught me so much. This worked perfect for, however, is there a way to have the "first split" at the top (just under the price) and the "last split" where my other collapsible rows are? If I move the "description" block below the price, then the accordion appears too high. If I move the "description" block below buy button, then the brief description is too low. Hope this makes sense
Hello! Thank you very much! Amazing tuts! Can you show how to make breadcrumbs? is it possible?
Hey Ed I really like your videos it helped me a lot, I have a small issue there is lot’s of product where I can’t put true and false so do you mind helping me at how to make all the true & false metafields same.
Wow that was really guided walkthrough! Thank you so much for the video, so easy to follow!
* What if I want to split description one more time and add it to the next accordion, is it possible? 🤔 I have 3rd part of the description that lists materials.
Thanks!
Any idea how you can use the icons on a normal accordion and putting them onto a text line on a product page? I really want the little leaf icon but without a drop down
Thank you so much for that awesome tutorial! -> Is it possible to set the default mode just for the product description tab to "open"? So that all the other tabs like shipping etc. are closed by default and only the product description is open.
Thank you. I have done a similar thing but without any coding. I've just created the metafield then added the information into the metafield that I want to appear. If some products don't need the accordion drop down, I just created a new template and remove the accordion option. I'm not a coder, so try to avoid making changes in the edit code section.
Cool, yeah that's an option, but I usually avoid relying too heavily on metafields. I prefer the description field to hold the description, as Shopify intended.
Thank you
Finally got around to trying this so I had some free time,
Edd thanks so much you really are the best in this space when it comes to teaching Shopify code🙏👌
maybe a Footer Accordion is something we could maybe see in the future 🤔
Thanks! What do you need a footer accordion for? Is it a really long menu or is it some other type of content?
Hi Ed, is there a way to affect all product descriptions from any type of product page including collections automatically without using the bulk editor to change the metafield to True? In other words, I want all products that I import on a weekly basis to automatically have this accordion product description drop down feature without manually setting it up. Thank u 😎
Hello Ed, i think i found a secret treasure in your channel, i am using dawn theme and migrating right now to 6.0.2 version from 2.1.0
i've found over your channel a tutorial to move the product description everywhere in page, is it possible to make the description shorter in that tutorial as you showing in this tutorial?
thanks in advance.
Is there a difference when doing this for writing within the theme? Like an icon card description?
Thanks for the video, as someone who has never coded before it was really straight forward to follow along. Quick question, what would I do if i wanted to have more than one box in the accordian and how would I split it so each part of my descriptions goes under the respective box
Update - I have managed to add cllapsible rows under the product description accordian, so all good
Thank you. It’s really helpful.😊
I have a question. I want to move the description part below the product image.
Could you please make a tutorial video about it?🙏🏻
Here you go - th-cam.com/video/d9cR_xzRKcg/w-d-xo.html
Do you have a video on.. why when I add material and care instructions to one item it saves on all items in my shop.?? 😢
what metafields do you suggest?
how can i set the metafield true by default like even i don t active on my product page it's actived automatically
Is this process applicable on the 13.0 dawn theme?
Hello Ed, tutorial request: how can I add a collapsible row to a multicolumn section discription
if you want this to be enabled by default, and not having to enable on every product, set the metatag to "
!= false " instead of "= true"
Your videos have been so extremely helpful! I’ve been struggling to find a tutorial that will allow the Image Banner on the Dawn Theme clickable without having the button link. Similar to how Debut use to be with there Image Gallery. Is there a solution for that? Thanks 😊
Hmm, yeah that shouldn't be very difficult. I will make a video on this in the coming weeks.
How do you do it for collection description
Is it possible to have default open this tab?
Can this work with shoptimized theme?
Thanks for this well explained tutorial. In dawn theme on Google Crome when I use the collapsible description above collapsible content like the Material field the scrolling gets messed up. Does anyone else have this problem?
I'm not really seeing this, can you elaborate?
@@EdCodes Sorry, I redid all the steps and now it is working! I have been looking for this but did not find an answer: Is it possible to use storefront filtering for vintage themes like Supply? Thanks and keep up the good work!
ALLAH razı olsun
Hi Ed - Thanks for this tutorial great clear instructions that are very detailed and needed. Thank you - I am a complete novice but I got it to work fine just to hide the description. My store is a POD with lots of the same products with the same description. I would like to hide the description for all my products that are synced to Printful. I added a size chart using the metafield dynamically linking to a page with my size chart which appears on all my product pages but i would also like to hide the description for all and your code seems to only achieve this for one item. I cant feasibly add a hide dropdown for each of my products. Can your code be used to hide all product descriptions or is there a better way. Many thank Ed - Best wishes Neil
Hey Neil, I'm not really sure what you mean - the code is supposed to be added to the template for all products, and then you enable it by setting the metafield to true. Is the issue that it takes a long time to set the metafield to true across all your products? Then what you need is some tool to bulk edit your metafields - th-cam.com/video/xSY1ktiJkm8/w-d-xo.html
@@EdCodes Hi Ed - Thanks for responding. Yes I have a lot of same type POD products to edit hence the bulk edit my Metafields is the solution. Thanks again Ed your tutorials are the best. 🙂
I love it, but can you tell me how it will affect the SEO reach? Does Google recognize collapsible tab information?
Yes. The collapsible part is simply done with CSS so it's just visual. Googlebot reads the HTML and sees all the tab content.
is it possible to split description multiple times and add it to the next accordion? like splitting from to
Solved ^_^,
product.description | split: '' | last | split: '' | first
Is there anyway that you can make a subtitle visible / accordian / collapsible row visible on a collections page / list in the Dawn Shopify theme?
Can you send me an example on another site maybe? I can't really imagine it.
@@EdCodes I've found a work around. If I enter the information I want into the Vendor field on the product description page, then enable the vendor option on the collections template, you can see the info.
Hey, It's working great except the product description is duplicating below the accordian, can you advise please?
My product description is duplicating above.. did you ever find a solution here? The Metafield worked, though!
Hi! I love this video it was extremely helpful. I watched everything and used your code from your blog and it works great. The only thing is, I don't have a little icon caret (the little arrow that shows people it's clickable) why is this? My code looks the same as yours I don't know why this is happening
Hmm, you have the line that says {% render 'icon-caret' %} right? And there is also a file in your theme called icon-caret.liquid? Are you using Dawn?
@@EdCodes @Madeleine Merritt I had a similar issue, then I realised that you have to be previewing the product where you have set the Collapsible description metafield to 'true'. If that makes sense. So for each product you would need to set this metafield to be true to see the new accordion
You make it very hard for begginers like me I can't follow with you btw thank you for your time
A bit confused
I have the template in version 7.0 and the accordion already exists
How can what you suggest help me if it already exists in the templates?
Yes the accordion already exists. Normally you can't output the product description there. This tutorial is about outputting the product description inside the existing accordion.
@@EdCodes
sorry I do not understand what you mean & what the point
When I removed the footer, everything that was working with the time and days no longer works. You know how to solve it. PD: thanks for the information.
Hello Ed, thank you for your tutorial. I copied the code from your website and changed out ''Read more'' to something better in my language. And i changed the icon to paw_print. Now when i try to save it gives me an error.
Liquid syntax error (line 381): Unknown tag 'when'
Line 381 is: {%- when 'custom_liquid' -%}
Ie, the code that comes after what we're changing in this tutorial, so i haven't touched that one. Do you have any possible solution to this?
I'm using Dawn btw.
So this was a ride.
I tried again but this time without copying all your code. I did it manually following your tutorial step by step. It all went smooth until i came to the fallback section. Then i couldn't save and the same error occured. I followed through and first when i added the {%- endif -%} on your line 279 at @25:31 it worked again. I could save and the description is exactly like your tutorial said it would.
So, my problem got solved. I don't know if it's anything with your code on the site, if anything gets mixed up when ctrl c and ctrl v. The only difference from what i can see is that i followed the indentation very carefully, but it feels like that wouldn't make a difference since it's only for human readability, right?
Anyhow, i let this comment stay in case anyone else bumps into this problem.
Now I'm even more confused. Went to do some chores in my house, maybe an hour later I come back and gonna show my friend what I've done. Now it doesn't seem to recognise in the description because the entire description is in the collapsible.
@@nrtolv I did much ctrl c and ctrl v, too. All went well until the split. It never split, and instead, duplicated itself above the accordian.
It is not clear how to copy paste the code, i have been trying for 2 hours now. It aint workin
dsont work with Dawn 12.0.0 :-( now to revert it all ugh...
NEVERMIND... forgot to add the "description" block in theme editor LOL.
This was working great as I followed along with the video. But when I went to his site and copied in the final code in his examples just to be sure I had it correctly... now it will not work.
Might be that your theme is on a newer version than when I made this video and my code is not compatible anymore. Try reverting back to the version you did when following along - you can see the version history of your file in the top-left of the Shopify code editing window.
Following along is generally better anyway - you surgically modify your code rather than pasting big blocks over it.
What happens when your product page becomes JSON with shop 2.0?
You still have .liquid template files in Shopify 2.0. The JSON is not a replacement, it just stores the data for sections/blocks that you set up in the theme customizer.
When your page is loaded, it combines the html from the .liquid file and the data from the JSON file.
@@EdCodes so would I need to find where the section is saved that controls the collapsable tab code? Is there an easy way to do this?
@@love-rugsmoderntraditional6092 Which theme are you using? If it's Dawn then the collapsible tab code will be in main-product.liquid, see 11:51. If it's another theme you need to look around but it will be in a .liquid file. You don't need JSON at all for this tutorial.
Daaamn bro what a headache. Thank god they invented apps.
Another super informative and helpful tutorial! Question, I'm not a coder and watching the entire video, and rewatching I can't seem to figure out how to input the code you provided from your site into my liquid.main field without having my text duplicated (even though on my product description I used the ). Can you show where exactly where to input the code you provided from your website?
Hey, can you double check that it's with an exclamation mark and not a number 1, as you made this typo in your comment, and that could be the cause if it's in the code. Also did you follow the part about the fallback if there is no split tag in your description?
For anyone that wants the description tab to be always open.
this is the code. it should be replace "type": "description" in the schema
},
{
"type": "description",
"name": "t:sections.main-product.blocks.description.name",
"limit": 1,
"settings": [
{
"type": "checkbox",
"id": "open_first_collapsible_row",
"default": false,
"label": "Open Tab"
}
]
},
This is a Game Changer! I followed your steps, pretty meticulously, and had great success- catch 22 is that by searching my website through my desktop, I have an alert that appears stating that "this site can't be reached.. and then dns_probe_finished_nxdomain" Any thoughts about how I can get that desktop connection back up? The mobile website is working great, and I actually received an order for the product while I was editing its code! :)