Marketing | Creative | Strategy

Your faithful partner in the discovery of endless digital opportunity.

Take the First Step

Integrating A Responsive Page for Youtube Videos in Shopify

While it is commonly known that a picture is worth 1,000 words, a video has 24 pictures every second, so to count how many words a video is worth is almost impossible! It’s a lot… let’s just leave it at that...

Product photography is one of the most important features in the world of eCommerce. The customer must not only be familiar with the product features, but have a good idea of what it looks like so they can make their buying decisions. Although this photo standard has held for many years, the new practice of showing off your product with video has recently become more and more popular as eCommerce platforms have integrated the use of embedded video. Upload a short video demonstrating the use of your product, embed it right into your Shopify product page, and the rest is up the millions of words your video is (theoretically) worth.

Now of course, like anything else, it’s not always as simple as placing a YouTube video onto any page anywhere… You can achieve this video feature on your Shopify in 2 ways:

 

  1. You can edit the page description and paste the html of the content you want to display there. While this does technically work, it is the most simple and least responsive way to put video on your Shopify website. The biggest issue with this method is that it is not user friendly at all! Most people don’t have html knowledge so it could create a very delicate ecosystem on that page that might be difficult to edit later. The other big issue is that mistakes might appear while writing the code and show up for the user if not thoroughly tested.

 

But never fear! You can choose the second approach which is to build a page template especially for these kinds of pages that require video. How? Read on...

 

  1. If you just want the videos to appear on the page as items of a grid, you could build a Shopify section that includes some YouTube video blocks. In the settings for the video blocks you can insert just one text field which will receive the YouTube link of the video you want to display. Building the section with blocks, allows you to insert as many videos as you like just by adding a new YouTube block in Shopify’s Customizer.

 

Considering that most of the Shopify themes come with an already styled grid and grid items, it is encouraged that you use the grid that the theme provides for this particular situation. If the theme doesn’t have a grid already configured, you can create your own by using CSS. 


In the YouTube videos section you created, you can insert a <div> to which you add the class name of your grid, and inside it you include a “for loop” that goes through all of the YouTube blocks the user added in Customize. For each step, you obtain the video ID from the URL the user provided in Shopify Customize, and create a grid item that includes an iframe similar to this one:

<iframe width="560" height="315" src="https://www.youtube.com/embed/{{ videoId[1] }}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

Now, it’s worth noting that some more CSS might be needed to fit the iframe in the grid-item div but this is easy to make, and perhaps something we will cover in a future blog post!

For now, you are ready and able to take your products and website to the next level by adding embedded and user-friendly YouTube videos right into your Shopify page. Now get out there, bring your product to life, show it in action, and tell a story that a picture simply can’t.

Ionut Radu Pastiu
Web Developer
Shopify is not just an online store, it is the future of commerce, and I have a doctorate in this field of study. I can slice and dice, mix and match, or come up with a completely new way to make your Shopify page exactly what you want it to be. I’m fluent in Javascript, jQuery, and Liquid when building the foundation, which I decorate with a combination of CSS and SCSS. You can dream it, I can build, they will shop... trust me.
close[x]

Get A Quote

Ready to take the next step? Please fill out the form below. We can't wait to hear from you!

Once submitted, a Slicedbread representative will be back in touch with you as soon as possible.

* Required Fields