Notifications
Clear all

[Solved] Adding Media to plak theme  

  RSS

luigi0411
(@luigi0411)
New Member
Joined: 2 months ago
Posts: 4
05/04/2020 10:18 am  

I want add Media such as embedded videos, and YouTube videos to my product pages.

However, according to the shopify tutorial, it cannot be achieved on the plak theme.

Can someone tell me what should I do?
Thank you

 


Quote
plaktheme
(@plaktheme)
Customer support Admin
Joined: 7 months ago
Posts: 101
05/04/2020 10:48 am  

Hi @luigi0411,

Katrine here from Plak Theme.

Let's say you would like to embed this Youtube video : c https://www.youtube.com/watch?v=BmYsMnZZ3E

From Youtube

First, click on Share => Embed and copy the code to embed which looks like :

<iframe width="560" height="315" src="https://www.youtube.com/embed/BmYsMnZZ3Ec" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

From Plak Theme

If you would like to add videos to all your products pages at once, please follow these steps :

  • From your Shopify dashboard, click Online store => Actions => Edit code
  • Open the file product-template.liquid
  • Paste the code where you would like the video to appear

 

Katrine| Plak theme support
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as a Solved Solution


ReplyQuote
the-ecom-man
(@the-ecom-man)
Active Member
Joined: 5 months ago
Posts: 15
05/04/2020 10:57 am  

Hello luigi0411,

Sure. First you have to upload a video on youtube and get embedded code from it. you can visit this link to learn how to get embedded code from youtube.

After that, Follow the below steps to add embedded video in your product page :

You will be able to see video on your product page.

Note: If you want to change video height and width, you can edit it from Iframe tag( https://prnt.sc/rtczew ) according to your requirement.

Thank you.


ReplyQuote
luigi0411
(@luigi0411)
New Member
Joined: 2 months ago
Posts: 4
06/04/2020 3:10 pm  

@plaktheme @Parth Goyani 

Thank you for your reply.

I'm sorry I didn't make it clear. I want to add video here (this is a new feature of shopify).

https://tinyurl.com/tf5fffx

 

https://shopify.dev/tutorials/add-theme-support-for-rich-media-3d-and-video

This is the official tutorial provided by shopify. I tried it on the plak theme, but it does not display properly.

 

Thank You!


ReplyQuote
plaktheme
(@plaktheme)
Customer support Admin
Joined: 7 months ago
Posts: 101
06/04/2020 4:12 pm  

Hi @luigi0411

Thanks fr letting us know this new feature, we will update our Product template snippet and add the required snippet to showcase videos in the product page and we will get back to you with the detailed tutorial to make it works in Plak theme.

Kind regards,
Katrine


ReplyQuote
the-ecom-man
(@the-ecom-man)
Active Member
Joined: 5 months ago
Posts: 15
08/04/2020 9:47 am  
Hi @luigi0411

 

 

You need to Follow 4 steps to add embedded video in your product page :

 Step 1: Create Snippet

=> From your Shopify dashboard, click Online store => Actions => Edit code
=> On the left side, click on the Snippets heading to reveal your Snippets content.
=> Under the Snippets heading, click on the Add a new snippet link
=> Call your new snippet media. Click Create snippet.
=> copy and paste following code in media.liquid file:
{% case media.media_type %}
{% when 'image' %}
<li class="  product-single__thumbnails-item js">
  <a href="{{ media | img_url: product_image_zoom_sizescaleproduct_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_sizescaleproduct_image_scale }}"{% endif %}>
    <img class="product-single__thumbnail-image   lazyload animation--{{settings.lazyloading-effect}}" data-src="{{ media | img_url: '110x110', scale2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAltmedia.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: controlstrue }}
  </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 %}
Step 2: Modify product-template.liquid 
 
=> From your Shopify dashboard, click Online store => Actions => Edit code
=> Open the file product-template.liquid
=> Find below code
        {% for image in product.images %}
         <li class="  product-single__thumbnails-item js">
           <a href="{{ image.src | img_url: product_image_zoom_sizescaleproduct_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_sizescaleproduct_image_scale }}"{% endif %}>
             <img class="product-single__thumbnail-image   lazyload animation--{{settings.lazyloading-effect}}" data-src="{{ image.src | img_url: '110x110', scale2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAltimage.alt | escape }}">
          </a>
        </li>
        {% endfor %}
=> Replace it with following code:
         {% for media in product.media %}
           {% include 'media' %}
         {% endfor %}
=>  After that, Find 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_styletruewidthheightheightheightwrapper_idimg_wrapper_idimg_idimg_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_sizescaleproduct_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_styletruewidthheightheightheightwrapper_idimg_wrapper_idimg_idimg_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_sizescaleproduct_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 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_sizescaleproduct_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_sizescaleproduct_image_scale }}"{% endif %}>
               <img class="product-single__thumbnail-image" src="{{ image.src | img_url: '110x110', scale2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAltimage.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_sizescaleproduct_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_sizescaleproduct_image_scale }}"{% endif %}>
               <img class="product-single__thumbnail-image" src="{{ media.src | img_url: '110x110', scale2 }}" alt="{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAltmedia.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_sizescaleproduct_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_sizescaleproduct_image_scale }}"{% endif %}>            
               {{ media | external_video_tag: class"product-single__thumbnail-image youtube_video mobile" }}
             </a>
           </li>
         {% endcase %}
       {% endfor %}

Step 3: Modify theme.scss.liquid
 
=> From your Shopify dashboard, click Online store => Actions => Edit code
=> Open the file theme.scss.liquid
=> Add following code at end of the file 
  .youtube_video{width:100%;pointer-events:none;
   &.mobile{height:50px;}
 }
 .mainFrameVideo{width:100%;height:100%;}
Step 4: Modify sticky.liquid

 

=> 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 on 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

 

After following above 4 steps. you will be able to add embedded video in your product page. If you need more details about how to add media in product page follow bellow steps: 
=> From your Shopify admin, go to Products.
=> Click on particular product that you want to have video on its detailed(product) page:
=> Click on Add media from URL and then Embed YouTube video In Media section (Screenshot:   https://prnt.sc/rv8wpi)
=> Paste youtube video link in box and click on Embed media button.(Screenshot:   https://prnt.sc/rv8x0n)
=> Click on Save.

 


plaktheme liked
ReplyQuote
plaktheme
(@plaktheme)
Customer support Admin
Joined: 7 months ago
Posts: 101
08/04/2020 10:59 pm  

Hi @luigi0411

We have added the (Youtube videos feature) to Plak theme, simultaneously we have released a new version that includes this new feature, all our clients have received a mail about this with a direct link to download Plak V.1.5

In case you would like to embed this feature manually, HERE IS a tutorial we have posted today.

If you have any other question or concerns, feel free to get in touch with us.

Kindly,
Katrine


ReplyQuote
Share: