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

Feel free to check the detailed video tutorial below:

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

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":

   

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:

   

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

   

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

   

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:

   

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

   manualAdvance: true,

   

8. Save changes and check your site.

Website Speed Optimization Service

When it comes to website performance you need to do everything possible to make sure visitors can access the page as fast as possible. Website optimization is incredibly important. You shouldn’t ignore it, especially if you want to make your website popular. The reason is that website performance influences visitors’ behavior. It’s straightforward – a person uses a website if they can access the necessary information fast. If your website works slowly – people will find another website with the same content. Performance becomes even more important if you have an online store. People don’t want to wait – they want to access the necessary content fast. You need to guarantee it as a website designer.

Many website optimizations ways are available. However, optimization requires some time to be spent. You should check all the elements to see what impacts performance the most. Moreover, you need to know how to optimize content properly. You need to know how to make images load fast and how to make your code work faster. Optimization can require much time – it depends on your project. If you don’t want to deal with optimization, then you can get our website optimization service. Our team works with online stores and CMS – we work with WordPress, Joomla, Magento, WooCommerce, Prestashop, OpenCart.

The whole optimization process is quite simple:

• You ask us to optimize your website (be ready to provide us with the necessary information)
• We optimize your website
• You get a detailed report that shows how our optimization affects your website performance

That’s it. You can also ask us to revise your website one more time. That’s a great deal for those who don’t want to waste their time on optimization. Of course, optimization is essential, but your website still has to have useful content. Therefore, you can think of how you can improve your website when we optimize it.