How to Add Youtube video Media to product page

You are here:
← All Topics
Table of Contents

Shopify has released a new feature to display Youtube videos in product page. See it Live in Plak Theme

How to Add video Media to product page

Below is a tutorial to manually update Plak Theme V.1.4 in order to display Youtube videos properly in your product page.

Important : Due to this recent feature added by Shopify we have urgently released a new Plak version (V.1.5) which includes this new feature as well as other ones, Learn More

Step 1 – Create a new snippet

  • From your Shopify dashboard, click Online store => Actions => Edit code
  • Click on Snippets => Add new snippet
  • Name your new snippet media
How to Add video Media to product page
  • Copy and paste following code in the file you’ve just created:
{% case media.media_type %}
{% when 'image' %}
<li class="  product-single__thumbnails-item js">
  <a href="{{ media | img_url: product_image_zoom_size, scale: product_image_scale }}"
     class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
     data-thumbnail-id="{{ media.id }}"
     {% if enable_zoom %}data-zoom="{{ media | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
    <img class="product-single__thumbnail-image   lazyload animation--{{settings.lazyloading-effect}}" data-src="{{ media | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}">
  </a>
</li>
{% when 'external_video' %}
<li class="  product-single__thumbnails-item js">
  <a href="{{ media | external_video_url }}"
     class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
     data-thumbnail-id="{{ media.id }}"
     {% if enable_zoom %}data-zoom="{{ media | external_video_url }}"{% endif %}>
    <div class="product-single__media" data-media-id="{{ media.id }}">
      {{ media | external_video_tag: class: "youtube_video product-single__thumbnail-image" }}
    </div>
  </a>
</li>
{% when 'video' %}
<li class="  product-single__thumbnails-item js">
  <div class="product-single__media" data-media-id="{{ media.id }}">
    {{ media | video_tag: controls: true }}
  </div>
</li>
{% when 'model' %}
<li class="  product-single__thumbnails-item js">
  <div class="product-single__media"  data-media-id="{{ media.id }}">
    {{ media | model_viewer_tag }}
  </div>
</li>
{% else %}
<li class="  product-single__thumbnails-item js">
  <div class="product-single__media" data-media-id="{{ media.id }}">
    {{ media | media_tag }}
  </div>
</li>
{% endcase %}
How to Add video Media to product page

Step 2 – Modify product template

  • From your Shopify dashboard, click Online store => Actions => Edit code
  • Open the file product-template.liquid
  • Find the below code
        {% for image in product.images %}
         <li class="  product-single__thumbnails-item js">
           <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
              class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
              data-thumbnail-id="{{ image.id }}"
              {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
             <img class="product-single__thumbnail-image   lazyload animation--{{settings.lazyloading-effect}}" data-src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
           </a>
         </li>
         {% endfor %}
  • Replace it with
         {% for media in product.media %}
             {% include 'media' %}
         {% endfor %}
  • Then, Find the following code:
     {% for image in product.images %}
         {% capture img_id %}FeaturedImage-{{ section.id }}-{{ image.id }}{% endcapture %}
         {% capture img_class %}product-featured-img{% endcapture %}
         {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ image.id }}{% endcapture %}
         {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
         {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
         {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
         <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
            <div
            id="{{ zoom_img_id }}"
            style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;"
            class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == image %} hide{% endunless %}"
            data-image-id="{{ image.id }}"
            {% if enable_zoom %} data-zoom="{{ image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
            <img id="{{ img_id }}"
               class="feature-row__image {{ img_class }} lazyload animation--{{settings.lazyloading-effect}}{% unless featured_image == image %} lazypreload{% endunless %}"
               src="{{ image | img_url: '300x300' }}"
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ image.aspect_ratio }}"
               data-sizes="auto"
               tabindex="-1"
               alt="{{ image.alt | escape }}">
         </div>
      </div>
      {% endfor %}
  • Replace it with
    {% for media in product.media %}
        {% capture img_id %}FeaturedImage-{{ section.id }}-{{ media.id }}{% endcapture %}
         {% capture img_class %}product-featured-img{% endcapture %}
         {% capture zoom_img_id %}FeaturedImageZoom-{{ section.id }}-{{ media.id }}{% endcapture %}
         {% capture img_wrapper_id %}{{ zoom_img_id }}-wrapper{% endcapture %}
        {%- assign img_url = media | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
         {% include 'image-style' with small_style: true, width: height, height: height, wrapper_id: img_wrapper_id, img_id: img_id %}
        {% case media.media_type %}
        {% when 'image' %}
         <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
            <div
            id="{{ zoom_img_id }}"
            style="padding-top:{{ 1 | divided_by: media.aspect_ratio | times: 100}}%;"
            class="product-single__photo{% if enable_zoom %} js-zoom-enabled{% endif %}{% if product.media.size > 1 %} product-single__photo--has-thumbnails{% endif %}{% unless featured_image == media %} hide{% endunless %}"
            data-image-id="{{ media.id }}"
            {% if enable_zoom %} data-zoom="{{ media | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
            <img id="{{ img_id }}"
               class="feature-row__image {{ img_class }} lazyload animation--{{settings.lazyloading-effect}}{% unless featured_image == media %} lazypreload{% endunless %}"
               src="{{ media | img_url: '300x300' }}"
               data-src="{{ img_url }}"
               data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
               data-aspectratio="{{ media.aspect_ratio }}"
               data-sizes="auto"
               tabindex="-1"
               alt="{{ media.alt | escape }}">
         </div>
      </div>
      {% when 'external_video' %}       
        <div id="{{ img_wrapper_id }}" class="product-single__photo-wrapper js">
          <div data-image-id="{{ media.id }}"
               style="padding-top:{{ 1 | divided_by: media.aspect_ratio | times: 100}}%;"
               id="{{ zoom_img_id }}" class="product-single__photo {% unless featured_image == media %} hide{% endunless %} {% if product.media.size > 1 %} product-single__photo--has-thumbnails{% endif %}">            
          {{ media | external_video_tag: class: "mainFrameVideo feature-row__image product-featured-img " }}
          </div>
        </div>
      {% endcase %}
      {% endfor %}
  • After that, find the following code
        {% for image in product.images %}
            <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
               <a href="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
               class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
               data-thumbnail-id="{{ image.id }}"
               {% if enable_zoom %}data-zoom="{{ image.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
               <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: image.alt | escape }}">
               </a>
            </li>
           {% endfor %}
  • Replace it with
          {% for media in product.media %}
           {% case media.media_type %}
           {% when 'image' %}
            <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
               <a href="{{ media.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
               class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
               data-thumbnail-id="{{ media.id }}"
               {% if enable_zoom %}data-zoom="{{ media.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
               <img class="product-single__thumbnail-image" src="{{ media.src | img_url: '110x110', scale: 2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}">
               </a>
            </li>
           {% when 'external_video' %}
           <li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item js">
             <a href="{{ media.src | img_url: product_image_zoom_size, scale: product_image_scale }}"
               class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
               data-thumbnail-id="{{ media.id }}"
               {% if enable_zoom %}data-zoom="{{ media.src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>            
               {{ media | external_video_tag: class: "product-single__thumbnail-image youtube_video mobile" }}
             </a>
           </li>
          {% endcase %}
        {% endfor %}
  • Click Save

Step 3 : Update theme.css.liquid

  • From your Shopify dashboard, click Online store => Actions => Edit code
  • Open the file theme.scss.liquid
  • Add the following code at the very bottom of the file and click Save 
  .youtube_video{width:100%;pointer-events:none;
    &.mobile{height:50px;}
  }
  .mainFrameVideo{width:100%;height:100%;}

Step 4 : update sticky add to cart feature

  • From your Shopify dashboard, click Online store => Actions => Edit code
  • Open the file sticky.liquid
  • Find following code:
    <div class="grid__item one-tenth">
    {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
    {% for image in product.images %}
    {%- assign img_url = image | img_url: '' -%}
    <div>
      <div            
           class="product-single__photo {% unless featured_image == image %} hide{% endunless %}"
           data-image-id="{{ image.id }}">
        <img 
             class="feature-row__image  lazyload animation--{{settings.lazyloading-effect}}{% unless featured_image == image %} lazypreload{% endunless %}"
             data-src="{{ image | img_url: '140x140' }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ image.aspect_ratio }}"
             data-sizes="auto"
             tabindex="-1"
             alt="{{ image.alt | escape }}">
      </div>
    </div>
    {% endfor %}
  </div>
  • Replace it with
    <div class="grid__item one-tenth">
    {%- assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image -%}
    {% for media in product.media %}
    {%- assign img_url = media | img_url: '' -%}
    {% case media.media_type %}
    {% when 'image' %}
    <div>
      <div            
           class="product-single__photo {% unless featured_image == media %} hide{% endunless %}"
           data-image-id="{{ media.id }}">
        <img 
             class="feature-row__image  lazyload animation--{{settings.lazyloading-effect}}{% unless featured_image == media %} lazypreload{% endunless %}"
             data-src="{{ media | img_url: '140x140' }}"
             data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"
             data-aspectratio="{{ media.aspect_ratio }}"
             data-sizes="auto"
             tabindex="-1"
             alt="{{ media.alt | escape }}">
      </div>
    </div>
    {% when 'external_video' %}
    <div>
      <div            
           class="product-single__photo {% unless featured_image == media %} hide{% endunless %}"
           data-image-id="{{ media.id }}">
        {{ media | external_video_tag: class: "youtube_video feature-row__image  lazyload " }}
      </div>
    </div>
    {% endcase %}

    {% endfor %}
  </div>
  • Click Save

Step 5 : Update vendor.js

  • From your Shopify dashboard, click Online store => Actions => Edit code
  • Open the file vendor.js
  • replace the entire code with THIS ONE
  • Click Save

How to add a Youtube video from Shopify product page

  • From your Shopify dashboard, click on any product
  • Scroll down to media and click on Add media from URL
  • Click on Embed Youtube video and paste the URL of the Youtube video
How to Add video Media to product page

Important : Your product page must have at least one feature photo in order to show the video properly

If you have some troubles making this update, visit the forum or contact us directly by mentionning your Licence Key and your Store URL.

FAQ’s

1- Can I add more than 1 video per each product page ?

Yes you can multiple videos per product page, see an example

2- Can I add just videos on my product page without any featured photo?

Yes you can

3- The video can bee seen featured in collection pages?

Yes

Click to rate this post!
[Total: 1 Average: 5]

Leave a Reply

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