August 18, 2014

Weebly Tricks #68 - Multi-Item Slider for Your Products

Posted by Domingo Tambasacan at 8/18/2014

Item Slider for Weebly

Everybody is talking about e-commerce out there so I guess it's time to post something for our products online. Most Weebly users are after the "store" rather than blogging. Still, it might be better to create a homepage for your featured products. This way, you can emphasize and highlight some of your best items to capture guest attentions rather than directly showing off a hundred list of yours.Multi item slider has a neat, simple and awesome sliding effects.








Importance of a Good Online Store Design
As seen on codrops by Carrie Cousins' article "Tips for a Clean and Minimal Online Store Design"

What better way to showcase your products than by giving them the stage?

This is the concept behind a growing trend in e-commerce web design – going minimal.

In the past many online stores took the opposite approach to design. Sites were often cluttered with information, fonts and colors were overwhelming, and sites were quite simply “over-designed”.

Now, many sites are ditching models, crazy colors and fonts, and fancy photography for the simplistic style of just showcasing their products. It’s a trend that is taking over much of the web (not just e-commerce) with the emergence of responsive design models. More designers are embracing the trend that simpler can be better, while focusing on readability and usability.

The result is a better experience for online shoppers, with cleaner interfaces, text that is easier to read and interfaces that are simpler, faster and more user-friendly. This trend is about more than just design, it creates a better overall experience.



TUTORIAL

The slider is composed of four categories that can contain up to four items each. By clicking the category, it uses CSS animation to show items. Best works on white background, however, it depends on the products themselves. This slider was tested on Chrome and Firefox and it works perfectly. This tutorial was made possible using the "10 Capsulated Tips that can Change the Way you edit your Weebly Site", well if you don't know those, better read them NOW.



FILES NEEDED
How to use these files? Click Here!


HEADER CODE
Where to place these codes? Click Here!

<link rel="stylesheet" href="http://mwtdatabase.weebly.com/files/theme/mulsli.css" type="text/css" />

Notes:
Red text - Change with your site address.



FOOTER CODE


Add the following to your page footer or site footer box. You can see this box by going to Pages > advance settings > footer code.

<script src="http://mwtdatabase.weebly.com/files/theme/modernizr.custom.63321.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://mwtdatabase.weebly.com/files/theme/mulsli.js"></script>
<script>
$(function() {

$( '#mi-slider' ).catslider();

});
</script>

Notes:
Red text - Change with your own site address.



BODY CODE
Where to place these codes? Click Here!

<div id="mi-slider" class="mi-slider">
    <ul>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misshoe1.jpg" alt="img01"><h4>Boots</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misshoe2.jpg" alt="img02"><h4>Oxfords</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misshoe3.jpg" alt="img03"><h4>Loafers</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misshoe4.jpg" alt="img04"><h4>Sneakers</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misacc1.jpg" alt="img05"><h4>Belts</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misacc2.jpg" alt="img06"><h4>Hats & Caps</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misacc3.jpg" alt="img07"><h4>Sunglasses</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misacc4.jpg" alt="img08"><h4>Scarves</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/miswat1.jpg" alt="img09"><h4>Casual</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/miswat2.jpg" alt="img10"><h4>Luxury</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/miswat3.jpg" alt="img11"><h4>Sport</h4></a></li>
    </ul>
    <ul>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misbag1.jpg" alt="img12"><h4>Carry-Ons</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misbag2.jpg" alt="img13"><h4>Duffel Bags</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misbag3.jpg" alt="img14"><h4>Laptop Bags</h4></a></li>
        <li><a href="#"><img src="http://mwtdatabase.weebly.com/files/theme/misbag4.jpg" alt="img15"><h4>Briefcases</h4></a></li>
    </ul>
    <nav>
        <a href="#">Shoes</a>
        <a href="#">Accessories</a>
        <a href="#">Watches</a>
        <a href="#">Bags</a>
    </nav>
</div>

Notes:
# - Change with the link for each item.
Green text - The image source you used.
Blue text - Short description for that particular photo.
Yellow text - These are your item categories.
Red text - Your item sub categories.



CONCLUSION

Most of the time, simple things turns out to be the best. If you show 50 items at a time, you're giving your visitor a hard time to decide and tendency is, they will choose nothing. So its better, atleast on your homepage, to show and highlight the best products that you've got.

Upgrade your knowledge to the next level by reading "10 Capsulated Tips that can Change the Way you edit your Weebly Site".

Get email updates and more access! (Free)
Email *
email marketing by activecampaign

About Author:

Hi I am Domz. I love inserting new widgets and effects on Weebly Template. I like helping people and I like them more being my subscriber. Follow me @ Twitter | Facebook



If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!

...

1 comment:

  1. This slotted in really easily. But I also used the 3D gallery and there's a theme conflict do you know how to easily resolve this?

    ReplyDelete

 

© 2014. All Rights Reserved | My Weebly Tricks | Template by Blogger Widgets

Home | | Privacy Policy | Top