Responsive Design for the Sitefinity Ecommerce Module

The styles from this blog post are created and tested for version 6.2 of Sitefinity.

It's not a secret that responsive design can boost the sales on your ecommerce site a lot. Since Sitefinity already offers an ecommerce module, in this blog post I'm going to demonstrate to you how to make a Sitefinity ecommerce site responsive. As in the previous one, the styles that you'll find in this post are an addition to the Basic front-end theme of Sitefinity. You can add them on your template/page by a css widget or by directly placing the responsive design css file in the Global folder of your theme. You will notice that the stylesheet is divided into sections, and each section covers the styles for a particular ecommerce widget.

I'm going to skip the basic form and body styles, which we already discussed in the previous responsive design blog posts. The first widget we start with is the Product list widget. Notice that we set the font-size in percent among the whole stylsheet. This allows us to easily change the default font-size, which will automatically affect all other font-size declarations. Here are the style for  the products list widget:


As you see, we simply set the width to 100% and height of the list items to auto (as well as height for the product thumbnails).

Result:


The styles of the details view are similar. We practically adjust paddings and margins for mobile devices. We also set 32% width of the product thumbnails, so that 3 of them would fit on one row. The cool blue buttons from the previous blog post are included here, as well. Here's how to get their look:


As in the previous blog post, we reset the default input styles and apply our own ones. We transfer the hover styles to active, so that you will get the nice "button feeling" by clicking on a button (this makes the background color of the button darker):


Since in the details of each product you can attach files, that are related to the product (like contracts, specifications etc.) we use the good old text-overflow:ellipsis trick to make sure that the titles of those files won't get too long:


Result:


The next css applies to the Shopping cart summary widget, which has 3 different modes (all covered in the stylesheet). The important part here is that we set max-width and max-height to the thumbnails of the products in the shopping cart table, so that they don't exceed the width of their cell.

We set the position of .sfcartSummaryDetailsWrp to static to override its previous absolute position. This is the div that wraps the shopping cart summary table. By doing this, we make sure that when the shopping cart summary expands, the product table will fit in the device screen. We then set width to two of the columns in percent. The third column will take up the remaining space.

Result:


The next control we style is the Checkout widget that consists of several views, representing each step of the buying process.

The top breadcrumb is actually a RadtabStrip, where its list items have a float:left declaration. What we add is width:100% and clear both, which pushes each of the list items on a new row and expands to the width of the device screen.


We also set the text-align to left. You will notice again that all width declarations are in percent, so that they will fit different devices. There isn't anything special in the next several steps of the checkout widget. We reset a few floats to float:none, so that the wrapping divs would fall under each other. Also, when we aren't sure how long the width of a div should be, and we can't set it to 100% (because of some padding, for example, which will increase the width) we can simply set it to auto. This way the div will be exactly as wide as the screen of the device.

Result:


You will notice that most of the widgets contain a table in some of their views. The table comes from the RadGrid control and to style it we do several things. First of all, we decide which columns of the table should be visible. When a column should be hidden we set the following css to it:


The good thing is that each column (td and th) has a unique class set to it, that we can use to define its width or to set display:none and hide the column. The second operation over the radEditor table is to decide how wide each of the visible columns should be. This is done with simple calculations and depends on what you want to emphasize. For example, in my stylesheet I've chosen 10% width for the thumbnail column (wherever it is visible). The title column on the other hand is at least 40-50%, because I imagine that the title of a product could be pretty long. If you, for example, have 3 visible columns, it is enough to set width in percent to two of them and the third one will use the remaining space. This happens because the radGrid table element already has width set to 100%.

Example with the Wish list widget:


Now let's discuss the interesting parts of the remaining widgets. Practically, the Wish list widget is very similar to the Checkout summary widget, because it consists of a table again and several links. The currencies widget requires one declaration only. We just set its width and font-size. The Orders list widget contains several divs, placed next to each other. What we do is remove the float (set it to float: none), which makes the divs fall under each other. We also add a few borders to separate the orders:


Result:


The Departments widget has identical html structure as our old RadControl based Sitefinity navigation. In the stylesheet I've included css for the horizontal and the horizontal with dropdown modes (RadTabStrip and RadMenu). Both modes are transformed into vertical navigation links. The horizontal with dropdowns mode is a little more complicated, than the horizontal, so I'll start with it. We set the font-size to 100% (which in my stylesheet defaults to 14px). Then we set a few properties with an !important tag, because we override inline styles with them:


We do this, because we want all levels of the horizontal with dropdowns navigation to be visible, expanded and static (for better user experience). I use the specific level classes like rmLevel1, rmLevel2, rmLevel3. etc. to add margin-left to  the list items from each level. This way a user will be able to distinguish the level of each item. I also set float:none to the list items, because initially they're floated to the left, and what we want is to position them vertically.

Result:


The styles for the horizontal navigation are similar. However, since the control, that is used is RadTabStrip, not RadMenu, the classes are different:


Products filter widget:


Your Downloads widget



Shopping cart



You will find the full list of css declarations in the attached css file. Feel free to ask questions in the comments section. Enjoy the post!