How To Add Collapsible Product Description Section In Shopify
HTML-код
- Опубликовано: 22 июн 2024
- Today i will show you how to add collapsible product description content in Shopify and create a clickable section for the product's features.
Increase user experience and SEO by adding collapsible product descriptions to your Shopify store, save space and provide detailed information efficiently.
Adding collapsible product description content for a Shopify store is important because it allows customers to easily access detailed information about a product without overwhelming them with too much text.
This feature helps improve the user experience, increases engagement, and ultimately leads to higher conversion rates so by organising product information in a collapsible format because customers can quickly find the information they are looking for, leading to a more seamless shopping experience.
For those reasons i would consider adding collapsible product description on Shopify is a must to enhance the user experience and that will result in more sales.
Find: when 'description'
Replace from div To /div
Code : pastebin.com/GjPZu9hK
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 9 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this RUclips channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#shopify #collapsible
![MAF Teeski - Whole Thing (feat. VonOff1700) [Official Music Video]](http://i.ytimg.com/vi/SHWEj-ndz6g/mqdefault.jpg)
I love and appreciate your passion for helping us with our Shopify stores. Going so far as to host your own site for your codes is so nice of you. Thank you for all that you do 😊😊
Thank you and i appreciate the words, Yeah the pastebin is blocking some countries and i dont like that so i will host my own things from now on and no blocking even if you from the moon haha.
You're very welcome.
nadi tbarklah 3lik💗
Worked perfectly, thank you.
Glad it helped
It's good to see you.
Thank you and good to see your comment too.
Cheers
THANK YOU!!
You're welcome
I wonder where were you all these days 😂 happy to c u again, a Brother from India ❤
i found out that video requests never end haha, i had to take a break to take care of some other projects.
Thanks legend, i appreciate it.
Thanks brother. You're the best. ❤❤❤
😂 that's true the chain of new learners will never end thanks for your endless support, and soo happy i got your channel ❤️ from INDIA, you are the LEGEND😈@@OnHOWGuy
Welcome back
You look fresh
Thank you brother
Haha i appreciate that
Please add "studio" theme to your hacks, its a free one. Im obsessed with your content but nothing ever seems to work for me. :(
Thank you so much anas for your effort , this trick works great for me , but I don't understand anything about coding, I just followed your steps, but I didn't get what you meant when you saied (sometimes it breaks, and you copied the previous code) , because I don't understand anything about coding, I didn't get a copy From the previous code, is There is any Risk on my store, or what should I do if anything happened?
You're very welcome brother and glad i could help, No worries no risk at all if it did work for you then no need to take a back up and you good to go.
I mentioned that because the videos can live forever on RUclips and updates can break the code so taking a back up of the previous will help get back to your previous version if incase the code didnt work.
And the option that breaks sometimes is the "the changes history" on the thing i showed in the video and it will help you get back to your previous version without having manually back up the code but as i said sometimes it breaks and it loses the history of your changes.
I hope thats clear.
Cheers
Please, when you have a chance, could you teach how to modify the size of the "Buy now" button (home page in Dawn Theme) on mobile only (I would like to make it smaller) since it looks very big on the phone screen. Thank you.
Absolutely, i just noted your request, i will make both for mobile only and desktop as well.
Cheers
He Anas. Is there a way to put an Icon in front of the word "Description" when you make it a drop-down?
Ohh thats a good one, i will rewrite the code to have maybe a down arrow or something.
Cheers
@@OnHOWGuy Thanks a bunch 😊😊
@@OnHOWGuy Hi brother ! Let me know when you have applied this change to the code.
cannot find when description its no where in the code went through the whole code
I am working on that code to update it because a subscriber recommended a very good tip which is adding a down arrow to the button.
I will add comments to the code on where to change the description wording.
Cheers
hey, love your videos . could you please help me out with a problem I am stuck badly. can you make a code to get hover working on mega menu in dawn theme. like the code you had provided in thee last video works on drop down menu but doesn't work in mega menu. please help bro it'll be a huge help for me
Thanks legend, i see then okay give me some time i will figure it out and make a video.
Also which theme are you using ? and you not using an app for drop down ?
Thanks
@@OnHOWGuy thankyou do much for your humble reply, I am working on dawn theme, also I am not using any external app for creating the mega menu, its made via navigation. please could you figure this out
main-product file is not in the theme impulse
I don't have access to paid themes and you should ask the support for tricks like these.
Side note: its 100& named as something else similar.
Cheers
How do I change the text "description" to something else? "details" for example?
Just change in code section Description to Details
As the legend below said just change the word in the code.
Cheers
Thanks legend
@@OnHOWGuy Bro How Can I add this collapsible description to Debutify theme
Bro plzz create a vedio product slider or product pic slider plzzzzzzzzzzzz😢
Absolutely, i just noted your request and i will work on it.
Cheers
When i do collapsible row on a product it keeps showing on my other products how do i fix that
same issue is on my side
Yes, thats the purpose of this video so you will have a collapsible row for description on all products, or you want it only on one product ?
Please let me know in a new comment as its difficult for me to see replies now.
Cheers
@@OnHOWGuy i want to show seperate description for my every product.. Every product has its own description.. But when i add collapse row, it shows same description for all the products