Do you have a store with multiple categories?
Are you using a template which shows the category list in the footer?
Would you like to have there a specific number of categories followed by a "View All" link?
Currently all the category links are displayed in the footer which can be a problem if you have many categories because the footer will be stretched out vertically. Here is an example:
Even if, there are many brands available, Bigcommerce offers the "View all brands" link after 10 brands. How would you feel, to have the same for your footer category list?
I created a code, using CSS, which allows you to show less categories (in this case 10 categories).
.footer .CategoryList ul li {
display: none;
}
.footer .CategoryList ul li:nth-child(-n+10) {
display: list-item;
}
This code, can be added to any style sheet you would like to use. In my example, I used custom.css, but you can go with styles.css or any color.css file.
Here is what the code does:
The nth-child(-n+10) counts the first 10 items, and applies a style to them, while all others, will be hidden.
If you have less brands available, and you need your categories to be aligned with your brands, change the 10 in nth-child(-n+10) to your needed number.
That code, as you can see, is not enough. We still need a "View all categories" link.
To apply that code go to Design->Edit HTML/CSS->search for FooterCategoryList.html panel and edit it. Over there, right under %%SNIPPET_SideCategoryList%% add this code:
<li style="margin-top:-20px;"><a href="add the path here">View all categories</a></li>
This code, will change the footer, like in the following screenshot:
There are two possible paths which you can use. There is a /sitemap/categories/ page which contains all categories from the store like below:
Here's the link code for the sitemap category page:
<li style="margin-top:-20px;"><a href="/sitemap/categories/">View all categories</a></li>
Or you can use a different page like in the next example:
<li style="margin-top:-20px;"><a href="/categories/">View all categories</a></li>
I hope you will find this article helpful in designing a better browsing experience for your customers. Thank you for the time spent on reading and following this article!