We Keep Coding

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 %}

Expand only one mobile nav option at a time

I have a Shopify mobile nav that currently expands all options at once. They must manually be collapsed, which creates an annoying user experience on mobile.
I am looking for any advice on modifying it so only one option expands at a time ('.mobile-nav__sublist-trigger is-active show-dropdown' is the link with multiple options).
Any help is appreciated!
<nav role="navigation">
<ul id="MobileNav" class="mobile-nav post-large--hide">
<a href="{{ routes.cart_url }}" class="cart-page-link mobile-cart-page-link">
<span class="icon icon-cart header-bar__cart-icon" aria-hidden="true"></span>
{{ 'layout.cart.title' | t }} <span class="cart-count{% if cart.item_count == 0 %} hidden-count{% endif %}">{{ cart.item_count }}</span>
</a>
<form class="search" action="/search">
<input type="text" placeholder="Search" name="q" value="{{ search.terms | escape }}" />
<input type="submit" value="Search" />
</form>
{% for link in mobile-nav.links %}
{% if link.links != blank %}
{% assign parent_index = forloop.index %}
<li class="mobile-nav__link" aria-haspopup="true">
<a
href="{{ link.url }}"
class="mobile-nav__sublist-trigger"
aria-controls="MobileNav-Parent-{{ parent_index }}"
aria-expanded="false">
{{ link.title | escape }}
{% include 'mobile-nav-icons' %}
</a>
<ul
id="MobileNav-Parent-{{ parent_index }}"
class="mobile-nav__sublist">
{% if link.type == 'collection_link' or link.type == 'blog_link' or link.url == routes.all_products_collection_url %}
<li class="mobile-nav__sublist-link {% if link.active %}site-nav--active{% endif %}">
{{ link.title | escape }}</span>
</li>
{% endif %}
{% for childlink in link.links %}
{% if childlink.links != blank %}
{% assign child_index = forloop.index %}
<li class="mobile-nav__sublist-link">
<a
href="{{ childlink.url }}"
class="mobile-nav__sublist-trigger"
aria-controls="MobileNav-Child-{{ parent_index }}-{{ child_index }}"
aria-expanded="false"
>
{{ childlink.title | escape }}
{% include 'mobile-nav-icons' %}
</a>
<ul
id="MobileNav-Child-{{ parent_index }}-{{ child_index }}"
class="mobile-nav__sublist mobile-nav__sublist--grandchilds">
{% for grandchildlink in childlink.links %}
<li class="mobile-nav__sublist-lin">
<a
href="{{ grandchildlink.url }}"
class="collapse"
{% unless request.page_type == 'index' %}{% if grandchildlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ grandchildlink.title | escape }}
</a>
</li>
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__sublist-link">
<a
href="{{ childlink.url }}"
{% unless request.page_type == 'index' %}{% if childlink.active %}aria-current="page"{% endif %}{% endunless%}>
{{ childlink.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
</ul>
</li>
{% else %}
<li class="mobile-nav__link">
<a
href="{{ link.url }}"
class="mobile-nav"
{% unless request.page_type == 'index' %}{% if link.active %}aria-current="page"{% endif %}{% endunless%}>
{{ link.title | escape }}
</a>
</li>
{% endif %}
{% endfor %}
{% if shop.customer_accounts_enabled %}
{% if customer %}
<li class="mobile-nav__link">
{{ 'layout.customer.account' | t }}
</li>
<li class="mobile-nav__link">
{{ 'layout.customer.log_out' | t | customer_logout_link }}
</li>
{% else %}
<li class="mobile-nav__link">
{{ 'layout.customer.log_in' | t | customer_login_link }}
</li>
<li class="mobile-nav__link">
{{ 'layout.customer.create_account' | t | customer_register_link }}
</li>
{% endif %}
{% endif %}
<li class="mobile-nav__link">
{% if section.settings.header_search_enable %}
{% endif %}
</li>
</ul>
</nav>

Try this I did this for your "Shop" Submenus
$('.mobile-nav__link ul > li').click(function(){
// Setting all the submenu hidden by default
$('.mobile-nav__link ul > li').find('a').removeClass('is-active');
$('.mobile-nav__link ul > li').find('ul').css({'display': 'none'});
$('.mobile-nav__link ul > li').find('a').attr('aria-expanded', 'false');
// Activating the current (clicked) submenu
$(this).find('a').addClass('is-active');
$(this).find('a').attr('aria-expanded', 'true');
$(this).find('ul').css({'display': 'block'});
});

Shopify - Change opacity sold out product's thumbnail

I would like to have an opacity applied to the thumbnail when an article is sold out, is it possible?
<div class="product-details">
{% if settings.display_vendor %}
<span itemprop="brand" class="brand">{{ product.vendor }}</span>
{% endif %}
<span class="title" itemprop="name">{{ product.title }}</span>
{% if collection_handles contains 'coming-soon' %}
<span class="modal_price">{{ 'collections.general.coming_soon' | t }}</span>
{% else %}
<span class="price {% if product.compare_at_price_max > product.price %}sale{% endif %}">
{% if product.available %}
{% if product.price_varies and product.price_min > 0 %}
<small><em>{{ 'products.general.from' | t }}</em></small>
{% endif %}
{% if product.price_min > 0 %}
<span class="money">{{ product.price_min | money }}</span>
{% else %}
{{ settings.free_price_text }}
{% endif %}
{% else %}
<span class="sold_out">UH OH, WE’RE OUT</span>
{% endif %}
{% if product.compare_at_price_max > product.price %}
<span class="was_price">
<span class="money">{{ product.compare_at_price_max | money }}</span>
</span>
{% endif %}
</span>
{% endif %}
{% if settings.enable_shopify_collection_badges and settings.enable_shopify_review_comments %}
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
{% endif %}
</div>
Thank you so much for your help.

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.

Submenu refuses to open on click

I'm trying to make a left side navigation bar where by-default categories are listed and while clicking on a category, the subcategories are shown under it (in sort expanding sub-menu). I'm working in Django and relevant portions of my code are below. When I include the JS code, none of the links on the page work and when I exclude it, all the subcategories for all categories are shown by-default. I need only categories to be shown by default and while clicking on any, the respective subcategories be shown. What I'm missing here?
JS CODE: at the bottom of the page, loaded after the footer:
{% block theme_script %}
<script src="{% static " pinax/js/theme.js " %}"></script>
<script>
$(function() {
$(".nav-collapse88").hide();
$(".nav-collapse89 a").click(function(e) {
e.preventDefault();
$(".nav-collapse88", $(this).parent()).slideToggle();
});
})
</script>
{% endblock %}
My HTML:
My CATEGORYINDEX.HTML TEMPLATE:
{% load staticfiles %}
{% load i18n pybb_tags forumindexlistbycat %}
{% catindexlist as catindexlisted %}
{% block body %}
<div class="col-md-12 col-xs-12 body-container leftsidenavigator" style="margin-top:15px;">
<div class="col-md-12 col-xs-12 leftsidenavigator-inner" style="padding:0px;">
<h2><center>Categories</center></h2>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}</li></div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum"><li style="padding-right:10px;">{{forum.name}}</li></div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
</div>
</div>
{% endblock %}
MY SITE_BASE.HTML:
<div class="col-md-2" style="border-right:solid;text-align:right;height:99%;padding:0 0 0 0px;" id="sidebar"> {% include "categoryindex.html" %} </div>
All who answer will win a magical Pony! Thanks,

Using the concept of parent siblings you can do that as:
Code Snippet
$(function() {
$(".category-name a").parent('li').parent('div').siblings('div').hide();
$(".category-name a").click(function(e) {
e.preventDefault();
$(".category-name a").parent('li').parent('div').siblings('div').slideUp();
if(!($(this).parent('li').parent('div').siblings('div').is(":visible"))){
$(this).parent('li').parent('div').siblings('div').slideToggle();
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}01</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}01</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}02</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}02</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>
<ul class="catindexlist catlistcat nav-collapse89">
{% for category in catindexlisted %}
<div class="catindexlistitem">
<li class="category-name" style="font-weight:600;padding-right:20px;">{{category.name}}03</li>
</div>
<div class="nav-collapse88">
<ul style="padding:0px;">
{% for forum in category|forumindexlistbycat %}
<div class="catlistforum">
<li style="padding-right:10px;">{{forum.name}}03</li>
</div>
{% endfor %}
</ul>
</div>
{% endfor %}
</ul>