How to Build Custom Carousel for Shopify Using Slick Slider

Shopify has become one of the top eCommerce Platforms to support running a business. As more enterprises use Shopify’s platform, the need for customization increases. You can use a default Shopify template, however, customizing a template will make your business stand out. And as expert Shopify developers, that’s exactly what we like to do. so let’s start how can you create Custom Carousel for Shopify Using Slick Slider

Having a slider for the product page is one of those customizable elements.

Recently, we used Shopify’s Dawn theme on a client project and heavily modified it, making it almost unrecognizable from the Dawn basic theme. Our team challenged itself to create a slider that would show the main product feature image (and main variant images) with a group of thumbnail images below it that also had the capability of sliding. Essentially two sliders would be needed with the ability to filter simultaneously to match the Shopify option variant choice that was clicked on.

This tutorial strips everything back to Dawn’s bare bones to show the solution to our challenge (see figure below), in addition to a product add with variants, options, and images. Please see this link if you don’t know how to add a product with variants and options.

LET’S START

Log in to your Shopify store.

Ensure that your Shopify store is backed up. You can either follow Shopify’s help document about backing up your store here or use one of the many available apps that creates a backup for you here.

Next, we need the Slick Carousel files and jQuery. Find the latest CDN for Slick found here as well as the latest stable release of jQuery CDN found here. (If you’re using Shopify’s CLI, Shopify’s ‘theme-check’ may yell at you for using a CDN — we’re using it for the sake of this tutorial. However, it is highly recommended to look into alternative methods of including Slick and jQuery—like packaging it up with npm).

Copy the Slick and jQuery CDN snippets.

On the left side menu, locate ‘Sales channels’ and select ‘Online Store’. A drop-down will appear, and ‘Themes’ should automatically be selected and highlighted; if not, click on ‘Themes’. The main browser window should reload with your Themes information on the right side.

Find and select the ellipsis (the ‘…’) next to the ‘Customize’ button. A drop-down menu will appear. Select ‘Edit code’.

This is where we will edit all code items going forward.

Locate the ‘Layout’ folder and select ‘theme.liquid’.

When ‘theme.liquid’ loads on the right side of your window scroll down to line 32.

Paste the two CDN snippets above line 32.

Above:

Press ‘Save’.

The above example does not include the Slick Theme CDN or Bootstrap CDN. For this tutorial, both CDNs were used. They’re both optional but could give you a head start in styling your carousel/slider.

SET UP PRODUCT TEMPLATE FILE

Back on the left side menu, located under the ‘Sections’ folder, find ‘main-product.liquid’ and open it. This is Dawn’s default product template for all products. We preemptively are adding our file and script paths and will create the corresponding files afterward.

SLICK & WEB COMPONENTS API

On line 60, change:

with:

{% render ‘filename’ %} is the liquid tag we will use to output dynamic content into our template. We deleted the ‘variant_images: variant_images’ because we do not need to pass any variables through our render tag.

JS

Go to line 30 and find the following:

Above it on line 29, add:

CSS

Finally, scroll up to line 13 to find:

Below it on line 14, add:

Save your file.

CREATING OUR FILES

Now we will leverage Dawn’s web components API alongside Slick carousel.

CREATE YOUR GALLERY FILE

WEB COMPONENTS & SLICK

Find the ‘Snippets’ folder. Select ‘Add a new snippet’. We’re going to create a file called ‘main-product-gallery.liquid’. Type in ‘main-product-gallery’ into the text box and hit ‘Done’. (We do not need ‘liquid’ as it will automatically be added.)

Paste this code into our newly created ‘main-product-gallery.liquid’ and hit Save.

The code we used above is our Web Components wrapper with the two Slick Sliders on the inside. The main slider is declared with the id=”slick” and our thumbnail slider with id=”slick-thumbnails”. We’re using Dawn’s product-thumbnail snippet to render our images.

CREATE YOUR JS FILE

Next, under the ‘Assets’ folder, we are going to ‘Add a new asset’ and ‘Create a blank file’. Under the dropdown ‘Extension’, select ‘js’. Add ‘main-product-gallery’ in the file name text box. Hit ‘Done’.

We’re going to wrap our js code with:

Paste the code between {}.

There are going to be three areas on which we’ll focus.

VARIABLES

Let’s start by declaring our variables and defining our first slider carousel for the larger single-feature image.

ADD MAIN SLIDER AND THUMBNAIL SLIDER

Now add in our Slick. This section is where both sliders will communicate with each other.

