Shopify - How to Add a Video inside Collapsible Row on Product Page (Dawn Theme)
ฝัง
- เผยแพร่เมื่อ 17 ก.ค. 2024
- How to add a TH-cam video into the collapsible row section, also known as an accordion or a dropdown. This tutorial is for Dawn and other free Shopify 2.0 themes.
Part 1: Adding a liquid field into the collapsible row block. So we can then paste the youtube embed code.
Part 2: Making the video responsive. See this video for more details - • How To Fix Video Embed...
Part 3: Adding a video icon to the collapsible row block.
===== Tutorial on ed.codes =====
ed.codes/blogs/tutorials/add-...
===== Videos in Shopify playlist =====
• Videos on Shopify
===== 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
===== 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.
===== Support the channel =====
If my videos helped you save money on apps or development, then please consider hitting the "Super Thanks" button and sending me a tip instead! This helps me post more frequently and make better videos.
===== 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...
===== Chapters =====
00:00 Intro
01:37 Note on different videos for each product
02:36 Liquid field and video
08:52 Make the video responsive
10:35 Video icon
13:27 Next video preview
14:14 Outro
#Shopify #youtube #youtubeshopping
![[Shopify - 2024] How To Create Collapsible Accordion for Product Description - Product Page Tabs](http://i.ytimg.com/vi/NjVx28E19Es/mqdefault.jpg)
Hi Ed, I'm so so so glad I found your channel! Super excited about dynamic metafiled videos!
Thank you! I had to search my theme (impulse) to find the collapsible tab, it had a different name and different file location, and my TH-cam video was a short, so I switched the aspect-ratio from 16 / 9 to 9 / 16 and it worked perfectly. Much much appreciated and looking forward to the tutorial for more dynamic video tabs!
Awesome creator, amazing value and great content. Really useful tutorials. Thank you!
Thank you for your tutorials man you've been a great help. Excited for the next video :)
Thank you! I've spent countless hours trying to figure this out and you taught me in 7 mins
Mate, I almost save all your videos, they are really amazing!
Thank you! This was so helpful and easy to follow.
Thanks a bunch, waiting for the next video.
Hi Ed, Thank you for all of the videos. I am still waiting for the unique product video tutorial. Is it coming soon? Much appreciated!
Thanks! I appreciate your effort!
I dont usually comment, but thank you so much mate! great job
Thanks man...all the thumbs up!
Thank you for sharing. Friedn from Philippines..
the best video 👍
Thank you ed for the great value videos
You are a great help for us
It would be nice if you could create some videos for people like us working on SEO
examples: how to put noindex on some pages or nofollow for social media icons
Also how to create a structured schem for rich snippet....and many more of your awesome tips
All the luck for your upcoming projects
Good idea. I'll make some SEO focused videos soon
@@EdCodes I'll be happy to donate if you have a Patreon or something similar
Since i'm not interested to learn coding.
Thank you for the value
Thank you Ed!!! For the you-tube icon, I have a viewbox of 0 0 16 16. How do I adjust the SVG path?
Looking forward to watch your video to add individual videos to product pages.
Awesome tutorials here, I have one question, how can I put Images in the Collapsible Row instead of a video? (Dawn Theme)
Thanks 🙏
Hello! Thanks for the video! I am looking for the second part of the vide to insert metafield video to collapsible row...can you please share? thank you!
Thanks!
Thank you!
Is there a way to move that collapsible row on product page below images just above footer? With your tutorial I managed to move description below images but I'm trying also to move that collapsible tabs below to bottom. Thank you
geat videos, is there any tutorials for collapsible section with liquid added?
Thanks a lot for the tutorial. I have followed all steps, but the result is a grey shade in the youtube wrapper and written {my website or youtube} refused to connect. Can you kindly tell me what is wrong?
is there possibility to make closing collapsible row when youopen second one. I mean first is open if u chose other then both are open why not the first closing when we open other one
Where can I find the paths to my SVGs?
How do you add this code and get it to stick after updating the theme? Do you have to keep editing the code files after every update?
can yo u tell how to add image in collapsible row.
Hi Ed, Its great watching your videos, I was longing for the sequel to this video which is adding unique videos for products, but am unable to find that one. Also, somehow, despite it being a collapsible media, can I make it open collapsible media by default. I mean the icon at the end is collapsed by default, if I want it opened?
I was able to -
- Embed my video in the collapsible section
- Use the youtube icon
- Use the metafields to customize the media per product
- Only display the collapsible content when there is a metafield entry indicating a video.
All thanks to your videos. I am trying one last thing, keep this media window open/not collapsed by default.
Does this work for other themes? i use refresh?
When is part 3 coming out?
Is it possible to have the collapsible row disappear, when there is no video embedded? I mean the whole row with the icon and title, not just the content with the video?
I'm not able to open your website in India i don't know why receiving "site can't be reached" error.
Ed, I have a question and I am so confused. I can't find the answer anywhere! I have a normal page that I would like to have collapsable rows with text and image. Can I follow these steps to my .json ? how can I do it? I am freaking out.
Hi Ed,
Do you know if it's possible to overwrite code in the Shopify Dawn theme which is from a third party print on demand app? (I've tried but it isn't working for me and wondered if you have any tips?).....I can send you more info if you need it.....Thank you so much :)
Depends what exactly you want to do. Generally no you cannot overwrite app code. Unless you just want to restyle something then maybe...
@@EdCodes Thank you Ed, It's actually not working properly. It's Printful personalization tool (Print on demand App).....The color selector needs a 'scroll' function because half of the colors are cut off), but Printful developers are just telling me, 'they know it sometimes doesn't work', (which is why I am trying to fix it myself).....I have the fix, it's just where to add it in the code to overwrite the original 🤔
can you show how to make the footer on the product pages a collapsable block? I think having collapsable blocks to show policies, contact and subscriber sign up would be really clean
and can you also show how to edit individual product pages to have different sections, blocks etc? I really want to make each of my products unique but having trouble figuring out how to do so when the only indiviual part of the page is the description
Of you are using 2.0 themes you can create templates for each product if you want
Just go to the theme editor up in the the middle check for teamplate
and another request if possible, adding a contact form into a collapsable menu within the product page
How do I do this and make sure it saves everytime they update Dawn? I've done this at least twice now 😆
Hello Ed,
Its showing me this error when trying to update liquid in schema,
Unable to update the file
Invalid block 'liquid': name is required
Invalid block 'liquid': 'id' is not a valid attribute
Invalid block 'liquid': 'label' is not a valid attribute
What to do?
It worked ed, I did some mistake, Thank you for the video. Also is there a possibility to add multiple videos in portrait mode with TH-cam embed, As youtube shorts video does not play on shopify.
hi great video but i search for the next for all products i can see
how to add a contact form in a collapsible row for the product page shopify dawn theme
Please make upsell product
Coming soon! Do you need it as a block (like under add to cart button) or section (full page width)?
@@EdCodes sir I want to under add to cart button on product page ..
When I get this upsell product on product page
@@EdCodes awesome will be waiting for the tuto
Great help
Thank you
not working
didnt work
Amazing! Thank you so much! Just sent you a "Super Thanks" and encourage anyone else who has benefited from this to do the same! (the little heart/money icon next to 👍👎 and "Share")
Thanks! I really appreciate your support!