I cannot add videos with my product pictures to my product pages

Highlighted
New Member
4 0 0

Hello there,

When I try to make the changes in the link below, I see that there are no codes that I need to change in my product.liquid file. What is the reason for this, can you help me please?

https://www.shopify.com/partners/blog/product-media?utm_source=exacttarget&utm_medium=email&utm_camp...

 

My product.liquid code:

{% if product.metafields.inventory.ShappifyHidden %}{% break %}{% endif %}

{%- comment -%}
  Teathemes https://teathemes.net/forums/
{%- endcomment -%}
{%- case settings.design_products -%}
   {%- when '1' -%}
      {%- assign design_products_page = "product-design-default" -%}
   {%- when '2' -%}
      {%- assign design_products_page = "product-design-alt" -%}
   {%- when '3' -%}
      {%- assign design_products_page = "product-design-sticky" -%}
   {%- when '4' -%}
      {%- assign design_products_page = "product-design-compact" -%}
   {%- endcase -%}
<div class="main-page-wrapper">
    <!-- MAIN CONTENT AREA -->
      <div class="container-fluid">
         <div class="row">
            <div class="site-content col-sm-12" role="main">
              {%- if settings.use_wishlist -%}{%- include 'nitro-wishlist' -%}{%- endif -%}
              {%- include 'product_page_area' -%}
            </div><!-- .site-content -->
           <div id="bundler-target-element"></div>
            <div class="clearfix"></div>
            {%- if settings.show_related_products or settings.show_recently_products or product.metafields.meta.hashtag != blank -%}
            <div class="container related-and-upsells">
              {%- if settings.show_related_products -%}
                  {%- if settings.related_image_size != blank -%}{%- assign crop_nt = settings.related_image_size -%}{%- endif -%}
                  {%- assign loop_countdown = settings.loop_related_countdown -%}
                  {%- case settings.related_products_use -%}
                     {%- when 'use_collection' -%}
                        {%- include 'related-products-sectioned' -%}
                     {%- when 'handle' -%}
                        {%- include 'related-products-by-handle' -%}
                     {%- else -%}
                         {%- include 'related-products-by-tags' -%}
                  {%- endcase -%}
              {%-endif-%}
              {%- if settings.show_recently_products and pages['recently-viewed-products'].empty? != true -%}{%- include 'gl-recently-viewed' -%}{%-endif-%}
              {%- if product.metafields.meta.hashtag != blank and product.metafields.meta.hashtag contains '#' -%}
              <div class="basel-product-instagram">
                <p class="product-instagram-intro">{{ 'products.product.instagram_intro_html' | t: has_tag: product.metafields.meta.hashtag }}</p>
                <div id="carousel-{{product.id}}" class="instagram-widget instagram-per-row-4"><ul class="instagram-pics"></ul></div>
              </div>
              {%- elsif product.metafields.meta.username != blank -%}
              <div class="basel-product-instagram">
                <p class="product-instagram-intro">{{ 'products.product.instagram_intro_html' | t: has_tag: product.metafields.meta.username }}</p>
                <div id="carousel-{{product.id}}" class="instagram-widget instagram-per-row-4"><ul class="instagram-pics"></ul></div>
              </div>
              {%- endif -%}
            </div>
            {%-endif-%}
         </div><!-- end row -->
      </div><!-- end container -->
      <!-- end container -->
