Changing Slideshow effect from Sliding to Fading

Store Design
1

Searched for days everywhere for a way to change the slideshow effect from a carousel sliding type to a simple FADE. Found this post below from 2011 but it refers to a file called shop.js which I don’t have. Ideally I would like a simple mod to code and not a new app solution.

https://ecommerce.shopify.com/c/ecommerce-design/t/changing-slider-from-rotating-to-fade-55878

My site is www.overtheboardwalk.com

Any help would be appreciated

2

Hi Laurent,

You will need to edit your code. 1 line, no biggie. BUT FIRST, make a copy of your theme just in case.

Now fire up admin and navigate over to your Online Store > Themes > from the Actions drop down pick Edit code then in the assets tree, open up Assets / theme.js

Look for this bit of code

theme.Slideshow = function(el) {
  this.cache = {
    $slider: $(el),
    sliderArgs: {
      animation: 'slide',

See that animation: ‘slide’ there? Change that to

animation: 'fade',

And you’re set :wink:

Hope this helps!

2 Likes
3

Speaking of which, for all the options of FlexSlider, check here if you wish to customize other bits and bobs.

4

Incredible!!! Cant believe it was not much more work than that. Found it in the theme.js.liquid file in the Supply theme.

I’ll go through the attached documentation to find a way to tweek slide time from the current approx 5 seconds, to about 10 seconds.

Thanks a millions!!!

5

Once again Shopify support: FAIL

1 Like
6

Hi,

Knowing that it is an old post, but I would like to know how to update the slideshow from slide to fading in / out in current version. Thanks.

3 Likes
7

So would I, using the Dawn theme, which doesn’t seem to have the files mentioned above.

3 Likes
8

Hi! I’m using the Studio theme and I want to change the slideshow animation to fade as well. I don’t see theme.js in my options…how should I do this? Thank you.

2 Likes
9

Hi. I am trying to change my banner image and slideshow image so that they fade in. I have tried looking for the code line you have stated above but this doesn’t seem to be there. I am using the Dawn theme. Could you help me with this as I am struggling to find answers anywhere. Thanks

1 Like
10

Looks like some .js files have changed over time, the one you cite is not longer in the theme. Any chance someone knows where to look in the free Studio 2.0 theme as of 2022-2023?

1 Like