Image Slider for Products

Highlighted
New Member
2 0 0

I have many photos for each product that I sell, and would like to better organize these images by having an image slider, so that you can just click an arrow and go the the next image. I have the New Standard theme and currently have an image slider on the homepage, but I would need to add this function to each of my products. Is this possible?

Many thanks in advance.

Gina

0 Likes
Highlighted
Shopify Staff
Shopify Staff
108 0 19

Hey Gina! 

I found a similar forum thread here and tested it in a version of New Standard that I have installed in my own shop and it worked out quite nicely. 

What I did was replace the following code on the product.liquid template...

 <div id="product-photos" class="grid-item col-6 small--col-12">
        {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

        {% if product.images.size == 0 %}
          <div id="product-photo-container">
            <img src="{{ '' | img_url: 'grande' }}" alt="">
          </div><!-- #product-photo-container -->
        {% else %}
          <div id="product-photo-container">
            {% if product.images.size == 1 %}
              <a href="{{ featured_image | img_url: '1024x1024' }}" rel="gallery">
                <img src="{{ product.featured_image.src | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}" id="productPhotoImg">
              </a>
            {% else %}
              <img src="{{ featured_image | img_url: 'grande' }}" alt="{{ featured_image.alt | escape }}" data-image-id="{{ featured_image.id }}" id="productPhotoImg">
            {% endif %}
          </div>

          {% if product.images.size > 1 %}
            <ul id="product-photo-thumbs" class="clearfix">
              {% for image in product.images %}
                <li class="product-photo-thumb">
                  <a class="gallery" href="{{ image.src | img_url: 'original' }}" data-image-id="{{ image.id }}">
                    <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">
                  </a>
                </li>
              {% endfor %}
            </ul>
            <ul id="lightbox" class="hidden">
              {% for image in product.images %}
                <li>
                  <a href="{{ image.src | img_url: '1024x1024' }}" rel="gallery" data-image-id="{{ image.id }}"></a>
                </li>
              {% endfor %}
            </ul>
          {% endif %}
        {% endif %}
      </div>

 

with this...

   <div id="product-photos" class="grid-item col-6 small--col-12">
 
        <div class="flexslider">
  <ul class="slides">
    	{% for image in product.images %}
	   <li>
	        {{ image | product_img_url: 'original' | img_tag }}
	   </li>
	{% endfor %}
  </ul>
</div>
        
      </div>

Give it a shot! 

Keep in mind that if you are weary making large code changes you can duplicate your theme first so you have a backup. Better safe than sorry. :) 

Cheers,
Bob O.

0 Likes
Highlighted
New Member
2 0 0

This worked perfectly! Thank you so much!

0 Likes
Highlighted
New Member
1 0 0

Hello!

 

I've just tried this, on a duplicate, and had no luck, any more ideas?

0 Likes
Highlighted
Tourist
4 0 2

me too want my images in slider.. i am using minimal them and my product page images in thumbnail which is looking very odd.. kindly guide me or help me.. 

Thanks

2 Likes
Highlighted
Excursionist
67 0 13

On Minimal here also, and would love to have the code to do this.

4 Likes
Highlighted
Tourist
14 0 1

Hi Gina,

Try to install this app: https://apps.shopify.com/product-images-gallery-slider

You can change the presentation of product images with it by choosing among slider, gallery or carousel.

There is a 7-day free trial. The developer is very helpful and responsive if you have any issues.

Best,

Mka

0 Likes
Highlighted
New Member
5 0 0

Is there any way to do this with the Supply Theme? Thanks!

0 Likes
Highlighted
New Member
2 0 2

can this be done with narrative theme??

2 Likes
Highlighted
New Member
1 0 1

1. Place the following code right above the </head> tag in Theme.liquid

<link rel="stylesheet" href="flexslider.css" type="text/css">
  <script src="jquery.flexslider.js"></script>
  
  <script type="text/javascript" charset="utf-8">
  $(window).load(function() {
    $('.flexslider').flexslider();
  });
</script>

2. In Product-Templete.liquid, replace this ...

<div class="product-photo-container" id="productPhotoContainer-{{ section.id }}">

         {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}

          {% for image in product.images %}

            {% capture img_wrapper_id %}productPhotoWrapper-{{ section.id }}-{{ image.id }}{% endcapture %}

            {% capture img_id %}productPhotoImg-{{ section.id }}-{{ image.id }}{% endcapture %}

 

            <div class="lazyload__image-wrapper no-js product__image-wrapper{% unless image == featured_image %} hide{% endunless %}" id="{{ img_wrapper_id }}" style="padding-top:{{ 1 | divided_by: image.aspect_ratio | times: 100}}%;" data-image-id="{{ image.id }}">

              {%- assign img_url = image | img_url: '1x1' | replace: '_1x1.', '_{width}x.' -%}

                <img id="{{ img_id }}"

                  {% if forloop.first == true %}

                  src="{{ featured_image | img_url: '300x300' }}"

                  {% endif %}

                  class="lazyload no-js lazypreload"

                  data-src="{{ img_url }}"

                  data-widths="[180, 360, 540, 720, 900, 1080, 1296, 1512, 1728, 2048]"

                  data-aspectratio="{{ image.aspect_ratio }}"

                  data-sizes="auto"

                  alt="{{ image.alt | escape }}"

                  {% if section.settings.product_image_zoom_enable %} data-zoom="{{ image | img_url: '1024x1024', scale: 2 }}"{% endif %}>

            </div>

            {% if forloop.first == true %}

              <noscript>

                <img src="{{ image | img_url: '580x' }}"

                  srcset="{{ image | img_url: '580x' }} 1x, {{ image | img_url: '580x', scale: 2 }} 2x"

                  alt="{{ image.alt }}" style="opacity:1;">

              </noscript>

            {% endif %}

          {% endfor %}

        </div>

 

        {% if product.images.size > 1 %}

          <ul class="product-photo-thumbs grid-uniform" id="productThumbs-{{ section.id }}">

 

            {% for image in product.images %}

              <li class="grid-item medium-down--one-quarter large--one-quarter">

                <a href="{{ image.src | img_url: '1024x1024', scale: 2 }}" class="product-photo-thumb product-photo-thumb-{{ section.id }}" data-image-id="{{ image.id }}">

                  <img src="{{ image.src | img_url: 'compact' }}" alt="{{ image.alt | escape }}">

                </a>

              </li>

            {% endfor %}

 

          </ul>

        {% endif %}

 

      </div>

 

 

 

 

with this..

 

 

 

 

<div id="product-photo-container" id="productPhotoContainer-{{ section.id }}">
 
          <div class="flexslider">
            <ul class="slides">
                  {% for image in product.images %}
                 <li>
                   <center>{{ image | product_img_url: 'original' | img_tag }}</center>
                 </li>
              {% endfor %}
            </ul>
          </div>
        </div>

1 Like