Creating a Video Page Template in Shopify Debut

Adding a video template to the Debut theme in Shopify.

I’ve just started learning about Shopify development and one of the first things I can do is create a template thats a combination of sections. In this example we’ll go over how to add a new page template that has a video at the bottom of it.

1. Create a copy of page.liquid called page.video.liquid

Shopify will know that this is a page template if we follow the naming convention. Following this convention will let us add text to the page just like any other page.

2. Add the Video

To add the video insert the following liquid tag below the existing page html: {% section ‘video’ %} This will import the video section at the end of the page.

<div class="page-width">
  <div class="grid">
    <div class="grid__item medium-up--five-sixths medium-up--push-one-twelfth">
      <div class="section-header text-center">
        <h1>{{ page.title }}</h1>
      </div>
      <div class="rte">
        {{ page.content }}
      </div>
    </div>
  </div>
</div>
{% section 'video' %} <!-- This is the line added -->

3. Save and sync

If you’re using ThemeKit then save your new file and give it a second to upload to Shopify. I’m developing on a live site (relax it’s just for fun #straightToProduction), but if you’re not then you will need to add an empty page.video.liquid file to your live theme for the next step to work.

3. Add a New Page

From the Shopify pages section add a new page and set the template to be page.video. I’ve added some Lorem Ipsum to fill out the page but the idea behind this change was to add a ‘Our History’ page that would have a documentary style video on it.

4. Customize the Theme to Add the Video

Once inside the theme customizer, go to the newly created page under the Pages section. From here there will be a video option where a youtube video can be added.

5. Save and Publish

Once the video is added you can save and publish the changes. Now you have a custom page template that lets you add videos at the end of a page. In my example I added a bird documentary to add some flare to the site ;)