This Article:
How to Add Vimeo Videos in Shopify – You’ve probably noticed by now that Shopify video modules support YouTube links, but for some reason they don’t support Vimeo.

Sure, you can hard code the link into the theme files, or create an HTML formatted box for your customer to plop code into, but if you want to keep your website user friendly and allow your non-techy customers to change out Vimeo videos without waiting for a developer to get around to it, this is how you do it (at least this is how I’ve found to do it, if you have another way – excellent!) BONUS! We also create an auto play, looping video in our demo.

In this article I’m going to show you how to modify your theme files (this tutorial uses the Debut theme, but this tutorial is theme agnostic) to allow your customers to add Vimeo links via the editor.

Difficulty:

Requirements:

SHOPIFY
Vimeo
Access to theme code

Editing Your Code Files

Navigate to your theme code files and find your Template file folder.

Online Store > Actions & Edit code (dropdown)
Navigate to the Templates folder
Select “Add a new template” and choose “page” as your new template. In this example we’re using the liquid template type. You can set your file name as “vimeo-video-template“. Avoid spaces or special characters in your file names.

This creates a new template that you can use when you create new pages on your website.

Add the code into your vimeo-video-template.liquid file.

Open your new template file vimeo-video-template.liquid and paste the following code into it, then save your changes.

<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>
          {% section 'section-vimeo-video' %}
      <div class='rte'>
        {{ page.content }}
      </div>
    </div>
  </div>
</div>

You can see we are using the {{ section.settings.vidURL | escape }} code to inject the URL that’s entered into the editor by your customer or shop owner.

*** You’ll notice there’s a bit of code after the closing parenthesis. This is the code that makes the video loop and auto play. Make sure this is enabled in your Vimeo iframe settings as well. Additionally, under the Advanced > Embed settings, disable all of the controls so the looping video doesn’t have buttons all over it. Or keep them on, your choice.

Create a new section called section-vimeo-video.

In the folder below your Templates you’ll see Sections. Similar to creating a new template, select “Add new section” and name it section-vimeo-video then save your file.

{% if section.settings.vidURL != blank %}
<iframe src="{{ section.settings.vidURL | escape }}?background=1&amp;autoplay=1&amp;loop=1&amp;title=0&amp;byline=0&amp;portrait=0" width="640" height="640" frameborder="0" allow="autoplay; fullscreen" allowfullscreen="" class="fluidvids-item" data-fluidvids="loaded"></iframe>
{% endif %}
{% schema %}
{
  "name": {
    "en": "Looping Vimeo Videos"
  },
  "class": "index-section",
  "settings": [
    {
      "type": "text",
      "id": "vidURL",
      "label": {
        "en": "Video URL"
      },
      "default": {
        "en": "Video URL"
      }
    }
  ],
  "presets": [
    {
      "name": {
        "en": "Looping Vimeo Videos"
      },
      "category": {
        "en": "Image"
      }
    }
  ]
}
{% endschema %}

Connect Everything!

You now have a new page template and a section that contains an iframe field ready for you to plug in a URL. So…let’s hook it up!

First, create a new page in your pages library. If you open the Theme Template dropdown you’ll now see a template named vimeo-video-template. Select that option and save your page. You now have a page that’s using your new Vimeo video link.

Add Your Link

It’s magic time! Choose the “View Page” option from the new page you just created to open the page preview. Now choose the “Customize” button on the bottom right admin bar to open the editor panel.

Select your “Looping Vimeo Video” section and add your Vimeo URL directly into the Video URL input box.

Save your page, and presto-chango! You now have a looping, Vimeo linked video rolling in your Shopify page.