Hello,
Whenever I add videos to the product page media list, the videos do not display on the product page. All the other images display. I have taken a look at the product-templates and the product-images.liquid and am stuck on why they are not displaying. I am including the code for reference.
product-template.liquid
{% include 'product-template',
description_style: section.settings.description_style,
image_position: section.settings.image_position,
image_container_width: section.settings.image_size,
section_id: product.id,
social: section.settings.social_enable,
thumbnail_position: section.settings.thumbnail_position,
thumbnail_arrows: section.settings.thumbnail_arrows
%}
{% schema %}
{
"name": "Product pages",
"settings": [
{
"type": "select",
"id": "image_position",
"label": "Images position",
"default": "right",
"options": [
{
"value": "left",
"label": "Left"
},
{
"value": "right",
"label": "Right"
}
]
},
{
"type": "select",
"id": "image_size",
"label": "Image size",
"default": "medium",
"options": [
{
"value": "small",
"label": "Small"
},
{
"value": "medium",
"label": "Medium"
},
{
"value": "large",
"label": "Large"
}
]
},
{
"type": "select",
"id": "thumbnail_position",
"label": "Thumbnail position",
"default": "beside",
"options": [
{
"value": "beside",
"label": "Next to image"
},
{
"value": "below",
"label": "Below image"
}
]
},
{
"type": "checkbox",
"id": "thumbnail_arrows",
"label": "Show thumbnail arrows"
},
{
"type": "select",
"id": "description_style",
"label": "Description position",
"default": "default",
"options": [
{
"value": "default",
"label": "Next to images"
},
{
"value": "full",
"label": "Below images"
}
]
},
{
"type": "richtext",
"id": "cbd_text",
"label": "CBD product text"
},
{
"type": "checkbox",
"id": "social_enable",
"label": "Enable social sharing",
"default": true
}
]
}
{% endschema %}
product-template.liquid (section)
{%- unless thumbnail_position -%}
{%- assign thumbnail_position = 'beside' -%}
{%- endunless -%}
{%- unless description_style -%}
{%- assign description_style = 'full' -%}
{%- endunless -%}
{%- assign product_img_structure = product.featured_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- include 'product-template-variables' -%}
{%- if image_position == 'left' -%}
{% include 'product-images', section_id: section_id, isModal: isModal, thumbnail_position: thumbnail_position, thumbnail_arrows: thumbnail_arrows %}
{%- endif -%}
{%- if settings.show_breadcrumbs and isModal != true -%}
{%- include 'breadcrumbs' -%}
{%- endif -%}
{%- if settings.vendor_enable -%}
{{ product.vendor }}
{%- endif -%}
{%- if isModal -%}
{{ product.title }}
{% else %}
#
{{ product.title }}
{%- endif -%}
{%- if settings.enable_product_reviews and settings.reviews_layout == 'full' -%}
{%- if isModal -%}
{%- assign review_link = product.url | within: collection | append: '#Reviews-' | append: product.id -%}
{% else %}
{%- assign review_link = '#Reviews-' | append: product.id -%}
{%- endif -%}
{%- endif -%}
{%- if settings.sku_enable -%}
{%- if current_variant.sku -%}
{{ current_variant.sku }}
{%- endif -%}
{%- endif -%}
{%- assign hide_sale_price = true -%}
{%- if product.compare_at_price_max > product.price -%}
{%- if current_variant.compare_at_price > current_variant.price -%}
{%- assign hide_sale_price = false -%}
{%- endif -%}
{{ 'products.general.regular_price' | t }}
{%- if current_variant.compare_at_price > current_variant.price -%}
{{ current_variant.compare_at_price | money }}
{%- endif -%}
{{ 'products.general.sale_price' | t }}
{% else %}
{{ 'products.general.regular_price' | t }}
{%- endif -%}
{{ current_variant.price | money }}
{%- if settings.product_save_amount -%}
{%- if settings.product_save_type == 'dollar' -%}
{% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | money }}{% endcapture %}
{%- else -%}
{% capture saved_amount %}{{ current_variant.compare_at_price | minus: current_variant.price | times: 100.0 | divided_by: current_variant.compare_at_price | round }}%{% endcapture %}
{%- endif -%}
{{ 'products.general.save_html' | t: saved_amount: saved_amount }}
{%- endif -%}
{%- capture unit_price_base_unit -%}
{%- if current_variant.unit_price_measurement -%}
{%- if current_variant.unit_price_measurement.reference_value != 1 -%}
{{ current_variant.unit_price_measurement.reference_value }}
{%- endif -%}
{{ current_variant.unit_price_measurement.reference_unit }}
{%- endif -%}
{%- endcapture -%}
{{ current_variant.unit_price | money }}/{{ unit_price_base_unit }}
{%- if settings.inventory_enable or settings.inventory_transfers_enable -%}
{%- assign variants_with_inventory_tracking = product.variants | where: 'inventory_management', 'shopify' -%}
{% comment %}
If loaded in quick view, it might be from a JS-loaded function
that loads recommended products. If that's the case, the above
JS will not set the variant inventory. Add it to an accessible
data div to read later instead.
{% endcomment %}
{%- if isModal -%}
{%- for variant in variants_with_inventory_tracking -%}
{%- endfor -%}
{%- endif -%}
{%- endif -%}
---
{%- unless isModal -%}
{% comment %}
Shopify's product form attaches a number of tracking
scripts that cause slower load times and false statistics.
Quick view modals request these on-demand.
{% endcomment %}
{% include 'product-form', section_id: section_id %}
{%- else -%}
{%- endunless -%}
{%- if settings.trust_image != blank -%}
{%- assign img_url = settings.trust_image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endif -%}
{%- unless description_style == 'full' -%}
{{ product.description }}
{% include 'product-additional-content', section_id: section_id %}
{%- endunless -%}
{%- if section.settings.cbd_text != blank and product.tags contains 'CBD' -%}
{{ section.settings.cbd_text }}
{%- endif -%}
{%- if social -%}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{%- endif -%}
{%- unless image_position == 'left' -%}
{% include 'product-images', section_id: section_id, isModal: isModal, thumbnail_position: thumbnail_position, thumbnail_arrows: thumbnail_arrows %}
{%- endunless -%}
{%- if description_style == 'full' -%}
{{ product.description }}
{% include 'product-additional-content', section_id: section_id %}
{%- endif -%}
product-images.liquid
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
{%- unless product.empty? -%}
{%- for image in product.images -%}
{%- assign is_featured = false -%}
{%- if featured_image == image -%}
{%- assign is_featured = true -%}
{%- endif -%}
{%- assign image_alt = image.alt -%}
{%- assign has_product_video = false -%}
{%- assign video_type = '' -%}
{%- if image.alt contains 'youtube.com/watch' -%}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{%- assign video_id = image.alt | split: 'v=' -%}
{%- assign video_id = video_id[1] | split: '&' | first -%}
{%- endif -%}
{%- if image.alt contains 'youtu.be/' -%}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{%- assign video_id = image.alt | split: '.be/' -%}
{%- assign video_id = video_id[1] | split: '&' | first -%}
{%- endif -%}
{%- if image.alt contains 'vimeo.com' -%}
{%- assign has_product_video = true -%}
{%- assign video_type = 'vimeo' -%}
{%- assign video_id = image.alt | split: '.com/' -%}
{%- assign video_id = video_id[1] | split: '/' | first -%}
{%- endif -%}
{%- if image.alt contains '.mp4' -%}
{%- assign has_product_video = true -%}
{%- assign video_type = 'mp4' -%}
{%- endif -%}
{%- if has_product_video -%}
{%- assign image_alt = product.title -%}
{%- endif -%}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- assign zoom_img_url = image | img_url: product_zoom_size -%}
{%- if is_featured -%}
{%- else -%}
{%- endif -%}
{%- if settings.product_zoom_enable -%}
{%- endif -%}
{%- if has_product_video -%}
{%- assign aspect_width = settings.product_video_width | divided_by: 100.00 -%}
{%- assign aspect_ratio = settings.product_video_height | divided_by: aspect_width -%}
{%- if video_type == 'youtube' -%}
{%- endif -%}
{%- if video_type == 'vimeo' -%}
{%- endif -%}
{%- if video_type == 'mp4' -%}
{%- endif -%}
{%- endif -%}
{%- endfor -%}
{%- if product.images.size > 1 -%}
{%- for image in product.images -%}
{%- assign image_alt = image.alt -%}
{%- assign has_product_video = false -%}
{%- assign video_type = '' -%}
{%- if image.alt contains 'youtube.com/watch' -%}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{%- endif -%}
{%- if image.alt contains 'youtu.be/' -%}
{%- assign has_product_video = true -%}
{%- assign video_type = 'youtube' -%}
{%- endif -%}
{%- if image.alt contains 'vimeo.com' -%}
{%- assign has_product_video = true -%}
{%- assign video_type = 'vimeo' -%}
{%- endif -%}
{%- if image.alt contains '.mp4' -%}
{%- assign has_product_video = true -%}
{%- assign video_type = 'mp4' -%}
{%- endif -%}
{%- if has_product_video -%}
{%- assign image_alt = product.title -%}
{%- endif -%}
{%- if has_product_video -%}
{%- endif -%}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{%- endfor -%}
{%- endif -%}
{%- else -%}
{{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
{%- endunless -%}