Mobile-Specific Tips for Ecommerce Collection Pages
Video: Mobile-Specific Tips for Ecommerce Collection Pages
Hi, there. I’m Lauren. I’m a conversion specialist at Command C, and today we are talking about collection pages and specifically what you need to think about when it comes to mobile devices.
You’re going to learn:
- The biggest differences between mobile and desktop
- What mobile visitors are expecting
- And you’re going to see some examples of these different features on mobile
Mobile vs. Desktop
When it comes to mobile and desktop, you often see different ways visitors are interacting with the site. On mobile, it’s more common that visitors are looking to achieve a goal when they’re shopping. On desktop, people often feel more open to spending time browsing. This often has to do with the different screen sizes. This isn’t always the case, but this is something to consider. Filtering is really important for both devices, but usability is going to be key on mobile. And we’ll show some examples in just a minute.
You also need to consider pagination. When you’re showing items on the collection page, do you want to have different pages? Do you want to have a load-more button? Do you want to have an endless scroll? You need to consider this per device type. And also the impact on loading times. Baymard suggests on mobile to load only 15 to 30 products and to load them all at once. This is something you could test out on your site. Also, consider the amount of information to display on mobile versus desktop. Desktop, you have a lot more real estate, you can show more information. Is all of that information going to be necessary on mobile?
Filtering on Mobile
Here for Article, we’re taking a look at their filters. The filter button, very clear up here at the top. It is very easy to see. You’re likely not going to miss it. And you have this side view here that appears, very easy to see, how many filters you’ve selected, how many items should display, and you can quickly open and close the different filter options. And then you can click done to go back or clear to remove all of the filters. Once you close the filters, this filter button then displays the number of filters that were selected to make it clear that you’re looking at a filtered view.
For Patagonia, they use a sticky filter button. You can see that down here. You click that, and they have a full view of the filters. They’re all collapsed. You scroll through and pick your different filters, and then click close filter and you’ll get the results. And they display the selected filters in two areas. Up at the top of the category page so you can clear the different filter options or just clear one of them. And in the sticky filter button, like with Article, it shows the number of filters that you have selected. When it comes to the amount of copy to display on mobile, it’s going to be a bit harder fitting copy onto the page, but often it’s going to be really important for visitors who are trying to compare items.
Additional Information on Mobile
Here for Tom Bihn, you can see they have this really cool feature details and minimal. Right now, we’re looking at the detailed view so you can see the copy and some additional information. And if you click this minimal, then it removes the copy and it removes some other items. It allows visitors to choose how they want to see the site.
Reducing Friction
For Allbirds, on the collection page, if visitors already kind of have an idea of what they want, they don’t need to go to the product page, they can use this quick add button. Clicking the plus opens up the available sizes, and clicking one of the sizes adds that item right to the cart, making it super easy to shop. Another important feature are variation images. Here for Allbirds, they have four different colorways for this shoe. And clicking each of these options allows visitors to see the different colors without having to go to the product page. This really reduces friction on mobile. Same here with Burrow. It’s not as clear as these selectors here on Allbirds, but they do have this colors button. You click it, and it’ll display the different color options. You can click those, and it’ll display the selection in that color.
Alternative Images
When it comes to mobile category pages, this definitely isn’t all you need to think about. These are just a few examples of some interesting features that other websites are doing that you could test out on your site and things to consider, like helping people be able to compare items on the category page without needing to jump back and forth between product pages, especially for things like seeing available sizes, seeing the amount of copy, the description, different colors.
These are things you should definitely test out on your site. I will see you in the next video. Thanks.
If you’re interested in additional mobile-specific tips, take a look at our other content:
Mobile Commerce Conversion Optimization: 6 Tips for More Sales on Mobile
9 Ways to Reduce Friction on Mobile Ecommerce Sites
Video: How to Design Mobile Headers to Better Guide Customers