Want a image slider for products image

Abtiw4474
Tourist
7 0 5

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

KetanKumar
Shopify Partner
23424 2356 8629

@Abtiw4474 

can you please share store url?

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Denishamakwana
Explorer
89 13 13

welcome to shopify community.

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

Thank you .

0 Likes
Abtiw4474
Tourist
7 0 5

alldesignera.com

 

KetanKumar
Shopify Partner
23424 2356 8629

@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 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
Abtiw4474
Tourist
7 0 5

Where should i put this code??

 

0 Likes
KetanKumar
Shopify Partner
23424 2356 8629

@Abtiw4474 

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

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
j1419
Excursionist
22 0 6

@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 @

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>
0 Likes
made4Uo
Trailblazer
279 10 64

Hi @Abtiw4474 ,

If you want just a slider, this is already built in the Dawn Theme. No need to add any javascript code. You just need to customize the CSS to show it. If you are asking for a variant slider for the product page, see this link https://made4uo.com/blogs/journey-to-awesome-shopify-website/product-slider-for-dawn-theme and video below

 

If you are asking for a featured collection slider for your home page. Check this link https://made4uo.com/blogs/journey-to-awesome-shopify-website/collection-slider-for-dawn-theme-shopif... and video below

 

Let me know if you have questions. (",)

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.