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

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.

CLICK HERE FOR LIVE DEMO

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!

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.

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