As I mentioned in Part 1, the integrated e-commerce functionality of mojoPortal is very straightforward and functional, and is terrific for sites with a small number of products. However, once you have added a few products and offers to your store, there is making your products presentable and interesting.
The default display can be spruced up a bit with the default CSS for headers;
It is human nature to be attracted to images; a simple listing like what you see above is informative, but not exactly eye-catching. Let us see how we can fix that, shall we?
We are going to open up the Store Manager, and navigate to Offer Administration; there, we will click on “Edit”, next to the offer we want to work on.
You will see in the image above, that the “Abstract” tab is highlighted; the contents of the “Abstract” are what is shown in the product listing, so this is where you can add some “punch” to your product listings. I have decided to add a small thumbnail to highlight the text already in place, using the HTML Content controls. Let us have a look at how that turns out in the Product List:
Ah, see – now your customers can see more information about your products, in a visually appealing way. You are only limited by your ability to use CSS and images as to how much information you present in the abstract, though I would recommend that “less is more”.
One thing to keep in mind is that for this layout, I have chosen the option under “Content Settings” of “Group by Offer”; that allows me to display my products as offers, which is helpful for presenting a wide selection of product types. If you only had one product, but multiple versions, “Display by Product” might be a better option.
The default for the mojoPortal Web Store is to display in an asp:repeater list; in a future article, we will visit the results of converting it to a DataList, to see how well we can leverage a “grid” presentation.