On a local project with the business directory site Ecoparker, we experienced the struggle of displaying a long list of products in small display screens ie mobiles.
On this particular landing page, showcasing Solforest a vertical forest real estate project, we need to present 10 types of apartments in two categories with sizes and selling prices.
On another page, we have 6 categories, each category has more than 10 products. If we just display them all one by one on top of each other, like it will become too long.
It is not bad, but when there are too many, users would scroll and sometime later wouldn't know where they were.
Our solution is to group products into categories and displaying them on carousels, like this:
It is more mobile friendly. Users can use their thumbs to swipe left and right to find different products, and swipe down just a little bit to compare them with the below categories.
Now let's go on and explore how to make it with Slick in Drupal
1. Installation
You need to install:
- Slick: https://www.drupal.org/project/slick
- Slick Views: https://www.drupal.org/project/slick_views
The reason we choose Slick is because it is well maintained and powerful, many options can be configured via UI, which is easier for administrators.
2. Configure Slick UI
Now please go to Admin - Configuration - Media - Slick, add a new Slick optionset, I called it Grid-4.
We created two breakpoints for responsive display:
- Desktop screen (980px): show 4 items per row
- Mobile screen (768px): show 2 items per row
Settings pretty much the same for those two options, just different in the number of slide to show. You can do experiments with your own settings.
3. Create a view
Now create a new view as usual, for the Format, please choose Slick Carousel.
And click on Settings link beside, select the optionset for it.
4. The CSS stuffs
Ok we display products in carousel on mobiles. But what if users don't know there are more on the right? The trick is showing a half of the next product, so they know there still more to swipe.
We can do that just by adding a little piece of CSS code:
@media screen and (max-device-width: 480px) and (orientation: portrait) {
.slick-list {
padding:0 20% 0 0;
}
}
5. The results
Voila. Now enjoy the new display in desktops.
And in mobiles
Hope you enjoy it.