How to Embed YouTube Playlists on Your Shopify Store
Having your playlist on your site keeps your audience engaged with your brand. By providing people with a single location – your website – for all your content like blog posts and social media feeds, you ensure that people don’t leave your site or get distracted by competing material.
A YouTube playlist on your website can help you share themed videos. For example, if you’re a small business and are teaching people through a video series, then making a playlist helps your audience go through your content in the right order.
Do you want to display your YouTube Playlists right on your Shopify store? Let’s look at the steps you need to take to embed YouTube playlists on your Shopify store.
First, you have to install a Shopify app called Hura Video Gallery. After installing it on your site, you can go to the Dashboard page of this app to set the configuration.
How To Use?
This app allows for creating a Youtube video gallery from a playlist or a channel.
Step 1: Find Youtube User/Channel/Playlist ID
Navigate to the channel or playlist on Youtube. Then you can find the IDs in your browser’s address bar.
– This one is for the Channel ID and is the most common now it seems. For example:
https://www.youtube.com/channel/UCbQFf_LKQcgCZW1LoVICnZg
– This one is for the User. For example:
https://www.youtube.com/user/huynhlaota
– This one is for the Playlist ID. For example:
https://www.youtube.com/watch?v=_okwyDVUdDU&list=PLpwKVnqUupycRBofNEN-e6RiULtLwJQg6
or:
https://www.youtube.com/playlist?list=PLpwKVnqUupycRBofNEN-e6RiULtLwJQg6
Step 2: Generate embed code
The code generated is as follows:
Channel <div class="hura-utuber" channel-id="abc123"></div> (With abc123 is channel ID)
User <div class="hura-utuber" user="abcxyz"></div> (With abcxyz is username)
Playlist <div class="hura-utuber" playlist-id="xyz123"></div> (With xyz123 is playlist ID)
Step 3: Add embed code into your site
When adding embed codes provided by Utuber, please note that you need to be in HTML or code view, otherwise the video gallery will not work.
From your Shopify admin, go to Online Store > Blog Posts (or Pages). Click Add blog post (or Add page) to create a new post or click the title of the post to edit an exist post (or page).
After you open this web page you’ll see the Visual Editor. There you should press “<>” (show HTML).
After you press “<>” you will be able to manage the chosen web page in HTML. Paste the code in Step 2 into the needed area and click Save button.
You are done.
