We recently completed an awesome eCommerce site for a great client over at Noosa & Co. Seriously go and check them out because they make some really cool beds right here on the Sunshine Coast. Anyways, we were really happy with Shopify’s ‘Narrative’ theme as it prefectly suited Noosa & Co’s image. The only problem was the slideshow – it needed to be manually clicked through and the buttons to change slides are pretty innocent:
Anyways to cut a long story short, in order to make the slideshow autplay you’ll need to follow these instructions:
- Click Online Store and then Themes.
- Next, click on the Actions drop-down.
- From the drop-down, select Edit Code (as shown here).
- Find the Assets folder and then open up the custom.js file.
- Once you open the custom.js file, you will just need to copy and paste the below code. Here is a quick screenshot to show you where to paste the code.
var sections = window.theme.sections;
var slideshowAutoExtension = {
init: function() {
this.on('slideshow_desktop_init_done', this._autoplaySlideshow.bind(this));
},
_autoplaySlideshow: setInterval(function() {
var $slide = $('.slideshow__slide--active')
.removeClass('slideshow__slide--active');
var $button = $('.slideshow__button--active')
.removeClass('slideshow__button--active');
var $slides = $('.slideshow__slide');
var currentIndex = ($slides.index($slide) + 1) % $slides.length;
$slides
.eq(currentIndex)
.addClass('slideshow__slide--active');
var $buttons = $('.slideshow__button')
.eq(currentIndex)
.addClass('slideshow__button--active');
}, 10000)
};
sections.extend('slideshow', slideshowAutoExtension);A Note For The Geeks
On the third last line of the above code, where it says “10000” in green, this is where you can change the speed of the slideshow. Javascript works in milliseconds and the current “10000” entry equals to 10 seconds. If you would like to change it to a speed of 5 seconds, for example, make sure to change the code to “5000” instead.
What a guy! Thank you soooo very much!
THANK YOU! I was struggling with the help forum from the Shopify community, your instructions worked perfectly!
it works!! thanks 🙂
Hi, thanks for tipp.
Could you help me with the Narrative Theme also?
The video doesnt play on mobile devices.
i can also pay for it if necessary.
Kind regards
peter
Sorry Peter we are booked out for the next 6 months
it does work!thx!from japan
i would like to change images more slowly and add zooming-up of the image　effects.
do you have any ideas or codes?
Thank you!
Sorry Kazuki I cant help more but that is quite complicated!
OMG THANK YOU!!!!! IT WORKS!
Hi there,
Shopify support didn’t know it.
Thank you so much!!