Video: Add a gallery of videos to your homepage
You can use a standard Shopify page to create a gallery of videos then then feed that page to your homepage. This article will show you the basic steps in creating the page and using the Rich Text section module to display the page on your homepage.
Result:
Example result with Vimeo videos:
- 1
-
Create a standard page in the Page Editor
Use the Shopify Page Editor to create a page. Use a table with one row only and have two columns, a video in each one. For multiple rows, create a new table only one row in each table. The reason for that is the videos will line-up better when only using one row. Use the video embed code provided on YouTube or Vimeo for the video content.
https://shopify.com/admin/pages
Sample YouTube code:
<table width="100%"> <tbody> <tr> <td style="width: 50%;"><iframe width="560" height="315" src="https://www.youtube.com/embed/g1pmkUNzHWc" frameborder="0" allowfullscreen=""></iframe></td> <td style="width: 50%;"><iframe width="560" height="315" src="https://www.youtube.com/embed/M6M1UD907sc" frameborder="0" allowfullscreen=""></iframe></td> </tr> </tbody> </table> <table width="100%"> <tbody> <tr> <td style="width: 50%;"><iframe width="560" height="315" src="https://www.youtube.com/embed/TEm6RLFzPwA" frameborder="0" allowfullscreen=""></iframe></td> <td style="width: 50%;"><iframe width="560" height="315" src="https://www.youtube.com/embed/fUI1ZwXI6h8" frameborder="0" allowfullscreen=""></iframe></td> </tr> </tbody> </table>
Sample Vimeo code:
<table width="100%"> <tbody> <tr> <td style="width: 50%;"><iframe src="https://player.vimeo.com/video/122949985?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></td> <td style="width: 50%;"><iframe src="https://player.vimeo.com/video/145255578?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></td> </tr> </tbody> </table> <table width="100%"> <tbody> <tr> <td style="width: 50%;"><iframe src="https://player.vimeo.com/video/50315573?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></td> <td style="width: 50%;"><iframe src="https://player.vimeo.com/video/48471051?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe></td> </tr> </tbody> </table>
Save your new page.
- 2
-
Use the Rich Text or Page section to pull your page into the homepage
Once you've created the Page of videos, then call that page in to the homepage by using the Rich Text or Page section module:
Use this tutorial starting from Step 2: