Danish webshop with more than 10k products and 500 categories - new design

[Genius WebDesign]

Hi,

This is a reworked design of a Danish webshop I have made based on Virtuemart 2.0.6.
http://www.traelastogbyggemarked.dk/

Almost all aspects of Virtuemart has been modified - both the admin interface and modules etc.

What you should notice in this particular show-case is the following:

1. The modified Virtuemart Product module showing "Månedens Tilbud". Besides showing the normal product info I have created a product badge that overlays the product showing the discount in percentage.
And in case there is no discount I have added a "Special Price" banner to be displayed.

2. The floating module in the far right side of the page. Here I have used the standard "HTML module" and placed 5 other html modules inside with each it´s own HTML content. The "Trustpilot"-module is special, though. It´s made with the "Flexi Custom Code" module where I have added PHP script combined with HTML to pull data from the Trustpilot profile, which actually makes it a custom made Trustpilot widget. This is something my shop-owner is particularly excited about because normaly trustpilot´s standard widget costs alot of money to use.
The Facebook module is actually also an instance of the "Flexi Custom Code" module, and again here I have made my own API-based php script to make it work like a Facebook widget.

3. The product details page - use this example: http://www.traelastogbyggemarked.dk/hus-have/grill-og-tilbehor/grill/frida-mathilde-cafesaet-detaljer
On the product page I have made alot of changes to the standard "Related products" section. As you can see it shows 7 products lined up horizontally. I have made a purely CSS based hover div to show "add to cart".
What is most interesting in this regard, though, is that I have added "featured product" to the "related products" loop, so that it shows a maximum of 7 product total - first all the actual related product in random order and if there are less than 7 related products assigned to the product it will fill out the last spots with random featured products. Of course I have also made the code so that it skips the main product of the page in the loop, to avoid the main product being displayed as a related product.

4. The add to cart function. Here I have made Javascript fixes to the standard "add to cart" module, so that all Ajax events are working correctly in all browsers. Please try it out.
Out of the box there were multiple issues with the "add to cart", e.g. not updating the "mini-cart" to display all needed product info etc..

5. A direct link to the main-category of the product in product details. Here I have made a simple link that takes the customer "back" to the category of the product.

6. Discount badge with CSS animation on the product details page. See this product example: http://www.traelastogbyggemarked.dk/vaerktoj/el-vaerktoj-maskiner/kaedesav/partner-kaedesav-p33xt-46cc-14-detaljer
and hover over the discount badge. This is pure CSS animation and works in IE10, Chrome, firefox and Safari. Like in the products module this discount badge is made to show the PHP-calculated discount in percentage.

7. One last thing is the Twitter feed you see on the front page. This is based on the Twitter module from Yootheme´s widgetkit. Here I have modified the module to always change any twitter links from twitter posts so that the link text is "Read more.." (translated to english) instead of the usual link-string made by Twitter.

I hope some of you can use this demo and you are welcome to contact me, if you have questions or maybe want some of these features made in your own designs.

[jjk]

The shop looks very good! But it's a little bit slow, probably primarily due to the number of images being loaded and resized, before they are shown to the user. The product details page I'm just looking at, takes approximately 20 seconds to load of which 2/3 of this time are due to the loading of images. Not always, but very often the use of external webfonts also slows down a pageload considerably.

[Genius WebDesign]

hi jjk,

Thanks for the feedback!

Can you tell me from where in the world you are visiting the site?

When I myself browse the product pages it normally only takes 1-2 seconds to load the pages.
The site is located on a Danish server and when I do a test on Pingdom Tools from a server from Amsterdam the page loads in 2.67 seconds.
http://tools.pingdom.com/fpt/#!/I5eKR73QH/http://www.traelastogbyggemarked.dk/hus-have/grill-og-tilbehor/grill/weber-57-cm2012-10-14-12-44-53308809173-detaljer

[jjk]

I was calling your site from Germany, with a 16.000+ kBit/s line using the Firefox plugin 'Firebug' (Net tab) to view what your site is loading. Pingdom currently doesn't work reliably for me. Just tried and the full test produces a javascript error with the googleapis jQuery version.
However, comparing your site to mine, your product pages are loading approximately 5 times as much data.

[Genius WebDesign]

Ok, thx.

Do you have any good suggestions/tips as to how I best bring down the pageload regarding how images are being loaded?

Brgds

[jjk]

Do you have any good suggestions/tips as to how I best bring down the pageload regarding how images are being loaded?

I guess that depends on what the shop owner considers important. If he insists on displaying a lot of image-laden advertising around the product the customer is looking for, you have to load a lot of these. In my own web shop (art gallery) I don't use any slide shows, which usually pre-load a number of images and currently I don't display 'related products' and my display of 'latest' and 'featured' products is very limited, too. Also I'm resizing/optimizing all images with an image editor before uploading them to the website. So all my images have a standard width depending on where I want to display them and resizing of images (i.e. by css) is not required. For each product I usually have a 175px thumbnail, a 384px image for the normal product details view and a 768px image for the lightbox.