We Keep Coding

I want the product images on my shopify shop to pop out in the form of a modal for customers to view

Currently it only zooms on the product image when hovered over. I would like to keep this feature plus make the product image pop out.
I would like for when a customer clicks on a primary/thumbnail image it pops out and the customer can click an arrow to view more product images if there are multiple images attached to a product.
{% assign featured_media = product.images[1] | default: product.featured_image %}
{%- for media in product.media -%}
{% include 'media', media: media, featured_media: featured_media, height: height, enable_image_zoom: enable_image_zoom, image_zoom_size: product_image_zoom_size, image_scale: product_image_scale %}
{%- endfor -%}
<noscript>
{% capture product_image_size %}{{ height }}x{% endcapture %}
<img src="{{ featured_media | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_media.alt }}" id="FeaturedMedia-{{ section.id }}" class="product-featured-media" style="max-width: {{ height }}px;">
</noscript>
{% assign first_3d_model = product.media | where: "media_type", "model" | first %}
{%- if first_3d_model -%}
<button
aria-label="{{ 'products.product.view_in_space_label' | t }}"
class="product-single__view-in-space"
data-shopify-xr
data-shopify-model3d-id="{{ first_3d_model.id }}"
data-shopify-title="{{ product.title | escape }}"
data-shopify-xr-hidden
>
{% include 'icon-3d-badge-full-color' %}<span class='product-single__view-in-space-text'>{{ 'products.product.view_in_space' | t }}</span>
</button>
{%- endif -%}
{% if product.media.size > 1 %}
{% if product.media.size > 4 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
<div data-thumbnail-slider>
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} slider-active{% endif %}" data-slider>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}" data-slider-button>
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="product-single__thumbnails product-single__thumbnails-{{ section.id }}" data-slider-container>
{% if enable_thumbnail_slides == true %}
<div class="product-single__thumbnails-slider-track" data-slider-track>
{% endif %}
{% for media in product.media %}
<li class="product-single__thumbnails-item product-single__thumbnails-item--{{ section.settings.media_size }} {% if enable_thumbnail_slides == true %} product-single__thumbnails-item-slide{% endif %} js"{% if enable_thumbnail_slides == true %} data-slider-slide-index="{{ forloop.index0 }}" data-slider-item{% endif %}>
<a href="#"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.id }}"
data-thumbnail-id="{{ section.id }}-{{ media.id }}"
{% if enable_thumbnail_slides == true %} data-slider-item-link{% endif %}
{% if enable_image_zoom %}data-zoom="{{ media.preview_image | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
{%- capture thumbnailAlt -%}
{%- if media.media_type == 'video' or media.media_type == 'external_video' -%}
{{ 'sections.featured_product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- elsif media.media_type == 'model' -%}
{{ 'sections.featured_product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- else -%}
{{ 'sections.featured_product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}
{%- endif -%}
{%- endcapture -%}
<img class="product-single__thumbnail-image" src="{{ media.preview_image | img_url: '110x110', scale: 2 }}" alt="{{ thumbnailAlt }}">
{%- if media.media_type == 'video' or media.media_type =='external_video' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-video-badge-full-color' %}
</div>
{%- endif -%}
{%- if media.media_type == 'model' -%}
<div class="product-single__thumbnail-badge">
{% include 'icon-3d-badge-full-color' %}
</div>
{%- endif -%}
</a>
</li>
{% endfor %}
{% if enable_thumbnail_slides == true %}
</div>
{% endif %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}" data-slider-button data-slider-button-next>
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
</div>
{% endif %}
</div>

Is there a way for me to adding link to an image on slide with luna template on bigcartel

I'm currently using a Luna theme from the big cartel website template. I am wondering if there is any way or coding I can use to make my image on the slide show clickable. I specially want it to lead my customers to certain product pages.

Yep! Hope this helps! :)
Copy and paste this into the custom code for your Home page. Change the links to your product pages that you'd like. Also, you can add more slides with links by repeating the code like I did.
{% if theme.image_sets.slideshow.size > 0 %}
<div class="flexslider home-slideshow">
<ul class="slides">
{% for image in theme.image_sets.slideshow %}
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
<li>
<img alt="" srcset="{{ image.url | constrain: 1068 }}, {{ image.url | constrain: 2136 }} 2x" src="{{ image.url | constrain: 1068 }}">
</li>
{% endfor %}
</ul>
</div>
{% endif %}
{% if theme.max_products_per_row == 4 %}
{% assign product_image_constrain_width = 255 %}
{% assign product_image_constrain_height = 255 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 3 %}
{% assign product_image_constrain_width = 346 %}
{% assign product_image_constrain_height = 346 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 2 %}
{% assign product_image_constrain_width = 526 %}
{% assign product_image_constrain_height = 526 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% elsif theme.max_products_per_row == 1 %}
{% assign product_image_constrain_width = 1068 %}
{% assign product_image_constrain_height = 1068 %}
{% assign product_image_constrain_width_large = product_image_constrain_width | times: 2 %}
{% assign product_image_constrain_height_large = product_image_constrain_height | times: 2 %}
{% endif %}
{% assign thumb_constrain_width = 30 %}
{% assign thumb_constrain_height = 30 %}
<h1 class="visually-hidden">Featured Products</h1>
{% if theme.featured_items > 0 %}
{% get products from products.all limit:theme.featured_items order:theme.featured_order %}
{% if products != blank %}
<div class="product-list-container">
<div class="product-list">
{% for product in products %}
{% assign product_status = '' %}
{% case product.status %}
{% when 'active' %}
{% if product.on_sale %}{% assign product_status = 'On sale' %}{% endif %}
{% when 'sold-out' %}
{% assign product_status = 'Sold out' %}
{% when 'coming-soon' %}
{% assign product_status = 'Coming soon' %}
{% endcase %}
{% capture image_class %}
{% if product.image.height > product.image.width %}
image-tall
{% if theme.grid_image_style == 'crop-to-square' %}
{% assign product_image_constrain_height = '' %}
{% assign product_image_constrain_height_large = '' %}
{% assign thumb_constrain_height = '' %}
{% endif %}
{% elsif product.image.height < product.image.width %}
image-wide
{% if theme.grid_image_style == 'crop-to-square' %}
{% assign product_image_constrain_width = '' %}
{% assign product_image_constrain_width_large = '' %}
{% assign thumb_constrain_width = '' %}
{% endif %}
{% else %}
image-square
{% endif %}
{% endcapture %}
<div class="product-list-thumb {{ theme.grid_image_style }} {{ theme.show_overlay }}">
<a class="product-list-link" href="{{ product.url }}" title="View {{ product.name | escape }}">
<div class="product-list-thumb-container">
<figure class="product-list-image-container">
<div class="image-wrapper">
<img alt="" class="lazy product-list-image {{ image_class }}" src="{{ product.image | product_image_url | constrain: thumb_constrain_width,thumb_constrain_height }}" data-src="{{ product.image | product_image_url | constrain: product_image_constrain_width, product_image_constrain_height }}" data-srcset="{{ product.image | product_image_url | constrain: product_image_constrain_width_large, product_image_constrain_height_large }} 2x, {{ product.image | product_image_url | constrain: product_image_constrain_width, product_image_constrain_height }} 1x">
</div>
</figure>
</div>
<div class="product-list-thumb-info">
<div class="product-list-item-background"></div>
<div class="product-list-thumb-info-headers">
<div class="product-list-thumb-name">{{ product.name }}</div>
<div class="product-list-thumb-price">
{% if product.variable_pricing %}
{{ product.min_price | money: theme.money_format }} - {{ product.max_price | money: theme.money_format }}
{% else %}
{{ product.default_price | money: theme.money_format }}
{% endif %}
{% if product_status != blank %}
<div class="product-list-thumb-status">{{ product_status }}</div>
{% endif %}
</div>
</div>
</div>
</a>
</div>
{% endfor %}
</div>
</div>
{% else %}
<div class="empty-products centered-message">No products found.</div>
{% endif %}
{% endget %}
{% endif %}

How to get slick slider to show in Shopify?

I'm trying to get my featured collections section on my Shopify site to display as a slider. It looks like it is already installed on the Debut theme but I can't get it to initialize. I'm not getting any errors in my console so does anyone know how to get the slick slider to display correctly?
Here is my site and password to view the site if it's helpful.
https://test-shop-986573.myshopify.com/
password: shecka
<ul data-slides="{{section.settings.grid}}" class="grid grid--uniform grid--view-items collection-slider ">
{
.slick-track {
display: flex;
}
.product-card {
width: 100%;
}
.slick-prev {
left: 0;
z-index: 999;
}
.slick-next {
right: 0;
z-index: 999;
}
padding-right: 25px;
overflow: hidden;
}
$(document).ready(function(){
$('.collection-slider').each(function(){
var num_slides = 2;
if(window.innerWidth >= 750)
{
var num_slides = $(this).data('slides');
}
$(this).slick({slidesToShow:num_slides});
});
});
{% case section.settings.grid %}
{% when 2 %}
{%- assign max_height = 530 -%}
{% when 3 %}
{%- assign max_height = 345 -%}
{% when 4 %}
{%- assign max_height = 250 -%}
{% when 5 %}
{%- assign max_height = 195 -%}
{% endcase %}
{% if section.settings.layout == 'grid' %}
{%- assign limit = section.settings.grid | times: section.settings.rows -%}
{% else %}
{%- assign limit = 16 -%}
{% endif %}
{% paginate collection.products by limit %}
<div data-section-id="{{ section.id }}" data-section-type="collection-template">
<header class="collection-header">
{%- assign is_filter_by_available = false -%}
{%- if section.settings.tags_enable and collection.all_tags.size > 0 -%}
{%- assign is_filter_by_available = true -%}
{%- endif -%}
{% if section.settings.show_collection_image and collection.image %}
<div class="collection-hero">
<div class="collection-hero__image ratio-container lazyload js"
data-bgset="{% include 'bgset', image: collection.image %}"
data-sizes="auto"
data-parent-fit="cover"
style="background-image: url('{{ collection.image | img_url: '300x300' }});"></div>
<noscript>
<div class="collection-hero__image" style="background-image: url({{ collection.image | img_url: '2048x600', crop: 'top' }});"></div>
</noscript>
<div class="collection-hero__title-wrapper">
<h1 class="collection-hero__title page-width">
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
</h1>
</div>
</div>
{% if is_filter_by_available == false and section.settings.sort_enable == false %}
<div class="page-width">
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
</div>
{% endif %}
{% if collection.description != blank %}
<div class="rte collection-description page-width">
{{ collection.description }}
</div>
{% endif %}
{% else %}
<div class="page-width">
<div class="section-header text-center">
<h1>
<span class="visually-hidden">{{ 'collections.general.collection_label' | t }}: </span>
{{ collection.title }}
</h1>
{% if collection.description != blank %}
<div class="rte">
{{ collection.description }}
</div>
{% endif %}
{% if is_filter_by_available == false and section.settings.sort_enable == false %}
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
{% endif %}
</div>
</div>
{% endif %}
{% if is_filter_by_available or section.settings.sort_enable %}
<div class="filters-toolbar-wrapper{% if is_filter_by_available %} filters-toolbar--has-filter{% endif %}">
<div class="page-width">
<div class="filters-toolbar">
<div class="filters-toolbar__item-wrapper">
{% if section.settings.tags_enable %}
{% unless collection.all_tags.size == 0 %}
<div class="filters-toolbar__item-child">
<label class="filters-toolbar__label select-label" for="FilterTags">{{ 'collections.filters.title_tags' | t }}</label>
<div class="filters-toolbar__input-wrapper select-group">
<select class="filters-toolbar__input hidden" name="FilterTags" id="FilterTags" aria-describedby="a11y-refresh-page-message a11y-selection-message">
<option value="{{ collection.url }}">{{ 'collections.filters.all_tags' | t }}</option>
{% for tag in collection.all_tags %}
{%- assign new_url = tag | link_to_tag: tag | split: 'href="' | last | split: '"' | first -%}
<option value="{{ new_url }}"{% if current_tags contains tag %} selected="selected"{% endif %}>{{ tag }}</option>
{% endfor %}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>
{% endunless %}
{% endif %}
{% if section.settings.sort_enable %}
<div class="filters-toolbar__item-child">
{%- assign sort_by = collection.sort_by | default: collection.default_sort_by -%}
<label class="filters-toolbar__label select-label" for="SortBy">{{ 'collections.sorting.title' | t }}</label>
<div class="filters-toolbar__input-wrapper select-group">
<select name="sort_by" id="SortBy"
class="filters-toolbar__input hidden"
aria-describedby="a11y-refresh-page-message a11y-selection-message"
data-default-sortby="{{ collection.default_sort_by }}"
>
{%- for option in collection.sort_options -%}
<option value="{{ option.value }}" {% if option.value == sort_by %}selected="selected"{% endif %}>{{ option.name }}</option>
{%- endfor -%}
</select>
{% include 'icon-chevron-down' %}
</div>
</div>
{% endif %}
</div>
<div class="filters-toolbar__item filters-toolbar__item--count">
<span class="filters-toolbar__product-count">{{ 'collections.general.items_with_count' | t: count: collection.products_count }}</span>
</div>
</div>
</div>
</div>
{% endif %}
</header>
<div class="page-width" id="Collection">
{% if section.settings.layout == 'grid' %}
{% case section.settings.grid %}
{% when 2 %}
{%- assign grid_item_width = 'medium-up--one-half' -%}
{% when 3 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-third' -%}
{% when 4 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-quarter' -%}
{% when 5 %}
{%- assign grid_item_width = 'small--one-half medium-up--one-fifth' -%}
{% endcase %}
<ul class="grid grid--uniform{% if collection.products_count > 0 %} grid--view-items{% endif %}">
{% for product in collection.products %}
<li class="grid__item grid__item--{{section.id}} {{ grid_item_width }}">
{% include 'product-card-grid', max_height: max_height, product: product, show_vendor: section.settings.show_vendor %}
</li>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0 %}
<li class="grid__item">
<div class="grid grid--uniform">
{% for i in (1..limit) %}
<div class="grid__item {{ grid_item_width }}">
<div class="grid-view-item">
<a href="#" class="grid-view-item__link">
<div class="grid-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4, 5, 6 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
<div class="h4 grid-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
<div class="grid-view-item__meta">
<span class="product-price__price">$19.99</span>
</div>
</a>
</div>
</div>
{% endfor %}
</div>
</li>
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</ul>
{% else %}
<ul class="list-view-items">
{% for product in collection.products %}
<li class="list-view-item">
{% include 'product-card-list', product: product, show_vendor: section.settings.show_vendor %}
</li>
{% else %}
{% comment %}
Add default products to help with onboarding for collections/all only.
The onboarding styles and products are only loaded if the
store has no products.
{% endcomment %}
{% if collection.handle == 'all' and collection.all_vendors.size == 0 and collection.all_types.size == 0%}
{% for i in (1..4) %}
<li class="list-view-item">
<a href="#" class="list-view-item__link">
<div class="list-view-item__image-column">
<div class="list-view-item__image-wrapper">
<div class="list-view-item__image">
{% capture current %}{% cycle 1, 2, 3, 4 %}{% endcapture %}
{{ 'product-' | append: current | placeholder_svg_tag: 'placeholder-svg' }}
</div>
</div>
</div>
<div class="list-view-item__title-column">
<div class="list-view-item__title">{{ 'homepage.onboarding.product_title' | t }}</div>
</div>
<div class="list-view-item__price-column">
<span class="product-price__price">$19.99</span>
</div>
</a>
</li>
{% endfor %}
{% else %}
{%- assign is_empty_collection = true -%}
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% if is_empty_collection %}
<div class="grid__item small--text-center">
<p class="text-center">{{ 'collections.general.no_matches' | t }}</p>
</div>
{% endif %}
{%- if paginate.pages > 1 -%}
{% include 'pagination', paginate: paginate %}
{%- endif -%}
</div>
</div>
{% endpaginate %}

Trying to create slide show variants in shopify

I am new to shopify I am trying to create a website with a slide show variant. I have manage to write this code but I get the following error
Line 247 — Liquid syntax error: 'schema' tag must not be nested inside other tags.
The code is meant to create the variant into a slide show using the app flex app.
Does anyone know were i am going wrong ?
<!-- /templates/product.liquid -->
<div itemscope itemtype="http://schema.org/Product" id="ProductSection" data-section-id="{{ section.id }}" data-section-type="product-template" data-image-zoom-type="{{ section.settings.product_image_zoom_type }}" data-show-extra-tab="{{ section.settings.show_extra_tab }}" data-extra-tab-content="{{ section.settings.extra_tab_content }}" data-cart-enable-ajax="{{ settings.cart_enable_ajax }}" data-enable-history-state="true">
<meta itemprop="name" content="{{ product.title }}">
<meta itemprop="url" content="{{ shop.url }}{{ product.url }}">
<meta itemprop="image" content="{{ product.featured_image.src | img_url: 'grande' }}">
{% comment %}
Get first variant in stock, or deep linked one
{% endcomment %}
{% assign current_variant = product.selected_or_first_available_variant %}
{%- assign featured_image = current_variant.featured_image | default: product.featured_image -%}
<div class="grid product-single">
<div class="grid__item medium-up--one-half">
{% for image in product.images %}
{% capture img_id %}ProductImage-{{ image.id }}{% endcapture %}
{% capture wrapper_id %}ProductImageWrapper-{{ image.id }}{% endcapture %}
{%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}
{% include 'image-style' with image: image, width: 720, height: 600, small_style: true, wrapper_id: wrapper_id, img_id: img_id %}
<div id="{{ wrapper_id }}" class="product-single__featured-image-wrapper supports-js{% unless featured_image == image %} hidden{% endunless %}" data-image-id="{{ image.id }}">
<div class="product-single__photos" data-image-id="{{ image.id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;">
<img id="{{ img_id }}"
class="product-single__photo lazyload{% unless featured_image == image %} lazypreload{% endunless %}{% if section.settings.product_image_zoom_type == 'lightbox' %} lightbox{% endif %}"
{% if section.settings.product_image_zoom_type == 'zoom-in' %} data-zoom="{{ image | img_url: '1024x1024' }}"{% endif %}
src="{{ image | img_url: '200x200' }}"
data-src="{{ img_url }}"
data-widths="[180, 360, 470, 600, 750, 940, 1080, 1296, 1512, 1728, 2048]"
data-aspectratio="{{ image.aspect_ratio }}"
data-sizes="auto"
alt="{{ image.alt | escape }}">
</div>
{% if product.compare_at_price_max > product.price %}
<span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
{% endif %}
</div>
{% endfor %}
<noscript>
<img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}">
</noscript>
{% if product.images.size > 1 %}
<ul class="product-single__thumbnails grid grid--uniform" id="ProductThumbs">
{% case product.images.size %}
{% when 2 %}
{% assign thumbnail_width = 'small--one-half medium-up--push-one-sixth medium-up--one-third' %}
{% when 4 %}
{% assign thumbnail_width = 'small--one-half medium-up--one-quarter' %}
{% else %}
{% assign thumbnail_width = 'small--one-third medium-up--one-third' %}
{% endcase %}
{% for image in product.images %}
<li class="grid__item {{ thumbnail_width }}">
<a href="{{ image.src | img_url: 'grande' }}" class="product-single__thumbnail" data-image-id="{{ image.id }}">
<img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% endif %}
{% if section.settings.product_image_zoom_type == 'lightbox' %}
<ul class="gallery hidden">
{% for image in product.images %}
<li data-image-id="{{ image.id }}" class="gallery__item" data-mfp-src="{{ image | img_url: '2048x2048' }}"></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="grid__item medium-up--one-half{% if product.images.size == 0%} medium-up--push-one-half{% endif %}">
<div class="product-single__meta small--text-center">
<h1 class="product-single__title" itemprop="name">{{ product.title }}</h1>
{% if section.settings.vendor_show %}
<p class="product-single__vendor" itemprop="brand">{{ product.vendor }}</p>
{% endif %}
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">
<link itemprop="availability" href="http://schema.org/{% if current_variant.available %}InStock{% else %}OutOfStock{% endif %}">
<p class="product-single__prices">
{% if product.compare_at_price_max > product.price %}
<span id="ComparePriceA11y" class="visually-hidden">{{ 'products.product.sale_price' | t }}</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
{% endif %}
<span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
{% if product.compare_at_price_max > product.price %}
<span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s class="product-single__price--compare" id="ComparePrice">
{{ current_variant.compare_at_price | money }}
</s>
{% endif %}
{% include 'product-unit-price', variant: current_variant, available: true %}
</p>
{%- if shop.taxes_included or shop.shipping_policy.body != blank -%}
<div class="product-single__policies rte">
{%- if shop.taxes_included -%}
{{ 'products.product.include_taxes' | t }}
{%- endif -%}
{%- if shop.shipping_policy.body != blank -%}
{{ 'products.product.shipping_policy_html' | t: link: shop.shipping_policy.url }}
{%- endif -%}
</div>
{%- endif -%}
{%- assign productClasses = 'product-form' -%}
{%- if product.has_only_default_variant -%}
{%- assign productClasses = productClasses | append: ' product-form--default-variant-only' -%}
{%- endif -%}
{% form 'product', product, class: productClasses %}
<select name="id" id="ProductSelect-{{ section.id }}" class="product-single__variants">
{% for variant in product.variants %}
{% if variant.available %}
<option {% if variant == product.selected_or_first_available_variant %} selected="selected" {% endif %} data-sku="{{ variant.sku }}" value="{{ variant.id }}">{{ variant.title }} - {{ variant.price | money_with_currency }}</option>
{% else %}
<option disabled="disabled">
{{ variant.title }} - {{ 'products.product.sold_out' | t }}
</option>
{% endif %}
{% endfor %}
</select>
{% if section.settings.product_quantity_enable %}
<div class="product-single__quantity">
<label for="Quantity">{{ 'products.product.quantity' | t }}</label>
<input type="number" id="Quantity" name="quantity" value="1" min="1">
</div>
{% endif %}
<div class="product-single__cart-submit-wrapper{% if section.settings.enable_payment_button %} product-single__shopify-payment-btn{% endif %}{% if section.settings.add_to_cart_width == 'full_width' %} product-form--full{% endif %}">
<button type="submit" name="add" id="AddToCart" class="btn product-single__cart-submit{% if section.settings.add_to_cart_width == 'full_width' %} btn--full{% endif %}{% if section.settings.enable_payment_button %} shopify-payment-btn btn--secondary{% endif %}" data-cart-url="{{ routes.cart_url }}">
<span id="AddToCartText">{{ 'products.product.add_to_cart' | t }}</span>
</button>
{% if section.settings.enable_payment_button %}
{{ form | payment_button }}
{% endif %}
</div>
{% endform %}
</div>
{% if section.settings.product_description_position == 'right' %}
{%- assign position = 'right' -%}
{% include 'product-description' %}
{% endif %}
{% if section.settings.social_sharing_products %}
{% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product %}
{% endif %}
</div>
</div>
</div>
{% if section.settings.product_description_position == 'below' %}
{%- assign position = 'below' -%}
{% include 'product-description' %}
{% endif %}
</div>
{% unless product == empty %}
<script type="application/json" id="ProductJson-{{ section.id }}">
{{ product | json }}
</script>
{% endunless %}
<script>
// Override default values of shop.strings for each template.
// Alternate product templates can change values of
// add to cart button, sold out, and unavailable states here.
window.productStrings = {
addToCart: {{ 'products.product.add_to_cart' | t | json }},
soldOut: {{ 'products.product.sold_out' | t | json }},
unavailable: {{ 'products.product.unavailable' | t | json }}
}
{% if product.variants.size > 1 %}
<script>
(function($) {
var variantImages = {},
thumbnails,
variant,
variantImage,
variantImage_count = 0;
//produce mapping between variant image and options
{% for variant in product.variants %}
variant = {{ variant | json }};
if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
variantImage = variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
variantImages[variantImage] = variantImages[variantImage] || {};
{% for option in product.options %}
{% assign option_value = variant.options[forloop.index0] %}
{% assign option_key = 'option-' | append: forloop.index0 %}
if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
}
else {
var oldValue = variantImages[variantImage][{{ option_key | json }}];
if ( oldValue !== null && oldValue !== {{ option_value | json }} ) {
variantImages[variantImage][{{ option_key | json }}] = null;
}
}
{% endfor %}
variantImage_count++;
}
{% endfor %}
$(function() {
if (variantImage_count > 0) {
$('select.single-option-selector').change(function() {
var selected_color = $(this).val();
thumbnails = $('.flex-control-thumbs img').each(function(index, el) {
var image = $(el).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
if (typeof variantImages<div class="full"></div> !== 'undefined') {
if(selected_color == variantImages<div class="full"></div>['option-0']) {
//only check against the first option ['option-0'], which is Color (in my case)
$('.flexslider').flexslider(index);
}
}
});
});
}
});
})(jQuery);
</script>
}

The {% schema %} tag was introduced with Shopify's "sectioned themes". I can see that your shopify theme is using "Sections", because of all the reference to the section variable in your code!
Since searching for {% schema %} within your question code doesn't return any results, I have to conclude the syntax error is originating in a different file. (Probably one including your product.liquid file with a {% section 'product' %} directive.
In the Shopify theme docs about "Using theme sections", we see that the {% schema %} tag lives in templates that are inside of the sections/ folder in your theme's directory structure. In this case, I'd expect to find the nested tag causing the syntax error within sections/product.liquid.

Images and videos in product slider on Shopify site

I require some help in creating a product slider in Shopify that allows you to add images and videos. At the moment the slider is working fine but I am having issues adding product videos to the slider.
From what I have read you can use the alt tag to add a YouTube embed code that will overwrite the image and display the video. I can get this working for the first image but it has a tenancy to break the rest of the slider. I believe I might need to change up the default slider and head with another alternative.
Here is what I have so far
$('#FeaturedImageZoom-product-template .product-featured-img').each (function() {
var videoid = $(this).attr("alt");
console.log(videoid);
if ($('.product-featured-img').attr("alt") == videoid) {
$(this).replaceWith('<iframe width="500px" height="500px" src="'+videoid+'?autoplay=1&showinfo=0&controls=0&modestbranding=1&rel=0" frameborder="0" allowfullscreen></iframe>');
}
});
And here is the liquid code to go with that:
<div class="grid product-single">
<div class="grid__item product-single__photos {{ product_image_width }}{% if section.settings.image_size == 'full' %} product-single__photos--full{% endif %}">
{%- assign featured_img_src = current_variant.featured_image.src | default: product.featured_image.src -%}
{%- assign featured_img_alt = current_variant.featured_image.alt | default: product.featured_image.alt -%}
<div id="FeaturedImageZoom-{{ section.id }}" class="product-single__photo{% if product.images.size > 1 %} product-single__photo--has-thumbnails{% endif %}" {% if enable_zoom %}data-zoom="{{ featured_img_src | img_url: product_image_zoom_size, scale: product_image_scale }}"{% endif %}>
<img src="{{ featured_img_src | img_url: product_image_size, scale: product_image_scale }}" alt="{{ featured_img_alt }}" id="FeaturedImage-{{ section.id }}" class="product-featured-img{% if enable_zoom %} js-zoom-enabled{% endif %}">
</div>
{% if product.images.size > 1 %}
{% if product.images.size > 3 %}
{%- assign enable_thumbnail_slides = true -%}
{% endif %}
<div class="thumbnails-wrapper{% if enable_thumbnail_slides == true %} thumbnails-slider--active{% endif %}">
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__prev thumbnails-slider__prev--{{ section.id }}">
{% include 'icon-chevron-left' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.previous_slide' | t }}</span>
</button>
{% endif %}
<ul class="grid grid--uniform product-single__thumbnails product-single__thumbnails-{{ section.id }}">
{% for image in product.images %}
<li class="grid__item {{ product_thumbnail_width }} product-single__thumbnails-item">
<a
href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.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: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
</a>
</li>
{% endfor %}
</ul>
{% if enable_thumbnail_slides == true %}
<button type="button" class="btn btn--link medium-up--hide thumbnails-slider__btn thumbnails-slider__next thumbnails-slider__next--{{ section.id }}">
{% include 'icon-chevron-right' %}
<span class="icon__fallback-text">{{ 'sections.slideshow.next_slide' | t }}</span>
</button>
{% endif %}
</div>
{% endif %}
</div>
I have read a couple of posts that outline a similar issue with developers trying to add a product videos however I have yet to come across a solution.
If anyone can help out here that would be appreciated.
Thanks

Why use javascript for this when you can use simply liquid?
You just need to add check for the alt attribute if it contains youtube or something unique.
So for example:
{% if image.alt contains 'youtube' %}
<iframe width="500px" height="500px" src="{{image.alt}}?autoplay=1&showinfo=0&controls=0&modestbranding=1&rel=0" frameborder="0" allowfullscreen></iframe>
{% else %}
<a
href="{{ image.src | img_url: product_image_size, scale: product_image_scale }}"
class="text-link product-single__thumbnail product-single__thumbnail--{{ section.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: product_thumb_size, scale: product_image_scale }}" alt="{{ image.alt | escape }}">
</a>
{% endif %}

I just wanted to post the solution I arrived at based on the answer above by "drip". I hope this might help someone else down the track.
<!-- Product Slider w/ Video -->
<div id="product-flexslider" class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}">
<ul class="slides">
{% for image in product.images %}
<li data-thumb="{{ image | product_img_url: '1024x1024' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}">
{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
{% assign src = image.alt | split: 'src="' %}
{% assign src = src[1] | split: '"' | first %}
{% if src contains '?' %}
{% assign src = src | append: '&autoplay=1' %}
{% else %}
{% assign src = src | append: '?autoplay=1' %}
{% endif %}
<div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}">
<div>
<a href="{{ src }}" title="{{ product.title | escape }}">
{{ image.alt }}
</a>
</div>
</div>
{% else %}
<a href="{{ image | product_img_url: 'master' }}" title="{{ image.alt | escape }}">
<img src="{{ image | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}"/>
</a>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
<!-- Carousel -->
<div id="product-carousel" class="flexslider product_gallery product-{{ product.id }}-gallery {% if product-images == blank %}product_slider{% endif %} {% if settings.product_thumbs == false %}animated fadeInUp{% endif %}">
<ul class="slides">
{% for image in product.images %}
<li data-thumb="{{ image | product_img_url: '1024x1024' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}">
<a href="{{ image | product_img_url: 'master' }}" title="{{ image.alt | escape }}">
<img src="{{ image | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" />
</a>
</li>
{% endfor %}
</ul>
</div>
<!-- End Slider -->
<!-- FlexSlider -->
{{ 'jquery.flexslider-min.js' | asset_url | script_tag }}
{{ 'flexslider.css' | asset_url | stylesheet_tag }}
<script type="text/javascript" charset="utf-8">
(function($) {
$(window).load(function(){
$('#product-carousel').flexslider({
animation: "slide",
controlNav: false,
itemWidth: 41,
itemMargin: 5,
asNavFor: '#product-flexslider'
});
$('#product-flexslider').flexslider({
animation: "slide",
controlNav: false,
sync: "#product-carousel"
});
});
})(jQuery);
</script>
Once you have updated the code you can place the embed code in the ALT tag of the image while using the image as a thumbnail placeholder.
FlexSlider properties can be located here:
https://github.com/woocommerce/FlexSlider/wiki/FlexSlider-Properties
The solution was also helped by the post here which was relating to another issue:
https://ecommerce.shopify.com/c/ecommerce-discussion/t/issue-with-variable-image-444159