If this tutorial is not what you were looking for, you still have any questions, suggestions or concerns - feel free to let us know. Please help us to serve you better!

Your Name

Your Email

Your Message (required)

captcha

Shopify. How to manage slider options (speed, effect, autoplay)

Shopify. How to manage slider options (speed, effect, autoplay)

This tutorial shows how to manage slider options in Shopify template.

Shopify. How to manage slider options (speed, effect, autoplay)-1

  1. Our Shopify templates include NivoSlider which options are set in code. You may check page source in order to locate script that initializes slider. Right-click and select "View page code":

    Shopify. How to manage slider options (speed, effect, autoplay)-2

  2. Search for the appropriate code using slider keyword. You should press CTRL+F in order to open search field. Here is how the code looks:

    Shopify. How to manage slider options (speed, effect, autoplay)-3

  3. Now we should change slider configuration values in template files. Open admin section and go to themes section. Edit files:

    Shopify. How to manage slider options (speed, effect, autoplay)-4

  4. In our case code is defined in snippet-js-footer.liquid file. Locate appropriate part of code. There you can change slider options:

    Shopify. How to manage slider options (speed, effect, autoplay)-5

  5. There we can change animation speed, pause time and other options. We may also change animation effect. Here is the list of effects. You can select one of them:

    • sliceDown
    • sliceDownLeft
    • sliceUp
    • sliceUpLeft
    • sliceUpDown
    • sliceUpDownLeft
    • fold
    • fade
    • random
    • slideInRight
    • slideInLeft
    • boxRandom
    • boxRain
    • boxRainReverse
    • boxRainGrow
    • boxRainGrowReverse
  6. We have changed effect, animation speed and pause time:

    Shopify. How to manage slider options (speed, effect, autoplay)-6

  7. By default, slider comes with autoplay feature. You may disable this feature by adding the following option:

    manualAdvance: true,

    Shopify. How to manage slider options (speed, effect, autoplay)-7

  8. Save changes and check your site.

Feel free to check the detailed video tutorial below:

Shopify. How to manage slider options (speed, effect, autoplay)