Customizable Slick Carousel for Collections for Free

Customizable Slick Carousel for Collections for Free

Carousels are good to showcase the products. A lot of developers discourage using carousel due to main reason that customers miss out the product since it is too small, and it keep sliding.

What if we create a carousel that zooms in and pause when hover?

Create a responsive carousel for your product collections. This is a plug and play code. No coding experience needed. No app nor subscription needed


1. Go to Admin Shopify store > Themes > Actions > Edit Code
2. In Section folder, create a new section, name it "custom-carousel", then paste the code below.

{% comment %}
When customizing theme, changes need to be SAVE before you will see the updated setting.
{% endcomment %}

{% if section.settings.title != blank %}
<div class="section-header text-center">
<h3>{{ section.settings.title | escape }}</h3>
</div>
{% endif %}

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>

<div class="carousel-page">
{%- assign collection = collections[section.settings.collection] -%}
{%- assign product_limit = section.settings.products_count -%}

<button type="button" class="carousel-navi carousel-navi-left"> </button>
<div class="carousel-root" {%- if section.settings.bg_color != false -%} style="background: none" {%- endif -%}>
{% for product in collection.products limit: product_limit %}
<div class="carousel-track">
<a href="{{ product.url | within: collection }}">
<div class="reveal">
<img class="img-explore" src="{{ product.featured_image | img_url: 'master'}}">
<img class=" hidden" src ="{{ product.images.last |img_url: '450x450'}}" /*hover the last image of the product*/
alt="{{ product.images.last.alt | escape }}"/>
</div>
<span class = "details-text product-title text-center"> {{ product.title }}</span>
<span class = "details-text product-price text-center"> {{ product.price | money }}</span>
</a>
</div>
{% endfor %}
</div>
<button type="button" class="carousel-navi carousel-navi-right"> </button>
</div>


<style>
html {
font-size: 62.5%;
height: 100vh;
}
.carousel-page {
position: relative;
width: 100%;
height: 50%;
display: flex;
overflow: auto;
justify-content: center;
}
/* carousel container */
.carousel-root {
position: relative;
width: 90%;
background: linear-gradient(to right bottom, {{section.settings.bg_linear1}}, {{section.settings.bg_linear2}});
background-size: cover;
border-radius: 1rem;
box-sizing: content-box;
padding: .5rem;
}

/* image */
.hidden {
visibility: visible;
background-color: rgb(228, 241, 254); /* image background color when hover*/
opacity: 0;
object-fit: contain;
margin: 20% auto;
transform: scale(1.5, 1.5);
}

.reveal { position: relative;
height: 100%;
display: flex;
justify-content: space-between;
overflow: hidden;
}

.reveal .hidden {
position: absolute;
top:0;
transform-origin: center;
z-index: 100;
}

.reveal:hover .hidden {
opacity: 1;
}

.reveal:hover .img-explore {
top: 0
margin: 0 auto;
opacity: 0;
}

/* product details */
.details-text {
display: block;
color: {{section.settings.text_details}};
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}

.details-text:lastchild {
margin-bottom: .5rem;
padding: 0;
}

.product-title {
font-size: 2rem;
}

.product-price {
font-size: 1.5rem;
}

/* carousel navigation */
.carousel-navi {
cursor: pointer;
z-index: 100;
background:{{section.settings.navi_color}};
border: none;
border-radius: 1.5rem;
transition: all .3s;
margin: 0 .5rem;
padding: 30px;
align-self: center;
}

.carousel-navi:hover {
filter: brightness(0.85); /* brightness when hover*/
}

.carousel-navi:active {
filter: brightness(0.6);
transform: translateY(.4rem); /* brightness when got clicked*/
}

.carousel-navi-left {
clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
}

.carousel-navi-right {
clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
}


@media (max-width: 110em){
.carousel-root {
width: 85%;
}

@media (max-width: 65em){
.carousel-root {
width: 75%;
}
}

@media (max-width: 48em){
.carousel-root {
width: 69%;
}
.carousel-navi {
padding: 20px;
}
}
</style>

<script>
$(".carousel-root").slick({
infinite: true,
autoplay: {{ section.settings.autoplay }},
autoplaySpeed: {{ section.settings.autorotate_speed | times: 1000 }},
slidesToShow: {{section.settings.product_count}},
slidesToScroll: 1,
speed: 1500,
dots: false,
arrows: true,
prevArrow: $(".carousel-navi-left"),
nextArrow: $(".carousel-navi-right"),
responsive: [
{
breakpoint: 1020,
settings: {
slidesToShow: 3,
infinite: true, }
},
{
breakpoint: 600,
settings: {
slidesToShow: 2, }
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,}
}]
});
</script>

{% schema %}
{
"name": "Collection Slider",
"settings": [
{
"type": "text",
"id": "title",
"label": {
"en": "Heading"
},
"default": {
"en": "Featured collection"
}
},
{
"type": "collection",
"id": "collection",
"label": "Collection"
},
{
"type": "range",
"id": "product_count",
"min": 2,
"max": 10,
"label": "Number of products to display",
"default": 4
},
{
"type": "checkbox",
"id": "bg_color",
"label": {
"en": "Background color NONE"
},
"default": false
},
{
"type": "color",
"id": "bg_linear1",
"label": "Background color first linear gradient",
"default": "#DAF4F1"
},
{
"type": "color",
"id": "bg_linear2",
"label": "Background color second linear gradient",
"default": "#11999E"
},
{
"type": "color",
"id": "text_details",
"label": "Text details color",
"default": "#FFFFFF"
},
{
"type": "color",
"id": "navi_color",
"label": "Navigation color",
"default": "#56D4C5"
},
{
"type": "checkbox",
"id": "autoplay",
"label": {
"en": "Autoplay slides"
},
"default": true
},
{
"type": "range",
"id": "autorotate_speed",
"label": {
"en": "Change slides every"
},
"max": 9,
"min": 1,
"step": 1,
"unit": {
"en": " s"
},
"default": 3
}
],

"presets": [
{
"category": "Collection",
"name": "Collection Slider",
"settings": {
"product_count": 4
}
}
]
}

{% endschema %}

3. Click SAVE.
4. Done. All you need to customize the theme

Note: Since we are using outside script or source code, theme must be SAVE before you see changes when customizing theme.

Code is also available for testimonials or reviews. To see the code, click here.

Featured collection slider for Dawn Theme Shopify 2.0

Add a collection slider for your home page. This only works with Dawn Theme.

Adjust Main and Thumbnail Product Images in the Product Page for Dawn Theme

Dawn Theme issues with large images? Solve that using this video tutorial

Product Slider for Dawn Theme - No apps or subscript- Just a little bit of code

Add a product slider for Dawn theme, almost like Debut theme slider. No app or subscription neede...

Tab Component Section - Pure CSS

Add a tab component as a section which means, you can add it to any pages in Shopify 2.0, like pr...

Add WhatsApp to Shopify for Free - No App or Subscription

Add WhatsApp to your Shopify website without app or subscription. Personalize the icon with your ...

Product / Card Automatic Swipeable Carousel / Slider for Most of Shopify Theme

Add a carousel / slider for your product or card without an app or external library. This work in...

Awesome slideshow for most of Shopify Themes - Work well with Dawn

Awesome slideshow with 11 unique designs to choose from. No app or subscription needed. No coding...

Adding a Gallery Section for Shopify Website

Add your images as a gallery using grid. This should work in most of the shopify theme.

Leave a comment