Read more
Shopify slider design using slick slider width responsive
Shopify Defoult Theme: Dawn
Follow me
Click & color and download file and add your Assets folder
Go to this file
Layout > theme.liquid
Add this code in </head> tag above
{{ 'section-main-product.css' | asset_url | stylesheet_tag }}
{{ 'section-featured-product.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'bootstrap.min.css' | asset_url | stylesheet_tag }}
add this code in </body> tag above
<script src="{{ 'product-form.js' | asset_url }}" defer="defer"></script>
<script src="{{ 'bootstrap.bundle.min.js' | asset_url }}"></script>
<script src="{{ 'popper.min.js' | asset_url }}"></script>
<script src="{{ 'bootstrap.min.js' | asset_url }}"></script>
Create File
Sections > jushar-slider-1.liquid
Add this code
{{ 'slick.css' | asset_url | stylesheet_tag }}
{{ 'jushar-slider-1.css' | asset_url | stylesheet_tag }}
<script src="{{ 'slick.min.js' | asset_url }}" defer="defer"></script>
<div class="page-width">
<div class="jushar_slider_1 position-relative row">
<div class="col-md-4">
<div class="jushar_slider_left">
<div class="jushar_slider_1_title">
{{ section.settings.jushar_slider_title }}
</div>
<div class="jushar_slider_dots">
</div>
<div class="jushar_bottom_c">
{{ section.settings.custom_liquid }}
</div>
</div>
</div>
<div class="col-md-4">
<div class="position-absolute">
<div class="slick_jushar_slider_1">
{% for block in section.blocks %}
{% assign product = block.settings.product %}
<div class="slick_jushar_count{{ forloop.index }}">
<div class="product_img">
{% if product.selected_or_first_available_variant.featured_media != null %}
{% assign media = product.selected_or_first_available_variant.featured_media %}
<img
srcset="
{% if media.preview_image.width >= 493 %}{{ media.preview_image | image_url: width: 493 }} 493w,{% endif %}
{% if media.preview_image.width >= 600 %}{{ media.preview_image | image_url: width: 600 }} 600w,{% endif %}
{% if media.preview_image.width >= 713 %}{{ media.preview_image | image_url: width: 713 }} 713w,{% endif %}
{% if media.preview_image.width >= 823 %}{{ media.preview_image | image_url: width: 823 }} 823w,{% endif %}
{% if media.preview_image.width >= 990 %}{{ media.preview_image | image_url: width: 990 }} 990w,{% endif %}
{% if media.preview_image.width >= 1100 %}{{ media.preview_image | image_url: width: 1100 }} 1100w,{% endif %}
{% if media.preview_image.width >= 1206 %}{{ media.preview_image | image_url: width: 1206 }} 1206w,{% endif %}
{% if media.preview_image.width >= 1346 %}{{ media.preview_image | image_url: width: 1346 }} 1346w,{% endif %}
{% if media.preview_image.width >= 1426 %}{{ media.preview_image | image_url: width: 1426 }} 1426w,{% endif %}
{% if media.preview_image.width >= 1646 %}{{ media.preview_image | image_url: width: 1646 }} 1646w,{% endif %}
{% if media.preview_image.width >= 1946 %}{{ media.preview_image | image_url: width: 1946 }} 1946w,{% endif %}
{{ media.preview_image | image_url }} {{ media.preview_image.width }}w"
src="{{ media | image_url: width: 1946 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | times: media_width | round }}px, (min-width: 990px) calc({{ media_width | times: 100 }}vw - 10rem), (min-width: 750px) calc((100vw - 11.5rem) / 2), calc(100vw - 4rem)"
width="973"
height="{{ 973 | divided_by: media.preview_image.aspect_ratio | ceil }}"
alt="{{ media.preview_image.alt | escape }}"
>
{% endif %}
</div>
<div class="product_info hi_{{ section.id }}-{{ forloop.index }}">
<button class="more more5" id="{{ section.id }}-{{ forloop.index }}"></button>
<div class="tag-product {{ block.settings.product }} {{ section.id }}-{{ forloop.index }}">
<div class="fix-block-w">
{%- assign product = block.settings.product -%}
<a{% if product == blank %} role="link" aria-disabled="true"{% else %} href="{{ product.url }}"{% endif %} class="link product__view-details animate-arrow">
<h2 class="product__title" {{ block.shopify_attributes }}>
{%- if product.title != blank -%}
{{ product.title | escape }}
{%- else -%}
{{ 'onboarding.product_title' | t }}
{%- endif -%}
</h2>
</a>
<div class="no-js-hidden" id="price-{{ section.id }}" role="status" {{ block.shopify_attributes }}>
{%- render 'price', product: product, use_variant: true, show_badges: true, price_class: 'price--large' -%}
</div>
{%- if product != blank -%}
<div {{ block.shopify_attributes }}>
<form action="/cart/add" method="post" enctype="multipart/form-data" id="add-to-cart-{{ product.handle }}-{{ collection.handle }}-{{ section.id }}">
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}">
{{ form | payment_terms }}
</form>
</div>
{%- endif -%}
<noscript class="product-form__noscript-wrapper-{{ section.id }}">
<div class="product-form__input{% if product.has_only_default_variant %} hidden{% endif %}">
<label class="form__label" for="Variants-{{ section.id }}">{{ 'products.product.product_variants' | t }}</label>
<div class="select">
<select name="id" id="Variants-{{ section.id }}" class="select__select" form="{{ product_form_id }}">
{%- for variant in product.variants -%}
<option
{% if variant == product.selected_or_first_available_variant %}selected="selected"{% endif %}
{% if variant.available == false %}disabled{% endif %}
value="{{ variant.id }}"
>
{{ variant.title }}
{%- if variant.available == false %} - {{ 'products.product.sold_out' | t }}{% endif %}
- {{ variant.price | money | strip_html }}
</option>
{%- endfor -%}
</select>
{% render 'icon-caret' %}
</div>
</div>
</noscript>
<div class="product-form__input product-form__quantity{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} product-form__quantity-top{% endif %}" {{ block.shopify_attributes }}>
<label class="form__label" for="Quantity-{{ section.id }}">
{{ 'products.product.quantity.label' | t }}
</label>
<quantity-input class="quantity">
<button class="quantity__button no-js-hidden" name="minus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.decrease' | t: product: product.title | escape }}</span>
{% render 'icon-minus' %}
</button>
<input class="quantity__input"
type="number"
name="quantity"
id="Quantity-{{ section.id }}"
min="1"
value="1"
form="{{ product_form_id }}"
>
<button class="quantity__button no-js-hidden" name="plus" type="button">
<span class="visually-hidden">{{ 'products.product.quantity.increase' | t: product: product.title | escape }}</span>
{% render 'icon-plus' %}
</button>
</quantity-input>
</div>
<div {{ block.shopify_attributes }}>
{%- if product != blank -%}
<product-form class="product-form">
<div class="product-form__error-message-wrapper" role="alert" hidden>
<svg aria-hidden="true" focusable="false" role="presentation" class="icon icon-error" viewBox="0 0 13 13">
<circle cx="6.5" cy="6.50049" r="5.5" stroke="white" stroke-width="2"/>
<circle cx="6.5" cy="6.5" r="5.5" fill="#EB001B" stroke="#EB001B" stroke-width="0.7"/>
<path d="M5.87413 3.52832L5.97439 7.57216H7.02713L7.12739 3.52832H5.87413ZM6.50076 9.66091C6.88091 9.66091 7.18169 9.37267 7.18169 9.00504C7.18169 8.63742 6.88091 8.34917 6.50076 8.34917C6.12061 8.34917 5.81982 8.63742 5.81982 9.00504C5.81982 9.37267 6.12061 9.66091 6.50076 9.66091Z" fill="white"/>
<path d="M5.87413 3.17832H5.51535L5.52424 3.537L5.6245 7.58083L5.63296 7.92216H5.97439H7.02713H7.36856L7.37702 7.58083L7.47728 3.537L7.48617 3.17832H7.12739H5.87413ZM6.50076 10.0109C7.06121 10.0109 7.5317 9.57872 7.5317 9.00504C7.5317 8.43137 7.06121 7.99918 6.50076 7.99918C5.94031 7.99918 5.46982 8.43137 5.46982 9.00504C5.46982 9.57872 5.94031 10.0109 6.50076 10.0109Z" fill="white" stroke="#EB001B" stroke-width="0.7">
</svg>
<span class="product-form__error-message"></span>
</div>
{%- form 'product', product, id: product_form_id, class: 'form', novalidate: 'novalidate', data-type: 'add-to-cart-form' -%}
<input type="hidden" name="id" value="{{ product.selected_or_first_available_variant.id }}" disabled>
<div class="product-form__buttons">
<button
type="submit"
name="add"
data-add-to-cart
class="js-go-cart-add-to-cart button button--full-width {% if block.settings.show_dynamic_checkout and product.selling_plan_groups == empty %}button--secondary{% else %}button--primary{% endif %}"
{%- if product.selected_or_first_available_variant.available == false -%}disabled="disabled"{%- endif -%}
>
<span>
{%- if product.selected_or_first_available_variant.available -%}
{{ 'products.product.add_to_cart' | t }}
{%- else -%}
{{ 'products.product.sold_out' | t }}
{%- endif -%}
</span>
<div class="loading-overlay__spinner hidden">
<svg aria-hidden="true" focusable="false" role="presentation" class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
<circle class="path" fill="none" stroke-width="6" cx="33" cy="33" r="30"></circle>
</svg>
</div>
</button>
{{ form | payment_button }}
</div>
{%- endform -%}
</product-form>
{%- else -%}
<div class="product-form">
<div class="product-form__buttons form">
<button
type="submit"
name="add"
class="product-form__submit button button--full-width button--primary"
disabled
>
{{ 'products.product.sold_out' | t }}
</button>
</div>
</div>
{%- endif -%}
</div>
<a{% if product == blank %} role="link" aria-disabled="true"{% else %} href="{{ product.url }}"{% endif %} class="link product__view-details animate-arrow">
{{ 'products.product.view_full_details' | t }}
{% render 'icon-arrow' %}
</a>
</div>
</div>
</div>
<script>
$( document ).ready(function(){
$('#{{ section.id }}-{{ forloop.index }}').click(function(){
$('.hi_{{ section.id }}-{{ forloop.index }} .tag-product').toggleClass("active");
});
});
</script>
</div>
{% endfor %}
</div>
</div>
</div>
<div class="col-md-4">
<div class="slick_jushar_slider_title">
{% for block in section.blocks %}
{% assign product = block.settings.product %}
<div>
<div class="product_title_{{ forloop.index }}">
{%- if product.title != blank -%}
{{ product.title | escape }}
{%- else -%}
{{ 'onboarding.product_title' | t }}
{%- endif -%}
</div>
{% if product.featured_media %}
{%- if product.media[1] != nil -%}
<img
srcset="{%- if product.media[1].width >= 165 -%}{{ product.media[1] | image_url: width: 165 }} 165w,{%- endif -%}
{%- if product.media[1].width >= 360 -%}{{ product.media[1] | image_url: width: 360 }} 360w,{%- endif -%}
{%- if product.media[1].width >= 533 -%}{{ product.media[1] | image_url: width: 533 }} 533w,{%- endif -%}
{%- if product.media[1].width >= 720 -%}{{ product.media[1] | image_url: width: 720 }} 720w,{%- endif -%}
{%- if product.media[1].width >= 940 -%}{{ product.media[1] | image_url: width: 940 }} 940w,{%- endif -%}
{%- if product.media[1].width >= 1066 -%}{{ product.media[1] | image_url: width: 1066 }} 1066w,{%- endif -%}
{{ product.media[1] | image_url }} {{ media[1].width }}w"
src="{{ product.media[1] | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
alt="{{ product.media[1].alt | escape }}"
class="motion-reduce"
loading="lazy"
width="{{ product.media[1].width }}"
height="{{product.media[1].height }}"
>
{%- endif -%}
{%- endif -%}
</div>
{% endfor %}
</div>
</div>
</div>
</div>
<style>
{% for block in section.blocks %}
.jushar_slider_dots .slick-dots button#slick-slide-control0{{ forloop.index0 }}{background:{{ block.settings.dot_color }};}
.jushar_slider_dots .slick-dots li:nth-child({{ forloop.index }}).slick-active{border-color:{{ block.settings.dot_color }};}
.product_title_{{ forloop.index }}{color:{{ block.settings.dot_color }}; font-size:50px; font-weight: 600; }
.slick_jushar_slider_title .slick-track #slick-slide1{{ forloop.index0 }}.slick-active img{transform: rotate(90deg);transition: 1s;}
@media only screen and (max-width: 768px) {
.product_title_{{ forloop.index }}{font-size:36px;margin-top: 15px;}
}
@media only screen and (min-width: 768px) {
.product_title_{{ forloop.index }}{font-size: 30px;margin-top: 0;}
}
@media only screen and (min-width: 1220px) {
.product_title_{{ forloop.index }}{font-size:40px;}
}
{% endfor %}
</style>
<script>
$( document ).ready(function() {
$('.slick_jushar_slider_1').slick({
dots: true,
prevArrow: false,
nextArrow: false,
appendDots: $('.jushar_slider_dots'),
infinite: true,
swipe: false
});
});
$( document ).ready(function() {
$('.slick_jushar_slider_title').slick({
dots: true,
prevArrow: false,
nextArrow: false,
infinite: true,
swipe: false
});
$('.product_info').on('click', function() {
$(this).toggleClass('open-state');
});
});
$(document).on('click', '#slick-slide-control00', function() {
$("#slick-slide-control10").click();
});
$(document).on('click', '#slick-slide-control01', function() {
$("#slick-slide-control11").click();
});
$(document).on('click', '#slick-slide-control02', function() {
$("#slick-slide-control12").click();
});
</script>
{% schema %}
{
"name": "Jushar Slider 1",
"tag": "section",
"class": "section",
"max_blocks": 3,
"settings": [
{
"type": "text",
"id": "jushar_slider_title",
"default": "Double-Walled, Stainless Steel Design",
"label": "Add Jushar Slider Title"
},
{
"type": "liquid",
"id": "custom_liquid",
"label": "t:sections.custom-liquid.settings.custom_liquid.label",
"info": "t:sections.custom-liquid.settings.custom_liquid.info"
}
],
"blocks": [
{
"type": "column",
"name": "Jushar Slider",
"settings": [
{
"type": "product",
"id": "product",
"label": "Select Product"
},
{
"type": "color",
"id": "dot_color",
"label": "Select dot Color",
"default": "#ffffff"
}
]
}
],
"presets": [
{
"name": "Jushar Slider 1",
"blocks": [
{
"type": "column"
}
]
}
]
}
{% endschema %}
{% stylesheet %}
{% endstylesheet %}
{% javascript %}
{% endjavascript %}
Create File
Assets > jushar-slider-1.css
Add this code
.container_full_width{max-width:100%;width:100%;margin:0 auto;padding: 0 15px;}
.container_1440px{max-width:1440px;width:100%;margin:0 auto;padding: 0 15px;}
.container_1220px{max-width:1220px;width:100%;margin:0 auto;padding: 0 15px;}
.container_1600px{max-width:1600px;width:100%;margin:0 auto;padding: 0 15px;}
.jushar_slider_1{height:100vh;padding-top:160px;padding-bottom:100px;}
.jushar_slider_1_title{font-size:25px;width:300px;font-weight: 500;}
.jushar_slider_1 .position-absolute{width: 500px;height: 500px;top: 50%;left: 50%;transform: translate(-50%, -50%);border-radius: 50%;overflow: hidden;border: 4px solid #ffd5ba;}
.jushar_slider_1 .position-absolute .product_img{width: 500px;height: 500px;overflow: hidden;border-radius: 50%;border: 4px solid #ffd5ba;}
.jushar_slider_1 .slick-slide img{display: block;width: 500px;height: auto; margin: 0 auto;}
.jushar_slider_dots .slick-dots {list-style-type: none;}
.jushar_slider_dots .slick-dots li {margin: 10px 0;padding: 10px;border:1px solid transparent;border-radius: 50%;display:block;width: fit-content;}
.jushar_slider_dots .slick-dots button {display: block;width: 50px;height: 50px;padding: 0;border: none;border-radius: 100%;text-indent: -9999px;}
.slick_jushar_slider_title .slick-dots{display:none !important;}
.slick_jushar_slider_title .slick-track .slick-slide img{width: auto;transition: 1s;}
.slick_jushar_slider_1 .product_info{margin-top:-100px;}
.more:after, .more:before{transition: all 0.6s cubic-bezier(0.46, -0.41, 0.3, 1.52) 0.1s;}
.open-state .more:after, .open-state .more:before{transition: all 0.6s cubic-bezier(0.46, -0.41, 0.3, 1.52) 0.1s;}
.slick_jushar_slider_1 .product_info .more {position: relative;display: block;background: none;width: 100px;height: 100px;cursor: pointer;border: none;display:block !important;}
.slick_jushar_slider_1 .product_info .more:focus {outline: none;}
.slick_jushar_slider_1 .more {display: block;margin: 0 auto;position: relative;}
.slick_jushar_slider_1 .more:before, .slick_jushar_slider_1 .more:after {content: "";position: absolute;top: 50%;left: 50%;width: 90%;transform: translate(-50%, -50%);border-bottom: 10px solid white;}
.slick_jushar_slider_1 .more:before {transform: translate(-50%, -50%) rotate(90deg);}
.slick_jushar_slider_1 .open-state .more5:before, .slick_jushar_slider_1 .open-state .more5:after {width: 50%;margin-top: -5px;}
.slick_jushar_slider_1 .open-state .more5:before {transform: translate(0, 0) rotate(0);}
.slick_jushar_slider_1 .open-state .more5:after {left: 0;transform: translate(0, 0) rotate(-180deg);}
.product_info .tag-product{position: absolute;width: 500px;height: 400px;top: -100%;padding: 80px;transition: 0.8s;background: var(--gradient-background);opacity:0;visibility: hidden;}
.product_info .tag-product.active{opacity:1;visibility: unset;top: 0%;}
.fix-block-w{text-align: center;}
.fix-block-w quantity-input{margin:0 auto;}
.fix-block-w .quantity__input:focus-visible{outline: navajowhite;background: transparent;box-shadow: none;}
.fix-block-w .product__view-details{text-decoration: none;margin: 10px 0;}
.fix-block-w product-form .product-form__buttons{display: flex; justify-content: space-between;}
.fix-block-w product-form .product-form__buttons button, .fix-block-w product-form .product-form__buttons .shopify-payment-button{width: 150px;}
@media only screen and (max-width: 768px) {
.jushar_slider_1 .position-absolute, .jushar_slider_1 .position-absolute .product_img{width:300px;height:300px;}
.jushar_slider_1 .position-absolute{left: auto;right: 15px;transform: translate(-0%,-50%);}
.jushar_slider_1 .slick-slide img{width:300px;}
.jushar_slider_1_title{font-size: 24px;width: 100%}
.jushar_slider_dots{margin:45px 0}
.jushar_slider_dots .slick-dots button{width: 30px;height: 30px;}
.jushar_slider_dots .slick-dots li{padding:5px;}
.jushar_bottom_c .twoforehr{font-size: 60px;}
.slider_desc{font-size: 20px;font-weight: 500;width: 250px;margin: 0;}
.product_info .tag-product{padding: 40px 36px 0 36px;width:300px;height:250px;}
.slick_jushar_slider_title .slick-track .slick-slide img{width:175px;}
.fix-block-w .product__view-details{margin: 10px 0 0;}
.fix-block-w .product__view-details .product__title{margin-bottom: 5px;}
.slick_jushar_slider_1 .quantity{min-height:20px;}
.fix-block-w product-form .product-form__buttons button, .fix-block-w product-form .product-form__buttons .shopify-payment-button{min-width: 100px;min-height: 40px;font-size: 1.1rem;padding: 0;width: 100px;}
.slick_jushar_slider_1 .product-form__input{display:flex;}
.slick_jushar_slider_1 .product_info .more{width:50px;}
.slick_jushar_slider_1 .product_info{margin-top: -80px;}
.slick_jushar_slider_1 .more:before, .slick_jushar_slider_1 .more:after{border-bottom: 5px solid white;}
.slick_jushar_slider_title .slick-track .slick-slide img{display:none;}
}
@media only screen and (min-width: 768px) {
.jushar_slider_1 .position-absolute{right: auto;left: 50%;transform: translate(-50%,-50%);width: 350px;height:350px;}
.jushar_slider_1 .position-absolute .product_img{width: 350px;height:350px;}
.jushar_slider_1 .slick-slide img{width:350px;}
.slick_jushar_slider_title .slick-track .slick-slide img{width: 170px;}
.product_info .tag-product{width: 350px; height:300px; padding: 40px;}
.fix-block-w .product__view-details{margin: 10px 0 0;}
.fix-block-w .product__view-details .product__title{margin-bottom: 5px;}
.slick_jushar_slider_1 .quantity{min-height:20px;}
.fix-block-w product-form .product-form__buttons button, .fix-block-w product-form .product-form__buttons .shopify-payment-button{min-width: 100px;min-height: 40px;font-size: 1.1rem;padding: 0;width: 100px;}
.slick_jushar_slider_1 .product-form__input{display:flex;}
.slick_jushar_slider_1 .product_info .more{width:50px;}
.slick_jushar_slider_1 .product_info{margin-top: -80px;}
}
@media only screen and (min-width: 1220px) {
.jushar_slider_1 .position-absolute, .jushar_slider_1 .position-absolute .product_img{width:450px;height:450px;}
.jushar_slider_1 .position-absolute{left: 50%;top:50%;transform: translate(-50%, -50%);}
.jushar_slider_1 .slick-slide img{width:450px;}
.product_info .tag-product{width: 450px;padding:50px;height:385px;}
.fix-block-w product-form .product-form__buttons button, .fix-block-w product-form .product-form__buttons .shopify-payment-button{min-width: 100px;min-height: 40px;font-size: 1.1rem;padding: 0;width: 100px;}
.slick_jushar_slider_title .slick-track .slick-slide img{width: 220px;}
}
0 Reviews