How to create a YouTube video gallery in Shopify

Enercos - Single Product eCommerce Shopify Theme

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?

DEMO

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.

First, install Utuber if you haven’t already. You can search for Utuber from Shopify App Store.

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:

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.

DEMO

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *