On-line shops with plenty of products need to be organised in to related categories so that visitors can locate the products quickly – every big on-line retailer does it and it’s proven to work very well.
However, when your on-line shop only sells a couple of products, and many do, using categories is pointless. You either end up with two categories, with one product in each, or one category with both products in it. Either way, you’re making the visitor perform one more click than they need to to arrive at the required product. Furthermore, how silly would a shop look with only one category.
When your shop only sells a small number of products sometimes you’re better off not using categories – they’re more hassle than they’re worth.
Ecwid is a low cost ecommerce solution that many of our clients are using and have found to be reliable, easy to set up and maintain and very usable by clients on the web site. We did, however, come across a small problem today, but one which was easily solved with a bit of thought.
The shop in question only sells two products, so categories were to be avoided. When viewed in Google Chrome, product A was listed first, followed by product B. However, on every other browser we tried, product B was listed first, followed by product A.
As it happens, the two products are progressive – customers should purchase product A first and use it, only purchasing product B if the former did not provide the desired result. The shop looked a bit daft listing product B first in this case.
Ecwid won’t allow you to sort products when categories aren’t being used, so how to solve the problem? Fortunately Ecwid is pretty configurable and here is how we sorted our two products…
- Create a single category.
- Place both products in the category.
- Drag the items into the order that you want them to appear in on the web page.
- We don’t want visitors to have to open a single category to view the products therein. So we automatically open it for them when the web page containing the Ecwid shop appears. This is done by modifying slightly the code that Ecwid gives you to embed the shop on your web page. We add the defaultCategoryId attribute to the following script line.
- <script type=”text/javascript”> xProductBrowser(“categoriesPerRow=3″,”views=grid(3,3) list(10) table(20)”,”categoryView=list”,”searchView=list”,”style=”,“defaultCategoryId=1385535″); </script>
- By default Ecwid displays a number of useful pieces of information around the categories and products on the embedded shop. These include a category title, a sort by drop down box to enable the client to change the sort order of the products and category breadcrumbs to enable the visitor to navigate out of the current category and into another. Clearly each of these features are superfluous as our products are all in the same category. So, how to disable them?
- If we haven’t already done so we need to create a custom CSS stylesheet in Ecwid. To do this:
- Select System Settings > Design > CSS themes > New CSS theme.
- Name the theme.
- Make the Status of this stylesheet Active.
- To remove the category title, sort by drop down box and category breadcrumbs from the products pages we add the following CSS rules to our custom CSS stylesheet.
- div.ecwid-productBrowser-head {display: none;}
- div.ecwid-results-topPanel-sortByPanel {display:none !important;}
- div.ecwid-productBrowser-categoryPath {display:none;}
And that’s it – job sorted.
What we’ve effectively done is automatically placed the visitor to the shop inside the only category with no means of getting out of it and with no category title to give them a hint that they’re in a category.
Tweet
