How to create a YouTube video gallery in Shopify
Embedding a single YouTube video in Shopify is much easier these days than it used to be. But what if you want to create and display an entire YouTube video gallery in Shopify?
There are several video gallery apps available, but this tutorial will show you how to create a Youtube video gallery in Shopify using the Utuber app.
Utuber is a Shopify app, that helps you display YouTube videos in a grid view on your store. You can add the video gallery anywhere on your store, whether its a product details page, homepage or a separate dedicated page for gallery.
After installing it into your site, you can go to Dashboard page of this app to set configuration.
How To Use?
This app allows create Youtube video gallery from a playlist or a channel.
Step 1: Find Youtube User/Channel/Playlist ID
Navigate to the channel or playlist in 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:
– This one is for the User. For example:
– This one is for the Playlist ID. For example:
Step 2: Generate embed code
The code generated is as follows:
<div class="hura-utuber" channel-id="abc123"></div> (With
abc123 is channel ID)
<div class="hura-utuber" user="abcxyz"></div> (With
abcxyz is username)
<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.