I’m using the broadcast theme. I want to create a video carousel (slider) on the “custom content” section. The “Featured Product” Section does this automatically and I haven’t been able to pin down exactly how it’s done. Can anyone help me take a crack at this?
Topic summary
A user wants to create a video carousel in Shopify’s Broadcast theme using the “custom content” section, inspired by functionality in the “Featured Product” section.
Initial Guidance:
- Building custom sections requires narrowing the scope with specific code examples or URLs
- Suggested alternatives include using existing slideshow libraries or examining Dawn theme’s slideshow section as reference
- Recommended hiring a developer if unfamiliar with HTML/CSS/JavaScript/Liquid
Solution Provided:
Another user shared YouTube tutorials with code for implementing video carousels. However, implementation issues emerged:
Current Problems:
- Videos display all at once without proper slider functionality (Trade theme)
- Navigation arrows immediately return to first video despite auto-slide being disabled
- Videos don’t autoplay and show static thumbnails instead
Status: Ongoing troubleshooting. The original poster received tutorial resources but subsequent users are experiencing technical issues with the implementation that remain unresolved. Performance considerations mentioned include adding lazy-loading to prevent bandwidth issues.
Building a section for you is waaay beyond the scope of the forums you need to drastically narrow the scope of the question.
What have you done so far, do you have example code iusses, or demonstration urls.
It can be drastically simpler to just use a slideshow library found on the internet in a custom section, or look at the dawn reference’s slide section
https://github.com/Shopify/dawn/blob/main/sections/slideshow.liquid
than try to learn how the anatomy of an existing theme works if you have no experience with html,css,javascript or liquid.
If you need this built for your or walked through a themes code then contact me by mail for services.
Contact info in signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.
Thanks Paul,
You nailed it, I just need to look at the anatomy of the code and try to figure out how to implement it properly. Was looking for guidance, appreciate the post
1 Like
Video carousel:
1 Like
Good stuff, @ponbru @MRamzan made a general tutorial over on youtube with code available online that’s pretty concise.
Just make sure if using this to test loading performance or add lazy-loading to not swamp users bandwidth with lots of video.
Thank you but for me it didn’t work. It was trying to fit every video on the screen without the slider bar.
Trade theme
Here is the latest updated code. You can add custom video slider section in your store.
Thank you very much!