</div><!-- .main-page-wrapper -->
<script type="application/ld+json">{%- assign v_first = product.variants.first -%}{%- assign image = product.featured_image |default: product.images.first -%}
{
  "@context": "http://schema.org/",
  "@id": {{ canonical_url | append: '#product' | json }},
  "@type": "Product",
  "name": "{{ product.title | escape }}",
  "url": "{{ shop.url }}{{ product.url }}",
  {%- if image != blank -%}
    {%- assign image_size = image.width | append: 'x' -%}
    "image": [
      "https:{{ image.src | img_url: image_size }}"
    ],
  {%- endif -%}
  "description": "{{ product.description | strip_html | escape | strip_newlines }}",
  "sku": "{{ current_variant.sku |default:v_first.id }}",
  "mpn": "{{ current_variant.barcode |default:v_first.barcode }}",
  "productID": "{{ product.id }}",
  "brand": {
    "@type": "Thing",
    "name": "{{ product.vendor | escape }}"
  },
  {%- if product.price_varies -%}{%- assign priceValidUntil = 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' -%}
  "offers": [
    {%- for variant in product.variants -%}{%- assign barcode_size = variant.barcode.size ==-%}
      {
        "@type" : "Offer",
        "sku": "{{ variant.sku |default: variant.id }}",
        "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
        "price" : "{{ variant.price | divided_by: 100.00 }}",
        "priceCurrency" : "{{ cart.currency.iso_code }}",
        "itemCondition": "https://schema.org/NewCondition",
        "url" : "{{ shop.url }}{{ variant.url }}",
        "mpn": "{{ variant.barcode }}",
        {%- if barcode_size == 12 or barcode_size == 13 or barcode_size == 14 -%}"gtin{{barcode_size}}": "{{ variant.barcode }}",{%- endif -%}
        "priceValidUntil": "{{ priceValidUntil }}"
      }{% unless forloop.last %},{% endunless -%}
    {%- endfor -%}
  ]
  {%- else -%}
  "offers": {
        "@type" : "Offer",
        "sku": "{{ v_first.sku |default: v_first.id }}",
        "availability" : "http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}",
        "price" : "{{ product.price | divided_by: 100.00 }}",
        "priceCurrency" : "{{ cart.currency.iso_code }}",
        "itemCondition": "https://schema.org/NewCondition",
        "url" : "{{ shop.url }}{{ product.url }}",
        "mpn": "{{ v_first.barcode }}",
        {%- assign barcode_size = v_first.barcode.size ==-%}{%- if barcode_size == 12 or barcode_size == 13 or barcode_size == 14 -%}"gtin{{barcode_size}}": "{{ variant.barcode }}",{%- endif -%}
        "priceValidUntil": "{{ 'now' | date: '%s' | plus: 31536000 | date: '%Y-%m-%d' | uri_encode | replace:'+','%20' }}"
    }
  {%- endif -%}
  {% comment %}
    {%- assign review_app = settings.review_app |default:'1' -%}
    {%- case review_app -%}
      {%- when '1' -%}{%- assign ratingCount = product.metafields.spr.reviews | split: 'reviewCount" content="' | last | split: '"' | first -%}
        {%- if ratingCount != "0" and ratingCount != blank -%}
        ,"aggregateRating": {
         "@type": "AggregateRating",
         "ratingCount": {{ ratingCount | plus: 0 }},
         "ratingValue": {{ product.metafields.spr.reviews | split: 'ratingValue" content="' | last | split: '"' | first | plus: 0 }}
        }
        {%- endif -%}
      {%- when '2' -%}{%- assign ratingCount = product.metafields.ryviu.reviews | split: 'reviewCount" content="' | last | split: '"' |first -%}
        {%- if ratingCount != "0" and ratingCount != blank -%}
        ,"aggregateRating": {
        "@type": "AggregateRating",
        "ratingCount": {{ ratingCount | plus: 0 }},
        "ratingValue": {{ product.metafields.ryviu.reviews | split: 'ratingValue" content="' | last | split: '"' |first | plus: 0 }}
        }
        {%- endif -%}
      {%- when '3' -%}{%- assign ratingCount = product.metafields.ali.reviews_count -%}
        {%- if ratingCount != "0" and ratingCount != blank -%}
        ,"aggregateRating": {
        "@type": "AggregateRating",
        "ratingCount": {{ ratingCount }},
        "ratingValue": {{ product.metafields.ali.reviews_average }}
        }
        {%- endif -%}
      {%- when '4' -%}{%- assign ratingCount = product.metafields.stamped.reviews_count -%}
        {%- if ratingCount != "0" and ratingCount != blank -%}
        ,"aggregateRating": {
        "@type": "AggregateRating",
        "ratingCount": {{ ratingCount }},
        "ratingValue": {{ product.metafields.stamped.reviews_average }}
        }
        {%- endif -%}
      {%- when '5' -%}{%- assign ratingCount = product.metafields.loox.num_reviews -%}
        {%- if ratingCount != "0" and ratingCount != blank -%}
        ,"aggregateRating": {
        "@type": "AggregateRating",
        "ratingCount": {{ ratingCount }},
        "ratingValue": {{ product.metafields.loox.avg_rating }}
        }
        {%- endif -%}
    {%- endcase -%}
  {% endcomment %}
}
</script>
<script text="text/javascript">
  var _learnq = _learnq || [];

  var item = {
    Name: {{ product.title|json }},
    ProductID: {{ product.id|json }},
    Categories: {{ product.collections|map:'title'|json }},
    ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
    URL: "{{ shop.secure_url }}{{ product.url }}",
    Brand: {{ product.vendor|json }},
    Price: {{ product.price|money|json }},
    CompareAtPrice: {{ product.compare_at_price_max|money|json }}
  };

  _learnq.push(['track', 'Viewed Product', item]);
  _learnq.push(['trackViewedItem', {
    Title: item.Name,
    ItemId: item.ProductID,
    Categories: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  }]);
</script>

<script text="text/javascript">
  var _learnq = _learnq || [];

  var item = {
    Name: {{ product.title|json }},
    ProductID: {{ product.id|json }},
    Categories: {{ product.collections|map:'title'|json }},
    ImageURL: "https:{{ product.featured_image.src|img_url:'grande' }}",
    URL: "{{ shop.secure_url }}{{ product.url }}",
    Brand: {{ product.vendor|json }},
    Price: {{ product.price|money|json }},
    CompareAtPrice: {{ product.compare_at_price_max|money|json }}
  };

  _learnq.push(['track', 'Viewed Product', item]);
  _learnq.push(['trackViewedItem', {
    Title: item.Name,
    ItemId: item.ProductID,
    Categories: item.Categories,
    ImageUrl: item.ImageURL,
    Url: item.URL,
    Metadata: {
      Brand: item.Brand,
      Price: item.Price,
      CompareAtPrice: item.CompareAtPrice
    }
  }]);
</script>

{% render 'judgeme_widgets', widget_type: 'judgeme_review_widget', concierge_install: true, auto_install: true, product: product %}

 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
630 16 197

Hi @bbelcioglu 

Thanks for your question- it looks like your product images are not rendered within the product.liquid file of this theme. It's possible that the usual loop for rendering images is contained within a different section, or snippet file. What you would be looking for is a Liquid loop that opens with: `{% for image in product.images %}`, that you would then replace with the code mentioned in the blog article. However, if you're not familiar with Liquid and HTML, I would recommend you reach out to your theme developer to help you implement this change, as there is likely layout adjustments that will need to be made to accommodate the new media types. 

Hope this helps!

Liam Griffin

Shopify | Developer Community Manager

Liam Griffin
Shopify | Developer Community Manager
0 Likes