Help with Flexslider and Variant Images

New Member
3 0 1

Have Flexslider set up to use as our image carousel on our Shopify store and runs well. Some of our products have an image attached to its variants, for example different color houseplant pots. When a user clicks on the variant we would like the active slide image to become the variant image that is saved in Shopify. However, we don't want these images shown in the slideshow thumbnails for users to click through, we only want them shown in the active slide image when that variant selection is chosen and then removed from the Flexslider all together when a different option is chosen.

Here is our markup for the Flexlsider within the product page:

<div class="flexslider">
 <ul class="slides">
  {% for image in product.images | offset: 1 %}
   {% unless image.attached_to_variant? %}
     <li data-thumb="{{ image.src | img_url: 'original' }}">
      <img src="{{ image.src | img_url: 'original' }}" alt="{{ product.title | escape }}" />
      {% if image.alt != blank and image.alt != product.title %}
        <p class="flex-caption">{{image.alt}}</p>
      {% endif %}
   {% endunless %}
  {% endfor %}


Any ideas on how we can make this happen?


Thank you for your question.

Please share your store URL, page URL and also password (if your store has one), I'll help you out to the best of my ability.

Kind regards,

◦ Problem Solved? ✔️ Please click on Accept as Solution and like.
◦ Using a free theme? Improve it with copy/paste code snippets clicking here.
◦ Looking to hire an experienced developer? Same day response:
New Member
3 0 1

Here is one of our products that has a variant image for two of it's variants:

11 0 2

same here, any solution ? thanks