How to use SlickGoTo show variant image on variant select

Technical Q&A
1

I’m building my own theme using Timber as the basis, and have set up slick slider for product pages. I want to set it up so that choosing a variant will automatically advance the slider to the associated variant image, but I’m not quite sure how to set that up.

This is how I have my slider set up (the first slider shows the current slide, while the second slider acts as thumbnail navigation for the first one):

<div class="product__images--slider">
        <div class="slider-for">
            {% for image in product.images %}
                <img src="{{ image.src | img_url: '800x800', crop: 'center' }}" alt="{{ image.alt | escape }}" data-variant-id>
            {% endfor %}
        </div>
        <div class="slider-nav">
            {% for image in product.images %}
                <img src="{{ image.src | img_url: '800x800', crop: 'center' }}" alt="{{ image.alt | escape }}" data-variant-id>
            {% endfor %}
        </div>
    </div>

My current slick js:

$('.slider-for').slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  arrows: true,
  fade: true,
  asNavFor: '.slider-nav',
  infinite: true,
  centerMode: true
});
$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  dots: false,
  arrows: false,
  centerMode: false,
  focusOnSelect: true,
  infinite: true
});
2

I’m running into a similar problem. Did you come to a conclusion on this?

3

Yes, I did! After hunting around online and experimenting I figured it out.

First, I set up the product so that I uploaded all the images, and then when I created variants, I chose each variant image from the images I had already uploaded. That tied them to those specific images.

Then I just had to set up my script so that I’d use the position of that variant featured image to control what is shown in the main slider.

To do that, I added the following Javascript to the end of my product.liquid file:

if (variant.featured_image) {
  var variantImagePos = variant.featured_image.position - 1;
  $('.slider').slick('slickGoTo', variantImagePos);
}

I have actually found that previewing the XHR requests for products added to carts is awesome since it lets me see all the available JSON for products. I should have already been doing that, but had just been relying on Shopify docs previously. Seeing all the JSON has made it a lot easier to pinpoint values I need to manipulate in the DOM!

You can see it in action on this site I built: https://www.theminimalistwardrobe.com/collections/garment-care/products/short-shoehorn?variant=31717345329287 (the one thing this example doesn’t show is thumbnail images below the main slider - and that’s only because there are only a total of two product images)

4

On the product page, I would like to know how to arrange arrows , thus so,“<” Main Image “>” , on each side of the product image, and have the arrows slide through the thumbnail images that are usually displayed below the main image. I certainly appreciate anyone’s feedback!

Thanks!

5

Sure! So this is a built-in feature of Slick slider. To set this up, start by including it in your Javascript in the slick object:

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  arrows: true,
  dots:false,
  fade: true,
  centerMode: false,
  focusOnSelect: true,
  infinite: true
});

The ‘arrows: true’ property is the one that enables arrows. If you want to customize the arrows, you can use additional object properties like the following:

$('.slider-nav').slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: '.slider-for',
  arrows: true,
  dots:false,
  fade: true,
  centerMode: false,
  focusOnSelect: true,
  infinite: true,
  prevArrow: '',
  nextArrow: ''
});

You’re essentially pointing each arrow to a node in the document. So you’ll want to be sure that you’re either just modifying the default buttons (as shown in the example), or creating new buttons in your markup and then pointing prevArrow and nextArrow to those.

There’s great documentation on this and much more on the Slick Slider Github page! https://kenwheeler.github.io/slick/

6

Please help for varient image selection

7

Hey man, it’s great that you figured the solution: I am trying to implement the same thing however I might be missing something even after following your steps. Your store is password protected, any chance I can see all of this is in live action ?

Thanks!

8

You need to add these

window._VARIANTS = {};
{% for variant in product.variants %}
window._VARIANTS[{{ variant.id }}] = {{ variant.inventory_quantity }}
{% endfor %}

before new Shopify.OptionSelectors

It works but is really slow, I’m still trying to make it work correctly