I am trying to get Twitch video and chat on a collection but a scroll box comes up. Is there a way to increase the width of the collection description so the scroll bar does not come up? The link below shows what I have done so far. I use the Venture theme
Topic summary
A user is attempting to embed Twitch video and chat into a Shopify collection page using the Venture theme, but encounters an unwanted scroll bar.
Current Issue:
- The embedded Twitch iframe displays with a horizontal scroll bar
- The iframe appears alongside the ‘sort by’ dropdown rather than in the collection description
- The embed code is working but not fitting properly within the theme’s layout
Root Cause:
- The iframe is not responsive, limiting its display width
- The code may not be placed in the correct location within the theme structure
- Missing CSS to make the iframe fill available space properly
Suggested Solution:
- Relocate the iframe code to the proper position (collection description or custom section within collection template)
- Add additional CSS to ensure the iframe is fully responsive
- This will eliminate scroll bars while allowing the embed to adapt to available space
Resources for creating responsive Twitch embeds were shared, though the issue stems from implementation within the Shopify theme rather than the embed code itself.
Hey GoLiveMerch,
If you’re using the embedded code generated by Twitch directly, then it’s going to have set height & width parameters, per Twitch’s policies (https://dev.twitch.tv/docs/embed/).
You’d need to come up with a new set of coding (not generated by Twitch) to have it be fully responsive. Here are some blog posts which have steps for achieving this (though I have not tested them myself):
https://philna.sh/blog/2020/03/23/responsive-twitch-embed/
https://www.smartdigitalsolutions.co.uk/embed-twitch-cam-responsive-full-width-fullscreen-website
Cheers,
Stephen
This is where I grabbed my current code for it. I have it working, but the theme I have (or Shopify) puts a scroll bar there. If you click on the link provided in my first post you see the scroll bar. I just need that removed.
The scroll bar is showing up because your iframe isn’t responsive (meaning you’re limiting the potential width of the box that it can show up in).
So even if you removed the scroll bars, people would still need to scroll to the right in order to see the right-side of the chat section.
You also have the iframe in line with the ‘sort by’ dropdown menu, rather than being in the description of the collection (or in a custom section, within a collection template).
TLDR: it’s not Shopify or your theme adding a scroll bar there – it’s that you haven’t added the coding to the correct place within the theme, and/or you haven’t included all of the coding necessary.
Solution: you’ll probably need to move where you have the coding, and then add some more CSS to make sure the iframe is responsive (ie. fills the space that you put it in).