Want a image slider for products image

[Abtiw4474]

Can anyone help me to have a product image slider. My store theme is Dawn.

[KetanKumar]

@Abtiw4474 

can you please share store url?

[Abtiw4474]

alldesignera.com

[KetanKumar]

@Abtiw4474 

thanks for URL if you have able to code try this code 

https://codepen.io/Turqueso/pen/rNNzpwb

if not familiar to code don't change the theme default you have to ask the theme support team, Shopify Expert or me 

[Abtiw4474]

Where should i put this code??

[Abtiw4474]

@KetanKumar 

[KetanKumar]

@Abtiw4474 

its change product file css and js code all code changes on backend

[jamesMeegan]

How would you go about implementing something like this? Im familiar with coding html/css and js but i just don't understand how I would make it work for a shopify since they use the liquid templating language? 

[PosanaShop]

@made4Uo  I was just testing my website after adding both the product slider and the collection slider. I noticed that for one of my products, the image sizes are different. I only have 3 images, so there is no slider. This has made the other images to display on top of the main image. Attaching the screenshot. Could you please let me know how/where I can edit the code so that the image list placement adjusts per the largest image size?

[made4Uo]

Your image height is more than 100%. I will take a look if I can change the image observer to initialize

[made4Uo]

@PosanaShop 

Please update your code. Transform you Dawn Theme in Debut theme product page for free.

Enjoy this features:
Product slider working.
Zoom feature working.
Variant buttons connected to the large image and the product slider.
Resize your thumbnail images.
No more massive images in the product page.

Check the code here for free. No app needed. Preview the video

[Zeeq]

@made4Uo Is this code for Dawn only? Would it work for Narrative as well?

[made4Uo]

Hi @Zeeq 

Yes, only for Shopify 2.0 FREE themes like Dawn, Studio, Refresh etc. For Narrative, that would be a far different code. You can hire us to do the custom coding if you are interested

[Sajeel]

 @ KetanKumar I used your code but didn't work for me and also I didn't see any error in the console.

[KetanKumar]

@Sajeel 

yes please share store url

[KetanKumar]

@Sajeel 

something is wrong code please check again 

[Sajeel]

@KetanKumar here is the code

<!-- /templates/product.liquid -->

{%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}

