I Have a custom product grid for one of the brands I am selling that has 4 tabs to hover and the content is changing in every tab. When i try to create another grid, 2 of the tabs are not showing the pictures i've inserted. First tab that's not showing pictures
and 2 of the tabs are showing as needed.
Security section
The code is the same for both sections.
<div class="tab">
<button class="tablinks" onmouseover="openCity(event, 'Switches')" id="defaultOpen">Switches</button>
<button class="tablinks" onmouseover="openCity(event, 'Routers')">Routers</button>
<button class="tablinks" onmouseover="openCity(event, 'Security')">Security</button>
<button class="tablinks" onmouseover="openCity(event, 'Wireless')">Wireless</button>
</div>
<script type="lazyload2">
// Get the element with id="defaultOpen" and click on it
setTimeout(function() { openCity(event, 'Switches'); document.getElementById('defaultOpen').className += " active"});
</script>
<div class="row tabcontent" id="Switches" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_1 }} col-sm-{{ section.settings.banner_col_1 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_1 != blank %}
{% assign img_banner_col_1 = section.settings.image_banner_col_1 | img_url: "master" %}
{% assign img_banner_col_1_alt = section.settings.image_banner_col_1_alt %}
{% else %}
{% assign img_banner_col_1 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_1 }}" alt="{{ img_banner_col_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_2}} col-sm-{{section.settings.banner_col_2}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_2_1 != blank %}
{% assign img_banner_col_2_1 = section.settings.image_banner_col_2_1 | img_url: "master" %}
{% assign img_banner_col_2_1_alt = section.settings.image_banner_col_2_1_alt %}
{% else %}
{% assign img_banner_col_2_1 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_1 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_1}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_1_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_1 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_1 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_2_2 != blank %}
{% assign img_banner_col_2_2 = section.settings.image_banner_col_2_2 | img_url: "master" %}
{% assign img_banner_col_2_2_alt = section.settings.image_banner_col_2_2_alt %}
{% else %}
{% assign img_banner_col_2_2 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_2_2 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_2_2}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_2_2_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_2_2 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_2_2 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-left:0px;">
{% if section.settings.image_banner_col_3 != blank %}
{% assign img_banner_col_3 = section.settings.image_banner_col_3 | img_url: "master" %}
{% assign img_banner_col_3_alt = section.settings.image_banner_col_3_alt %}
{% else %}
{% assign img_banner_col_3 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_3 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #dbe2e4); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_3}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_3_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_3 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_3 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
And this is the code i am using for other sections
<div class="row tabcontent" id="Security" style="margin-left:-10px;margin-right:-10px;">
<div class="mobile-grid-2 col-md-{{ section.settings.banner_col_7 }} col-sm-{{ section.settings.banner_col_7 }}" style="padding-left:10px;padding-right:0px;padding-bottom:15px;">
{% if section.settings.image_banner_col_7 != blank %}
{% assign img_banner_col_7 = section.settings.image_banner_col_7 | img_url: "master" %}
{% assign img_banner_col_7_alt = section.settings.image_banner_col_7_alt %}
{% else %}
{% assign img_banner_col_7 = 'img566x566.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_7 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e8e8e8);height: 598px;">
<div class="grid-image">
<img class="img-responsive lazyloaded lazy2 main" data-src="{{ img_banner_col_7 }}" alt="{{ img_banner_col_7_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_7 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_7 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="col-md-{{section.settings.banner_col_8}} col-sm-{{section.settings.banner_col_8}}" style="padding-left:10px;padding-right:10px;padding-bottom:15px;">
<div class="row">
<div class="mobile-grid banner_item col-md-12 col-sm-12" style="padding-right:10px; padding-bottom: 10px;">
{% if section.settings.image_banner_col_8 != blank %}
{% assign img_banner_col_8 = section.settings.image_banner_col_8 | img_url: "master" %}
{% assign img_banner_col_8_alt = section.settings.image_banner_col_8_alt %}
{% else %}
{% assign img_banner_col_8 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_8 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_8}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_8_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_8 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_8 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
<div class="row">
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:0px;">
{% if section.settings.image_banner_col_9 != blank %}
{% assign img_banner_col_9 = section.settings.image_banner_col_9 | img_url: "master" %}
{% assign img_banner_col_9_alt = section.settings.image_banner_col_9_alt %}
{% else %}
{% assign img_banner_col_9 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_9 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #e0e5e9);height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_9}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_9_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_9 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_9 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
<div class="mobile-grid banner_item col-md-6 col-sm-6" style="padding-right:10px;">
{% if section.settings.image_banner_col_10 != blank %}
{% assign img_banner_col_10 = section.settings.image_banner_col_10 | img_url: "master" %}
{% assign img_banner_col_10_alt = section.settings.image_banner_col_10_alt %}
{% else %}
{% assign img_banner_col_10 = 'img566x273.png' | asset_url %}
{% endif %}
<a href="{{ section.settings.banner_link_10 }}">
<div class="banner-inner" style="background: radial-gradient(#Fff 10%, #eeecea); height: 294px;">
<div class="grid-image">
<img data-src="{{ img_banner_col_10}}" class="img-responsive lazyloaded lazy2 main" alt="{{ img_banner_col_10_alt }}">
</div>
<div class="content-banner">
{% if settings.language_enable %}
<span class="lang1">{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
<span class="lang2">{{ section.settings.content_banner_10 | split: '[lang2]' | last }}</span>
{% else %}
<span>{{ section.settings.content_banner_10 | split: '[lang2]' | first }}</span>
{% endif %}
</div>
</div>
</a>
</div>
</div>
</div>
</div>
What is the mistake i am making here?
I've tried copying the working grids code and edited from there. Still the same. Can't see banner parts.
Related
I have created a template and under that, I am assigning 5 categories of blogs but it isn't sorting them all, it is sorting them one by one. can anyone help me with this?
{% assign blog_handles = "skin-care,hair-care,foot-care,sun-care,learn" | split: ","| sort:'published_at' %}
{% for handle in blog_handles %}
{% for article in blogs[handle].articles limit: %}
<div class="blog-articles__article article">
<div class="card-wrapper underline-links-hover">
<div class="card article-card card--card article-card__image--medium card--media color-background-1" style="--ratio-percent: 52.33333333333333%;">
<div class="card__inner ratio" style="--ratio-percent: 52.33333333333333%;">
<div class="article-card__image-wrapper card__media">
<div class="article-card__image media media--hover-effect">
<img
srcset="{{ article.image.src | img_url: '533x' }}"
src="{{ article.image.src | img_url: '533x' }}"
alt="{{ article.image.src.alt | escape }}"
class="motion-reduce"
loading="lazy">
</div>
</div>
</div>
<div class="card__content">
<div class="card__information">
<h3 class="card__heading h2">
<a href="{{ article.url }}" class="full-unstyled-link">
{{ article.title | truncate: 50 | escape }}
</a>
</h3>
<div class="article-card__info caption-with-letter-spacing h5">
<span class="circle-divider">{{ article.published_at | time_tag: format: 'date' }}</span>
</div>
<p class="article-card__excerpt rte-width">
{%- if article.excerpt.size > 0 -%}
{{ article.excerpt | strip_html | truncatewords: 30 }}
{%- else -%}
{{ article.content | strip_html | truncatewords: 30 }}
{%- endif -%}
</p>
</div>
</div>
</div>
</div>
</div>
{% endfor %}
{% endfor %}
</div>
Thanks in Advance!
The sort filter should be applied to your loop object which contains the published_at info (your handle list doesn't).
Something like that (not tested) should work:
{% assign articles = blogs[handle].articles | sort:'published_at' %}
{% for article in articles %}
Do something
{% endfor %}
I try to make a basic price indication for my german Shopify store. In this line, I've tried to give out the basic price, which is: product.price / first variant value * 10 but I don't know how to get the value from that. Maybe someone can help me with this.
I hope my description is complete.
(there are 3 sets of variants but only the 1. is important so it has to be something like product options selector = 0 or something)
THX!
<p class="hint">Grundpreis: {{ product.price | divided_by: product.option.selected_value | times: 10 | money }}/Meter</p>
</p>
<p class="product-single__price product-single__price-{{ section.id }}{% unless current_variant.available %} product-price--sold-out{% endunless %}">
{% if current_variant.compare_at_price > current_variant.price %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}">{{ current_variant.compare_at_price | money }}</s>
<span class="product-price__price product-price__price-{{ section.id }} product-price__sale product-price__sale--single">
<span id="ProductPrice-{{ section.id }}"
itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
<span class="product-price__sale-label product-price__sale-label-{{ section.id }}">{{ 'products.product.on_sale' | t }}</span>
</span>
{% else %}
<span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
<s id="ComparePrice-{{ section.id }}" class="hide">{{ current_variant.compare_at_price | money }}</s>
<span class="product-price__price product-price__price-{{ section.id }}">
<span id="ProductPrice-{{ section.id }}"
itemprop="price" content="{{ current_variant.price | divided_by: 100.00 }}">
{{ current_variant.price | money }}
</span>
<span class="product-price__sale-label product-price__sale-label-{{ section.id }} hide">{{ 'products.product.on_sale' | t }}</span>
</span>
{% endif %}
<p class="hint">Grundpreis: {{ product.price | divided_by: product.option.selected_value | money }}/Meter</p>
</p>
<form action="/cart/add" method="post" enctype="multipart/form-data" class="product-form product-form-{{ section.id }}{% unless section.settings.show_variant_labels %} product-form--hide-variant-labels{% endunless %}" data-section="{{ section.id }}">
{% unless product.options.size == 1 and product.variants[0].title == 'Default Title' %}
{% for option in product.options_with_values %}
<div class="selector-wrapper js product-form__item">
<label {% if option.name == 'default' %}class="label--hidden" {% endif %}for="SingleOptionSelector-{{ forloop.index0 }}">
{{ option.name }}
</label>
<select class="single-option-selector single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">
{% for value in option.values %}
<option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value }}</option>
{% endfor %}
</select>
</div>
{% endfor %}
{% endunless %}
I'm currently working on a Shopify theme, I have a list of all products, I've filtered them to only show anything with the following tag 'Neoprene' - how do I not limit the tagged product to only show 4?
Any help would be grateful!
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% for product in collections.all.products limit: 9999 %}
{% if product.tags contains 'Neoprene' %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>
<main class="wrapper">
<div class="grid">
<div class="grid__item">
<div class="large--one-whole">
{% assign a = 0 %}
{% for product in collections.all.products limit: 9999 %}
{% if a == 4 %}
{% break %}
{% else %}
{% if product.tags contains 'Neoprene' %}
{% assign a = a | plus : 1 %}
<div class="landing-product grid__item large--one-quarter medium--one-quarter small--one-half">
<a href="{{ product.url }}" class="img">
{% for image in product.images %}
<span class="grid-link__image-centered">
<img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ product.featured_image.alt | escape }}">
</span>
{% endfor %}
</a>
<a href="{{ product.url }}" class="title">
{{ product.title }}
</a>
<a href="{{ product.url }}" class="price">
{{ product.price | money }}
</a>
</div>
{% endif %}
{% endif %}
{% endfor %}
</div>
</div>
</div>
</main>
UPDATE
Ok I know what the problem is, but not how to solve it.
vendor:cow horn OR title:cow horn doesn't work
title:cow horn OR vendor:cow horn does.
Spaces are causing the additional prefixes to break where "OR" isn't properly working in my search results.
vendor:cow OR title:cow works
But the moment I put a space in the search then the title won't be searched.
I have a search bar, and I set it to search for an items tag, vendor & title.
Problem is this code prevents me from being able to use spaces in my search term, and if I append "*" I'm unable to use ampersands. Here's the code.
<form method="get" action="/search" id="search-home">
<button type="submit" value="search"></button>
<input type="hidden" name="type" value="product" />
<input type="hidden" name="q" class="searchtext" />
<input type="text" name="original" placeholder="Search"/>
</form>
<script>
$(document).on('submit','#search-home',function(){
var searchtext = $('input[name="original"]').val();
$('.searchtext').val("vendor:"+searchtext+" OR tag:"+searchtext+" OR title:"+searchtext);
});
</script>
If you need to see the search.liquid here it is.
<div id="impact-grid-header" class="collections-page">
<h1 id="regular-title">Search Results for: "{{ search.terms[1] | replace: 'vendor:', '' | replace: 'tag:', '' | replace: 'title:', '' | replace: '*', '' | strip | escape}}"</h1>
</div>
<div id="product-content" class="full-bleed">
<div class="content">
{% paginate search.results by 20 %}
<!-- Begin collection info -->
<div class="row">
<!-- End sort collection -->
<div class="column inventory-items">
{% include 'search-bar' %}
<div id="inventory" class="span12 content-grid">
<!-- Begin no products -->
{% if search.results.size == 0 %}
<div class="row">
<div class="span12 expanded-message">
<p>That's a great idea but unfortunately we don't have that item.<br/>Try again?</p>
</div>
</div>
{% endif %}
<div class="row products">
{% for item in search.results limit: settings.pagination_limit %}
{% if item.variants.first.inventory_quantity >= 0 %}
<div class="item product" data-tags="{% for tag in item.tags %}{{ tag | downcase }}, {% endfor %}">
<a href="{{ item.url }}">
<div class="product-pic">
<div class="inner-pic">
<img src="{{ item.featured_image | product_img_url: 'large' }}" alt="{{ item.title | escape }}"/>
</div>
<!-- Box that appears upon hover -->
<div class="view-product bg-black">
<i class="icon-search"></i>
<span>View</span>
</div>
</div>
</a>
<div class="description">
<span class="product-name">{{ item.title }}</span>
<span class="brand">{{ item.vendor }}</span>
<span class="price">
{% if item.available %}
{% if item.compare_at_price_max > item.price %}
<del>{{ item.compare_at_price | money }}</del>
{% endif %}
{% if item.price_varies %}
<em>from</em>
{% endif %}
<span>{{ item.price | money }}</span>
{% else %}
<span>
{{ item.price | money }} Sold Out
</span>
{% endif %}
</span>
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>
{% endif %}
{% endfor %}
</div>
{% include 'pagination' %}
{% endpaginate %}
<!-- End no products -->
</div>
</div>
</div>
</div>
I am using Brooklyn Shopify theme in mobile the main featured image is in single slide and all the thumbs in one slide, butnow I want each thumb images as single slideshow images just like featured image.
You can do this using some CSS tricks and duplicating fetching of images.
In Product.liquid file duplicate the code images fetched as you said you are using Brooklyn theme I will help you with the same.
Find for this code
<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<div class="product-single__photos">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% comment %}
Display current variant image, or default first
{% endcomment %}
<div class="feature_image top_feature_image">
<div class="product-single__photo-wrapper">
<img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: 'grande' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
</div>
</div>
{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
<div class="thumb_images">
{% for image in product.images | limit:4 %}
<div class="product-single__photo-wrapper">
<img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</div>
{% endfor %}
</div>
</div>
</div>
then Replace with
<div class="grid product-single">
<div class="grid__item large--seven-twelfths medium--seven-twelfths text-center">
<div class="product-single__photos">
{% assign featured_image = current_variant.featured_image | default: product.featured_image %}
{% comment %}
Display current variant image, or default first
{% endcomment %}
<div class="feature_image top_feature_image">
<div class="product-single__photo-wrapper">
<img class="product-single__photo" id="ProductPhotoImg" src="{{ featured_image | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ featured_image | img_url: 'grande' }}"{% endif %} alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}">
</div>
</div>
{% comment %}
Display rest of product images, not repeating the featured one
{% endcomment %}
{% for image in product.images | limit:3 %}
<div class="product-single__photo-wrapper desk">
<img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</div>
{% endfor %}
<div class="thumb_images">
{% for image in product.images | limit:4 %}
<div class="product-single__photo-wrapper">
<img class="product-single__photo" src="{{ image.src | img_url: 'grande' }}" {% if settings.product_zoom_enable %}data-mfp-src="{{ image.src | img_url: '1024x1024' }}"{% endif %} alt="{{ image.alt | escape }}" data-image-id="{{ image.id }}">
</div>
{% endfor %}
</div>
</div>
</div>
Now open theme.scss.liquid file and for desktop add this
.desk {
display: none;
}
.desk is the custom class taken by me
and in mobile style ie 767px add this.
.product-single__photo-wrapper.desk {
display: block;
}
.thumb_images {
display: none !important;
}
.slick-dots > li:last-child, .slick-dots > li:nth-last-child(2) {
display: none;
}
This will solve your requirement.