Solved

How to use SlickGoTo show variant image on variant select

hannahbeasley
Tourist
9 2 3

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
});
Accepted Solution (1)
hannahbeasley
Tourist
9 2 3

This is an accepted solution.

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=31717... (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)

View solution in original post

Replies 7 (7)

StealthyTurtle
Visitor
3 0 1

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

hannahbeasley
Tourist
9 2 3

This is an accepted solution.

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=31717... (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)

hmm
Tourist
3 0 1

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!

hannahbeasley
Tourist
9 2 3

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: '<button type="button" class="slick-prev">Previous</button>',
  nextArrow: '<button type="button" class="slick-next">Next</button>'
});

 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/

muhammedfayazp
Tourist
11 0 1

Please help for varient image selection

Neelansh
Visitor
1 0 0

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!

 

Lucerov
Visitor
3 0 0

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