VIEW LIVE DEMO

Front Page

Comments

Download Theme

• Rounded Corners
• Box Shadow
• Text Shadow
• Gradients

Unfortunately IE does not support any of these yet, but it looks very nice in FireFox and other good browsers supporting CSS3. Take a look at this example (right click to view the source code)

As you can see we have only used the h1 with two span tags. The first thing we can look at is the rounded corners (a really great feature).

-moz-border-radius: 8px;
-webkit-border-radius: 8px;

(Moz is for mozilla (FireFox) while webkit is for Chrome and Safari)

We have set the radius to 8px for our header, this gives us some nice rounded corners. Then we need to create a drop shadow, this is done with box shadow like this:

box-shadow: #333 10px 10px 10px;
-moz-box-shadow: #333 10px 10px 10px;
-webkit-box-shadow: #333 10px 10px 10px;

As you can see there are four different values here. The first is the color and the three others are the size and position of our shadow. Change the different values to see how it affects the shadow.

That’s the CSS3 stuff we need for our main header. Now we are going to create the logo inside the header. We do this by adding two span tags which wrap around “css3″ and “logo”

On the css id we only need rouned corners on the left top and left bottom like this:

-moz-border-radius-topleft: 10px;
-moz-border-radius-bottomleft: 10px;
-webkit-border-top-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;

To create the gradient background we need to add this:

background:-moz-linear-gradient(-90deg, #fde98d, #f9cd0a) repeat scroll 0 0 transparent;
background:-webkit-gradient(linear, left top, left bottom, from(#fde98d), to(#f9cd0a));

The first color is the top while the second is the bottom. Change the colors to see the effect. As you can see you can change the gradient style as well (-90deg and linear. try change the values to see the effect).

The final thing we need to add is the text shadow:

text-shadow: 0 1px 0 #fbf0c3;

This works pretty much like the box shadow and you can try to change the values to see how it works.

To create the logo span just use the same code with different values. That’s all.

The first thing you need is of course a domain and a web host. If you don’t have this it may take a little longer depending on which web host you chose. Hostgator is a good choice, they have 24/7 support as well. With their Business Plan you should be able to run a small webshop.

Now that you have a web server you need the following

• WordPress
• WP-ecommerce
• EasyCart WordPress Theme (29$)
• PayPal account

The first thing you need to do is to install WordPress, WP-ecommerce and EasyCart. (All these comes with install instructions, so It’s no point repeating that.)

To accept credit cards on your site you need an  PayPal account, if you don’t have an account now is the right time to get one (it’s free and only takes a couple of minutes). The next step is to set up IPN (Instant Payment Notification) within your PayPal account. You will also find info on how to set up this at PayPal.

Ok, I have installed everything and my PayPal account is starving. Now what?

Let’s assume you have installed WordPress, WP-ecommerce and EasyCart. Now you need to do some basic configuration. In the left sidebar in your WordPress admin panel you will find a tab called Products. The first thing to do is to go to “Settings”–>”General” and configure country, currency and tax options. This should be pretty straight forward so once this is done move on to “Presentation” and under “Product Page Settings”, change the theme to “EasyCart default”. Move on to “Product Group Settings” and check “Show Product Group Description” and “Show Product Group Thumbnails”. Now you need to set the default thumbnail settings correct so it looks smooth with EasyCart:

• Default Product Thumbnail Size: height: 200 width: 200
• Default Product Group Thumbnail Size: height: 96 width: 96
• Single Product Image Size: height: 200 width: 200
• Show thumbnails: Yes

Move on to” Pagination Settings”, set to “Yes” and show 3-5 products per page (If you don’t use these settings with EasyCart there will be way too many products in the recent products slider on the front page).

All of the other options are optional and should be self explanatory (I really like the Display “Fancy Purchase Notifications”, which is a small pop-up window that notify the user that they have added a product to their cart)

Accepting Payments

There are several options for payments in wp-ecommerce and PayPal is really simple to set up. Just go to “Payment Options” and chose “Paypal Payments Standard”. Fill in your username (which is the e-mail address you use for your PayPal account). IPN must be set to yes. That’s all (The url is already set by default).

Creating Product Categories

Now that you have set up your payment gateway you might want to create some product categories. In the left sidebar under “Products” you will find “Categories”. As you can see this is pretty straight forward but I strongly recommend that you use icons as category images. Let’s say you have one category that sells Mp3 Players, then you should go to iconfinder.net and search for “Mp3 player” “ipod” or something like that. Once you have found your icon you should prepare a 96×96 pixel image before you upload it so it looks exactly like you want. You should also write a good description of your category.

Adding Products

It’s time to add some products. Right above Categories in the left sidebar you will find “Products” which is the page were you can add… yes, that’s right.. Products. This is also very simple and straight forward but there is a couple of things I would like to mention. In the Title field you will notice a small icon on the right side. If you click on this icon once you have saved your first product it will give you some shortcodes and template tags. The template tags is code snippets that can be used in the theme core files, these are for the more experienced users. However the Shortcodes can be really useful even for beginners. Let’s say you have written a blog post and want to include your product in this post, then you can use the shortcode to display it, i.e. you get this short code:

Display Product Shortcode: [codesnippet]

If you paste this code snippet in your blog post it will display that product.

Some other things worth mentioning is the “Custom Meta” under “Advanced Options”. If you are selling i.e. cameras you can specify technical information in these fields. Here is an screenshot of how it looks with EasyCart:

Your site is ready to go public!

Before you go public I would recommend to do some testing play around a little with the settings. You should also test if the payment gateway works properly. Remember to use quality images of your products. If you want a little more in depth info on how to use WP-ecommerce take a look at the screencast at the bottom of this post by Hungry Dog Media. I have also added some screenshots and a demo of EasyCart (The demo is just a plain html version without all functions, but it will give a basic understanding on how it looks). You may purchase EasyCart for 29$ here

EasyCart Screen Shots:

Using WP-ecommerce screencast

1. W3 Total Cache. If you want to improve the speed on your site dramatically this is the plugin for you. It’s easy to install and your site will become much faster.
2. WP-ecommerce. Start your own webshop fast and easy. With WP-ecommerce you will be up and runnin’ in no time. I think this is the best free e-commerce plugins available.
3. NextGen Gallery. WordPress has a default gallery function which is quite nice, but with this plugin you can easily manage your photos and organize them with albums.
4. CformsII. Manage forms easily with this plugin. It works right out of the box but does also have some powerful functions for advanced forms. You can easily create everything from simple contact forms to large complex forms.
5. Tweetmeme. Let your users retweet your stuff.
6. All in one SEO pack. This is a popular plugin that let you optimize your site for search engines in a simple way.
7. My Page Order. I don’t understand why this is not an default option in WordPress yet. This plugin lets you re-order your pages easily with a neat drag and drop function. Very useful.
8. Google Analytics for WordPress. Simple but useful. Just paste your analytics code in the textfield.
9. WP to Twitter. Automatically publish your post to Twitter with this plugin.
10. Capability Manager. Create new user roles and manage roles easily with this plugin.

I think these plugins are great to enhance and extend the functionality in WordPress. However there are of course a lot of other great plugins as well so if you have any favourites feel free to post a comment.

view LIVE DEMO