<div itemscope itemtype="http://schema.org/Product" id="ProductSection--{{ section.id }}"

  data-section-id="{{ section.id }}"

  data-section-type="product-template"

  data-image-zoom-type="{{ section.settings.enable_image_zoom }}"

  data-enable-history-state="true"

  data-stacked-layout="{% if section.settings.media_layout == "stacked" %}true{% else %}false{% endif %}"

  {% if first_3d_model %}data-has-model="true"{% endif %}>

    <meta itemprop="url" content="{{ shop.url }}{{ product.url }}">

    <meta itemprop="image" content="{{ product.featured_media | img_url: 'grande' }}">

    {% assign current_variant = product.selected_or_first_available_variant %}

    {% assign featured_media = current_variant.featured_media | default: product.featured_media %}

    {% assign stacked = false %}

    {% if section.settings.media_layout == "stacked" %}{% assign stacked = true %}{% endif %}

    {%- assign first_media = true -%}

    <div class="grid product-single ">

      <div class="grid__item large--seven-twelfths medium--seven-twelfths text-center ">

        <div id="ProductMediaGroup-{{ section.id }}" class="product-single__media-group-wrapper  " data-product-single-media-group-wrapper>

          <div class="product-single__media-group{% unless stacked %} product-single__media-group--single-xr{% endunless %} slider-for" data-product-single-media-group>

            {%- assign enable_image_zoom = section.settings.enable_image_zoom -%}

            {% assign height = 850 %}

            {% assign width = 575 %}

            {%- assign first_3d_model = product.media | where: "media_type", "model" | first -%}

            {% comment %}

              Display product images

            {% endcomment %}

            {%- for media in product.media -%}

              {%- assign featured = false -%}

              {%- if media == featured_media -%}

                {%- assign featured = true -%}

              {%- endif -%}

              {%- capture thumbnail_alt -%}

                {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}

                  {{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}

                {%- elsif media.media_type == 'model' -%}

                  {{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}

                {%- else -%}

                  {{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}

                {%- endif -%}

              {%- endcapture -%}

              <div class="product-single__media-flex-wrapper" data-slick-media-label="{{ thumbnail_alt }}" data-product-single-media-flex-wrapper>

                <div class="product-single__media-flex ">

                  {%- include 'media' with media, enable_image_zoom: enable_image_zoom, stacked: stacked, featured: featured, width: width, height: height -%}

                  {% comment %}

                    Display a "View in your space" button (multi) for the first visible media and each individual model.

                    Stacked layout only.

                  {% endcomment %}

                  {% if stacked %}

                    {%- assign xr_id = false -%}

                    {%- if first_media and first_3d_model -%}

                      {%- assign xr_id = first_3d_model.id -%}

                    {%- elsif media.media_type == 'model' -%}

                      {%- assign xr_id = media.id -%}

                    {%- endif -%}

                    {%- if xr_id -%}

                      {%- include 'xr-button' with model_id: xr_id, multi: true -%}

                    {%- endif -%}

                    {%- assign first_media = false -%}

                  {% endif %}

                </div>

              </div>

            {%- endfor -%}

          </div>

          {% comment %}

            Display a "View in your space" button (single).

            Stacked/Thumbnails layout (mobile)

            Thumbnail layout only (desktop)

          {% endcomment %}

          {%- if first_3d_model -%}

           {%- include 'xr-button' with model_id: first_3d_model.id, multi: false -%}

          {%- endif -%}

          {% unless stacked %}

            <ul class="product-single__thumbnails small--hide grid-uniform slider-nav" data-product-thumbnails>

              {% for media in product.media %}

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

                  <li data-thumbnail-size="{{ thumbnail_alt }}" class="grid__item medium--one-third large--one-quarter product-single__media-wrapper">

                    {%- capture thumbnail_alt -%}

                      {%- if media.media_type == 'video' or media.media_type == 'external_video' -%}

                        {{ 'products.product.video_thumbnail_alt' | t: imageAlt: media.alt | escape }}

                      {%- elsif media.media_type == 'model' -%}

                        {{ 'products.product.model_thumbnail_alt' | t: imageAlt: media.alt | escape }}

                      {%- else -%}

                        {{ 'products.product.gallery_thumbnail_alt' | t: imageAlt: media.alt | escape }}

                      {%- endif -%}

                    {%- endcapture -%}

                    <a href="{{ media | img_url: 'grande' }}" class="product-single__thumbnail{% if media == featured_media %} active-thumb{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}" data-product-thumbnail>

                      <img class="product-single__thumb" src="{{ media | img_url: '150x' }}" alt="{{ thumbnail_alt }}">

                      {%- if media.media_type == 'video' or media.media_type == 'external_video' or media.media_type == 'model' -%}

                        <div class="product-single__thumbnail-badge">

                          {% include 'svg-definitions' with media.media_type %}

                        </div>

                      {%- endif -%}

                    </a>

                  </li>

                {% endif %}

              {% endfor %}

            </ul>

          {% endunless %}

          <div class="slick__controls slick-slider">

            <button class="slick__arrow slick__arrow--previous" aria-label="{{ 'home_page.slideshow.previous_slide' | t }}" data-slick-previous>

              <span class="icon icon-slide-prev" aria-hidden="true"></span>

            </button>

            <button class="slick__arrow slick__arrow--next" aria-label="{{ 'home_page.slideshow.next_slide' | t }}" data-slick-next>

              <span class="icon icon-slide-next" aria-hidden="true"></span>

            </button>

            <div class="slick__dots-wrapper" data-slick-dots>

            </div>

          </div>

        </div>

      </div>

      <div class="grid__item product-single__meta--wrapper medium--five-twelfths large--five-twelfths">

        <div class="product-single__meta">

          {% if section.settings.product_vendor_enable %}

            <h2 class="product-single__vendor" itemprop="brand">{{ product.vendor }}</h2>

          {% endif %}

         {% comment %} <h1 class="product-single__title" itemprop="name">{{ product.title }}</h1> {%endcomment%}

         {% assign current_variant = product.selected_or_first_available_variant %}

<span class="variant-barcode product-single__title hero__title">{{ current_variant.barcode }}</span>

          <div itemprop="offers" itemscope itemtype="http://schema.org/Offer">

            {% comment %}

              Optionally show the 'compare at' or original price of the product.

            {% endcomment %}

            {% include 'product-price', variant: current_variant %}

            {%- if cart.taxes_included or shop.shipping_policy.body != blank -%}

              <div class="product-single__policies rte">

                {%- if cart.taxes_included -%}

                  {{ 'products.general.include_taxes' | t }}

                {%- endif -%}

                {%- if shop.shipping_policy.body != blank -%}

                  {{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}

                {%- endif -%}

              </div>

            {%- endif -%}

            <hr class="hr--small">

            <meta itemprop="priceCurrency" content="{{ cart.currency.iso_code }}">

            <link itemprop="availability" href="http://schema.org/{% if product.available %}InStock{% else %}OutOfStock{% endif %}">

            {% capture "form_classes" %}

              product-single__form{% if product.has_only_default_variant %} product-single__form--no-variants{% endif %}

            {%- endcapture %}

            {% capture "form_id" %}AddToCartForm--{{ section.id }}{%- endcapture %}

            {% form 'product', product, class:form_classes, id:form_id, data-product-form: '' %}

              {{ form | payment_terms }}

              {% unless product.has_only_default_variant %}

                {% for option in product.options_with_values %}

                  <div class="radio-wrapper js product-form__item">

                    <label class="single-option-radio__label"

                      for="ProductSelect-option-{{ forloop.index0 }}">

                      {{ option.name | escape }}

                    </label>

                    {% if section.settings.product_selector == 'radio' %}

                      <fieldset class="single-option-radio"

                        id="ProductSelect-option-{{ forloop.index0 }}">

                        {% assign option_index = forloop.index %}

                        {% for value in option.values %}

                          {% assign variant_label_state = true %}

                          {% if product.options.size == 1 %}

                            {% unless product.variants[forloop.index0].available  %}

                              {% assign variant_label_state = false %}

                            {% endunless %}

                          {% endif %}

                          <input type="radio"

                            {% if option.selected_value == value %} checked="checked"{% endif %}

                            {% unless variant_label_state %} disabled="disabled"{% endunless %}

                            value="{{ value | escape }}"

                            data-index="option{{ option_index }}"

                            name="option{{ option.position }}"

                            class="single-option-selector__radio{% unless variant_label_state %} disabled{% endunless %}"

                            id="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}">

                          <label for="ProductSelect-option-{{ option.name | handleize }}-{{ value | escape }}"{% unless variant_label_state %} class="disabled"{% endunless %}>{{ value | escape }}</label>

                        {% endfor %}

                      </fieldset>

                    {% else %}

                      <select class="single-option-selector__radio single-option-selector-{{ section.id }} product-form__input" id="SingleOptionSelector-{{ forloop.index0 }}" data-index="option{{ forloop.index }}">

                        {% for value in option.values %}

                          <option value="{{ value | escape }}"{% if option.selected_value == value %} selected="selected"{% endif %}>{{ value | escape }}</option>

                        {% endfor %}

                      </select>

                    {% endif %}

                  </div>

                {% endfor %}

              {% endunless %}

              <select name="id" id="ProductSelect--{{ section.id }}" class="product-single__variants no-js">

                {% for variant in product.variants %}

                  {% if variant.available %}

                    <option {% if variant == product.selected_or_first_available_variant %}

                      selected="selected" {% endif %}

                      data-sku="{{ variant.sku }}"

                      value="{{ variant.id }}">

                      {{ variant.title }} - {{ variant.price | money_with_currency }}

                    </option>

                  {% else %}

                    <option disabled="disabled">

                      {{ variant.title }} - {{ 'products.product.sold_out' | t }}

                    </option>

                  {% endif %}

                {% endfor %}

              </select>

              {% if section.settings.quantity_enabled %}

              <div class="product-single__quantity">

                <label for="Quantity" class="product-single__quantity-label js-quantity-selector">{{ 'products.product.quantity' | t }}</label>

                <input type="number" hidden="hidden" id="Quantity" name="quantity" value="1" min="1" class="js-quantity-selector">

              </div>

              {% endif %}

              <div class="product-single__add-to-cart{% if section.settings.add_to_cart_button_size == 'large' %} product-single__add-to-cart--full-width{% endif %}">

                <button type="submit" name="add" id="AddToCart--{{ section.id }}" class="btn btn--add-to-cart{% if section.settings.enable_payment_button and product.selling_plan_groups == empty %} btn--secondary-accent{% endif %}"{% unless current_variant.available %} disabled="disabled"{% endunless %}>

                  <span class="btn__text">

                    {% if current_variant.available %}

                      {{ 'products.product.add_to_cart' | t }}

                    {% else %}

                      {{ 'products.product.sold_out' | t }}

                    {% endif %}

                  </span>

                </button>

                {% if section.settings.enable_payment_button %}

                  {{ form | payment_button }}

                {% endif %}

              </div>

            {% endform %}

          </div>

          <div class="product-single__description rte" itemprop="description">

            {{ product.description }}

          </div>

          {% if section.settings.social_sharing_products %}

            {% include 'social-sharing', share_title: product.title, share_permalink: product.url, share_image: product.featured_media %}

          {% endif %}

        </div>

      </div>

    </div>

</div>

{% unless product == empty %}

  <script type="application/json" id="ProductJson-{{ section.id }}">

    {{ product | json }}

  </script>

  <script type="application/json" id="ModelJson-{{ section.id }}">

    {{ product.media | where: 'media_type', 'model' | json }}

  </script>

{% endunless %}

[Sajeel]

@KetanKumar yes maybe there is a mistake in pasting the code but the console is not showing any error

[Denishamakwana]

welcome to shopify community.

please share your store URL and if your store is password protected then please share your password also.

Thank you .

[j1419]

@Abtiw4474 This has been a question I've seen so many others in the community ask since the Dawn theme has launched. So far this has been the closest solution I've seen. Hope this is able to help point you in the right direction

This guide was provided by user @shadowsfall118

I have achieved adding a slider to the product page images by using the slick slider.

Notes:

• This requires adding code and not editing any of the existing.
• The click to enlarge still works from the existing code.
• Works on mobile

There is 4 files to edit:

1. main-product.liquid
2. section-main-product.css
3. header.liquid
4. footer.liquid  

Step 1: For main-product.liquid add the following and comment / remove the "<slider-component class="slider-mobile-gutter">" start and end tags. Add the below code before the <slider-component class="slider-mobile-gutter"> tag we removed or commented out.

<section class="lazy slider" data-sizes="50vw">
{%- for media in product.media -%}
<div>

{%- unless media.id == product.selected_or_first_available_variant.featured_media.id -%}
<li class="product__media-item grid__item slider__slide{% if media.media_type != 'image' %} product__media-item--full{% endif %}{% if section.settings.hide_variants and variant_images contains media.src %} product__media-item--variant{% endif %}" data-media-id="{{ section.id }}-{{ media.id }}">
{% render 'product-thumbnail', media: media, position: forloop.index, loop: section.settings.enable_video_looping, modal_id: section.id, xr_button: true %}
</li>
{%- endunless -%}

</div>
{%- endfor -%}
</section>

Step 2: For section-main-product.css add the following to the bottom of the file

.slider {
width: 80%;
margin-left:auto;
margin-right:auto;
}

.slick-slide {
margin: 0px 20px;
}

.slick-slide img {
width: 100%;
}

.slick-prev:before,
.slick-next:before {
color: black;
}

.slick-slide {
transition: all ease-in-out .3s;
opacity: .2;
}

.slick-active {
opacity: .5;
}

.slick-current {
opacity: 1;
}

Step 3: For header.liquid add the following just after {%- endif -%} on line 9

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.css"/>

Step 4: For footer.liquid add the following to the end of the file

<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).on('ready', function() {

$(".lazy").slick({
lazyLoad: 'ondemand', // ondemand progressive anticipated
infinite: true
});
});
</script>

[made4Uo]

Hi, 

I just made a vertical carousel for the update theme version of Dawn theme. No app or external library needed. Check the video for more info

[MRamzan]

Hi I solved it following this video: https://www.youtube.com/watch?v=YQUhEsHV-hQ