Tag Archives: banner slider

banner-slider

Using Carousel for Shopify Store: Common Mistakes and Tips

banner-slider

Using carousels or banner sliders are now popular in web design, however, are they really effective for Shopify Stores?

In fact, we can’t deny the reason for its popularity is that it delivers multiple messages to customers onto the main homepage without looking like you are ‘gaming’ the search engines or keyword stuffing…

Anything has pros and cons and if we don’t know how to optimize banner sliders, they contain severals unexpected drawbacks. In this post, we will help you to look into potential problems with carousels and suggest you solutions to these problems.

Slides move too quickly

Too fast speed of sliding can be a problem. Customers don’t have enough time to get information then your message fails. In worse situation, clients might feel annoyed because of seeing images moving around and around. They are just like bad advertisement. Moreover, too fast moving sliders distracts customers from other part of your page as well.

Tips: Be careful with the speed of carousels. Too fast or too slow are both not good.

Lack of Navigation

You see a beautiful product, which is on sale now but it slides to next image already. You want to see it again but you don’t know how. Wait? Yes, you can wait until it moves a circle and come back. How irritating it is! That is the problem of sliders, which lack navigation button or too small navigation button.

Tips: Ideal carousel is to give control to the users. That is, they can skip ahead, direct the flow, know where they are in the carousel, and turn off an auto-play function.

slide2Problem of CTA

The present of 3 or 4 messages right at the home page can confuse customers a lot. They even can’t get any information because of being overloaded. There is also, as Jakob Nielsen points out, the problem of banner blindness.

Tips: Put labels on images but shouldn’t be greedy of text. Labels are informative, meaningful and describe what users want. Labeling each slide incentivizes them to click because the labels tell them what they’ll get. Users are more likely to click on something that looks informative to them.

Check out Banner Sliders app!

How to change shopify theme slider.

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).