Tutorial, Add Video in Product page in shopify

Highlighted
New Member
1 0 0

<!-- Video code -->
{% for tag in product.tags %}
  <!-- youTube Video code -->
  {% if tag contains 'yt:' %}
  <div class="video-wrapper">
    {% assign my_youtube_code = tag | split:':' %}
    <iframe src="https://www.youtube.com/embed/{{ my_youtube_code[1] }}" allowfullscreen="" width="560" height="315" frameborder="0"></iframe>
  </div>
  {% endif %}
  <!-- End of youTube Video code -->

  <!-- Vimeo Video code -->
  {% if tag contains 'vimeo:' %}
  <div class="video-wrapper">
    {% assign my_vimeo_code = tag | split:':' %}
    <iframe src="https://player.vimeo.com/video/{{ my_vimeo_code[1] }}?title=0&byline=0&portrait=0" width="534" height="300" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
  </div>
  {% endif %}
  <!-- Vimeo Video code -->
{% endfor %}
<!-- End Video code -->

0 Likes
Highlighted
Shopify Staff
Shopify Staff
608 15 153

Hi Modi!

Liam here from Shopify - thank you for your question :)

Great to see you are looking to add videos to your product pages, so let's see how we can set this up for you! 

When you are editing the Product pages you will see a video icon in the toolbar which will allow you to drop the embed code within the product description:

Once you can pasted in the embed code, the video should appear. This process is shown in this video I have made with my test store here.

Hope this helps Modi, if you have any other questions, just let me know!

Cheers,
Liam

Shopify Guru
support@shopify.com

0 Likes
Highlighted
New Member
5 0 0

please refer to comments below...

0 Likes
Highlighted
New Member
5 0 0

Hi, can you please expand more in details on how these 'tags' you've used in Shopify are making these video's appear in the 'image' section and not the 'description' section of the product page? I am referring to this video you posted: https://www.youtube.com/watch?v=n2q0ndajhEo

My fashion store is based on Brooklyn theme and I need the video to appear as a thumbnail in the 'image' section

0 Likes