ON CLICK EVENT

In the end, add our click function.

This is setting up the click function. Save.

A FEW THINGS TO NOTE:

If you do not want your thumbnails to show the main image first when a user selects one of your variable options, find $mpThumbnails.slick(‘slickGoTo’, mpSlickThumbnailIndex) and add [+ 1] next to mpSlickThumbnailIndex.

Adding a ‘+ 1’ will tell the slide to skip over the main image.

An attempt was made to implement both sliders using both functions due to Slick’s “filter” and “unslick” usage settings. Initially, the filtering and unslick settings were successfully used. However, when the code was implemented alongside Shopify’s frameworks, too many complications popped up (like dealing with unavailable products or products being inputted differently for the same item). Trying to account for all these variables while grabbing a variant’s three options still meant many failed attempts. This was solved by implementing a web component element.

But if you wanted to tread further into the unknown and implement sliders with slick’s filtering settings and work with Shopify’s constraints, maybe this code, where I stopped, will help you on your journey:

CREATE YOUR CSS FILE

NEXT, LET’S ADD OUR CSS.

Add another blank file asset, except this time select ‘css’ as the extension. Enter ‘main-product-gallery’ and click ‘Done’. This is where some of the optional files can come into play.

Paste and save:

PRODUCT OPTIONS

MAIN-PRODUCT.LIQUID

In sections/main-product.liquid, search for variant-picker.

Between the {%- when ‘variant_picker’ -%} control flow block find:

We are going to wrap the liquid render tag in a div tag with a class attribute ‘main-product-buttons’. Save.

Now we need to open the file that the snippet is rendering. The product-variant-options.liquid file is located under the snippets folder. We will need to open this file.

EDIT OUR VARIANT OPTIONS

Find the first input tag on line 49. Wrapped in the input tag, find the name attribute.

Just above name="{{ option.name }}", we’re going to squeeze in our class attribute.

Add class="mp-radio" and save.

WEB COMPONENTS

Navigate to assets/global.js and select it to open.

Search for the VariantSelects

Our goal is to update our main slider and our thumbnail slider so we need to emit a few events.

In the VariantSelects class, we need to add:

There are two styles to the sliders. If you want the products to have a hard stop and not show the other variant image galleries when you slide, keep updateVariantThumbnails enabled.

If you wish to have sliders that keep scrolling, disable this script by commenting it out:

Scroll to the bottom of global.js. We’re going to declare our Web Components. Save.

ATTACH WEB COMPONENT EVENT TO IMAGES

Let’s set up snippets/product-thumbnail.liquid with the data attribute, data-thumbnail-option,  which we defined in the VariantSelects element in the assets/global.js file.

Search for “product__media media”. Three div tag results should appear (on lines 60, 72, and 96), and the class selectors should be highlighted.

Paste the code below inside these opening div tags after the class attributes:

Modify this string to suit your website’s needs.

CONNECTING SLICK, WEB COMPONENTS, AND DAWN TOGETHER

The backbone for the sliders on the backend is established. Now we must implement it for the frontend.

LAST STEPS:

Go back to Shopify’s admin page. On the left menu, select ‘Products’. Select an ‘Active’ product or ‘Add product’. If you need help or a refresher on how to create a product with options please visit here.

OPEN YOUR PRODUCT

In the ‘Media’ area there are a few required steps you must follow for the sliders to work:

• Drag the images that you want to be displayed together next to each other.
• Choose an option to have main order dominance. (The one with the most variable options in a group, ie. Color).
• Main variant images must come first followed by the images you want to be displayed in the thumbnail gallery.
• All images, including variant main images, need an alt tag.
• For every variant group (main image and corresponding thumbnails) the alt tags must be the same.

For example, for all the ‘Small’, ‘Medium’, and ‘Large’, ‘No Collar’ ‘Blue Shirt’ images to display together, image alt tags have been set to say ‘Blue No Collar’. It doesn’t matter what you write in the alt tag as long as it’s the same.

SETTING ALT TAGS

Click on one of the images. A new window should have popped up.

On the right side, click ‘Add alt text’.  Set alt text. Save. Repeat. ‘Add alt text’. Set alt text. Save. Repeat.

If you enjoyed this post, I’d be very grateful if you’d help it spread by emailing it to a friend or sharing it on Twitter or Facebook. Thank you! you might also enjoy these posts

Add Color Swatches on Shopify Dawn Theme

How to Deploy Shopify App on AWS Amplify