I’m really looking at boosting the effectiveness of the wildlife shop over at Wildlife News to give it a more effective shop front. At the moment I just have a page with hard-coded links to separate categories. This is fine as it stands but making it more dynamic will boost sales and that’s obviously important.
Putting together a custom frontpage for wp ecommerce 3.8.
So I’ve headed back to experimenting with the phonelingo site to play around a bit with some extra coding to produce the basis of a more effective wp-ecommerce shop front. As always with WordPress you can produce different template pages through the template hierarchy functionality.
In the phonelingo case because the store front is also the home page I just need to produce a home.php file for it be displayed in place of the default index.php file. To make it easy I just copied the index.php file and renamed it home.php. It as then simply a case of deleting the call to content part of the template and I had the basic foundations and calls to headers, footers and sidebar.
Adding a slider to store homepage.
Adding a slider to a front page of a estore now – whether it’s a wp ecommerce 3,8 shop or not – is a pretty standard thing to do so the first thing was to load up the Next Gen gallery plugin. NextGen gallery is one of the best gallery plugins for WordPress and works well with wp e-commerce. So this was the first template tag I installed on the new eStore frontpage.
Because Next Gen does not have template tags it only runs on shortcodes the gallery was put in the template by using the do_shortcode function in WordPress. now to change the images in the slider on the frontpage I just need to add or delete images from the one gallery.
You should note that at this stage I’m just doing the technical aspects of the wp ecommerce homepage so the styling and imagery at phonelingo is not the best and will be improved upon once I’ve completed the technical aspects.
Displaying latest products on homepage.
Once the Next Gen gallery was working the next thing I wanted to do was put the latest products on the page in a grid view. I thought that 2 rows of 4 would be a reasonable amount of latest products to display. This was a straight forward call to get the latest additions using the wpsc-product custom post type and number of posts in the global $post argument array.
It was then simply a case of styling up the list of products using css to produce the grid pattern. for my case the main latest product container was set at 650 pixels with each unordered item given a width of 135 pixels. the result was 2 rows of 4 items.
A special offers section on store frontpage.
Obviously everyone likes a good deal so the next thing to bring into the wp ecommerce shop front was the items on sale – or at least a selection of items. The Hottest Offers section was fairly straightforward again. Because I wanted control over which special offers get highlighted and featured I set up a new category in wp ecommerce called Special Offers.
I could then put in place a query call using that category in the wpsc-product custom post type. I could then put in place a loop and printout the aspects of the product that I wanted to – in this case the product name, the old price, the new price and the savings made. I put in place plenty of divs to give me the ability to style it all up at a later date.
I only called 4 items in the post query call because I only want one row and as with the latest products section a quick bit of css gave me the one row of 4 items. As I will probably have more than 4 items under special offer at anyone time I set the sort to random which means I’ll get a random display of 4 items from the pool of products in the special offers category.
Putting in a latest news section.
The search engines love updates and new posts. Since the caffeine update in Google sites which are updated on a regular basis seem to do much better in the search engine results. Having a regularly updated news section on your front page will definitely do you no harm and will almost certainly do you a lot of good. so this was the next task.
To break up the page a little I decided that a block of 2 by 2 would be better than trying to carry on with the 4 column format. This is especially so when the extract of the news will be test and a larger width than 135 would make it much easier to read.
There was a straightforward call to the latest posts with a post number of 4. the css again was pretty straightforward to produce 2 rows of 2 columns. The main container was set at 650 pixels and the individual ul width was set at 265 pixels.
Adding a review to shop homepage.
The last section of the wp ecommerce frontpage is a row of 4 reviews (once I’ve wrote some) This is simply a call to the latest 4 items in the review category. It will be a row of four reviews consisting of just the thumbnail image and title.
The review section is at the bottom of the page because quite simply people who search for ‘xxx phone review’ are generally at a lower stage of the purchasing cycle and while it’s useful to have reviews sections they do not convert as well as other pages. But if you’re a bit short on actual news to write about then a review is a good filler and will attract visitors to the site – though not necessarily spending ones.
Time to test shop homepage.
Now that the technical aspects of the front-page is up and running now it’s about getting it all styled up in 2 or 3 different looks and running them against each other with Google Optimizer to see which pages gets the best results.
Once a few little problems have been sorted it will be time to transfers the set up over to the wildlife shop and to run some tests over there to get a great and effective store front.
