Use slider for all product images on a product page (without thumbnails)

madebyfolk
Shopify Partner
10 0 1

Hey all–

Been searching for something specific and cannot find it here. I am wanting to use a slider (currently using flexslider) for all product images on a product page. Client does not want thumbnails but rather a slider to cycle through fullsize product images on each product page. Can't seem to break out of the Shopify style of displaying all thumbs for images on a product page. Is this possible?

0 Likes
spicydesign
Shopify Expert
313 0 6

Assuming that the flexslider markup looks something like this

<div class="flexslider">
  <ul class="slides">
    <li>
      <img src="slide1.jpg" />
    </li>
    <li>
      <img src="slide2.jpg" />
    </li>
    <li>
      <img src="slide3.jpg" />
    </li>
    <li>
      <img src="slide4.jpg" />
    </li>
  </ul>
</div>

Then your liquid code should be

<div class="flexslider">
  <ul class="slides">
    	{% for image in product.images %}
	   <li>
	        {{ image | product_img_url: 'original' | img_tag }}
	   </li>
	{% endfor %}
  </ul>
</div>

This will return the images with the original size, if you want different size then replace (original) with any of the options here http://wiki.shopify.com/Product_img_url#Image_sizes

Cheers

Alex

www.spicydesign.ca  http://experts.shopify.com/spicydesign
0 Likes
madebyfolk
Shopify Partner
10 0 1

Thx Alex. Much appreciated.

0 Likes
ACP1
New Member
1 0 0

Where do you enter this code?

0 Likes