We Keep Coding

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.

jquery - not able to replace siblings div with id or class

I have this jQuery script that I do not fully understand. I was wondering why I cannot replace the siblings('div') with a class or id? I think my code doesn't work properly. What I was trying to do is replace some content with a button click, and then the second content, replace it again with the second function.
<script>
$(document).ready(function () {
$('.btnClick').on('click', function () {
var faculty_id = $(this).attr('id');
$('#' + faculty_id + '_tab').show().siblings('div').hide();
});
$('.btnClick2').on('click', function () {
var department_id = $(this).attr('id');
$('#' + department_id + '_tab').show().siblings('div').hide();
});
});
</script>
<div class="row">
<div class="col-md-3">
<div class="jumbotron">
<h4>Search courses</h4>
<hr>
<br>
<ul>
{% for faculty in faculties %}
<li class="btnClick" id="fac_{{ faculty.pk }}">{{ faculty.name }}</li>
<ul>
{% for department in faculty.department_set.all %}
<li class="btnClick2" id="dep_{{ department.pk }}">{{ department.name }}</li>
<ul>
{% for study in studies %}
{% if study.department == department %}
<li>{{ study.name }}</li>
{% endif %}
{% endfor %}
</ul>
{% endfor %}
</ul>
{% endfor %}
</ul>
</div>
</div>
<div class="col-md-9">
<div class="jumbotron">
<div>
<h3>All courses</h3>
<ul>
{% for course in courses %}
<li>
<a class="first" href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endfor %}
</ul>
</div>
{% for faculty in faculties %}
<div id="fac_{{ faculty.pk }}_tab" style="display:none;">
<h3> {{ faculty.name }} courses</h3>
<ul>
{% for department in faculty.department_set.all %}
{% for study in studies %}
{% if study.department == department %}
{% for course in courses %}
{% if course.study_programme == study %}
<li>
<a class="first"
href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
{% endfor %}
{% for faculty in faculties %}
<ul>
{% for department in faculty.department_set.all %}
<div id="dep_{{ department.pk }}_tab" style="display:none;">
<h3>Department of {{ department.name }} courses</h3>
<ul>
{% for study in studies %}
{% if study.department == department %}
{% for course in courses %}
{% if course.study_programme == study %}
<li>
<a class="first"
href={{ course.slug }}>{{ course.name }}</a>
</li>
{% endif %}
{% endfor %}
{% endif %}
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
{% endfor %}
</div>
</div>
</div>
</div>

Long loading Javascript (modal window)

On this site http://nashedom.ru there are JS scripts. Most are fast.
The modalka fancybox pages (for login users, in user cabinet, page объявления -> добавление объявления) are very slow. In Chrome loading is 25-28 seconds. In Firefox - 2,5 seconds.
The data is taken out of context.
HTML:
{% load hosts %}
<div class="b-header">
<div class="b-header__menu">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="b-menu">
<a>...</a>
<a>...</a>
<a>...</a>
<a>...</a>
<span class="b-menu__item btn_change-location">
<a href="#change-location" class="fancybox dashed">
{% if user.is_authenticated %}
View ads on site:
{% if user.districts.all.count > 1 %}
{% for district in user.districts.all %}
{% if forloop.last %}
<span>{{ district }}</span>
{% else %}
<span>{{ district }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for district in user.districts.all %}
<span>{{ district }}</span>
{% endfor %}
{% endif %}
{% if user.regions.all.count > 1 %}
{% for region in user.regions.all %}
{% if forloop.last %}
<span>{{ region }}</span>
{% else %}
<span>{{ region }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for region in user.regions.all %}
<span>{{ region }}</span>
{% endfor %}
{% endif %}
{% if user.cities.all.count > 1 %}
{% for city in user.cities.all %}
{% if forloop.last %}
<span>{{ city }}</span>
{% else %}
<span>{{ city }},</span>
{% endif %}
{% endfor %}
{% else %}
{% for city in user.cities.all %}
<span>{{ city }}</span>
{% endfor %}
{% endif %}
{% else %}
View ads on site:
{% endif %}
</a>
</span>
</div>
</div>
</div>
</div>
</div>
Templates modal window
{% load hosts %}
{% load widget_tweaks static %}
<div id="change-location">
<form action="{% host_url "setlocation" host "www" %}" method="post">
{% csrf_token %}
<div id="chose-city-wrap">
<div class="b-modal__title">Select your city</div>
<p>
<div class="b-modal__item">
<span>{{ location_form.country.label }}</span>
{{ location_form.country }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.districts.label }}</span>
{{ location_form.districts }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.regions.label }}</span>
{{ location_form.regions }}
</div>
</p>
<p>
<div class="b-modal__item">
<span>{{ location_form.cities.label }}</span>
{{ location_form.cities }}
</div>
</p>
<br />
<div class="b-modal__item b-modal__item_btn">
<input class="b-btn b-btn_red" type="submit" value="Сохранить">
</div>
</div>
</form>
</div>
<!-- end snippet -->
cities download form on the page where the brakes modal window!
<fieldset>
<legend>The territory of distribution of the ads</legend>
{{ form.country|add_class:"b-input__input js-select" }}
{{ form.districts|add_class:"b-input__input js-select chosen-select" }}
{{ form.regions|add_class:"b-input__input js-select chosen-select" }}
{{ form.cities|add_class:"b-input__input js-select chosen-select" }}
{# form.geo|add_class:"b-input__input" #}
</fieldset>

As you explain it, you have a lot of data to get (countries, cities), if you do it in php, you will lock the page until you retrive all those datas.
To have a shorter loading time, you just have to make everything in js (ajax).
You load your page with the cities, countries, ... without data.
Once the page is loaded (document.ready), you call your ajax to fill your cities, countries and so on.