Secomapp: Empowering your Shopify Success
Shopify TipsTutorials

How to change shopify theme slider.

19 March, 2015 No Comment

This article instructs you to change slider on the home page.
1. Hide/Show slider from theme admin
Some theme have slideshow at frontpage and provide setting to change slideshow. It this article i use React theme
To manage slideshow you goto Shopify Admin -> Themes (left menu) -> Customize theme (button) -> Home Page slider (tab). From there you can disable or enable slider
When you finish click on button Publish change on top right.
2. Customize flexslider from liquild
If theme admin don’t provide enough settings to control slider you can made change directly in liquid file.
To open liquild file goto Shopify Admin > Themes (left menu) > … (button) > Edit Html/CSS (drop down)
Search for a lliquild file which contains flexslider code like this one. In React theme it is in file shopify.js.liquild

$slider.flexslider({
        animation: '{{ settings.slider_home_transition }}',
        animationSpeed: 500,
        pauseOnHover: true,
        keyboard: false,
        slideshow: {{ settings.slider_home_auto }},
        slideshowSpeed: {{ settings.slider_home_rate }},
        smoothHeight: true
});

In above code some parameters is controlled from theme admin. some is not for example
animationSpeed: Set the speed of animations, in milliseconds
You can have more control over this slider by using more parameter from here https://github.com/woothemes/FlexSlider/wiki/FlexSlider-Properties
3. Using Banner Slider
If you don’t want to change in liquild file or read flexslider property you can use Banner Slider app. You can easily customise many things from admin and update to your homepage with just one click. You can also use many type of slider (40+ sliders templates).

Tags: