Selling online provides the opportunity for many businesses to reach out to huge, untapped markets. When your store can be open 24 hours a day and you can reach a global market without the costs of mailings and call centres, it can provide a huge boost to your business. But there are plenty of things to consider when designing an eCommerce site. It’s not as simple as throwing up some shopping cart software and plopping products into a database. With the power of CSS3, it is possible to create some very cool and effective web elements that can just slot into place on any eCommerce website.

The products that you or your client are selling need to stand out and the all-important buttons such as ‘Add to Cart’ need to be prominent and stylish. It is essential to think about the presentation of customer reviews, the price and product description. All of these things need to be easy to accomplish, and with CSS3, those things just got a whole lot easier. So in this tutorial, we will look at how we can create a fictional product and turn it into an appealing and interactive web element using the power of CSS3 – let’s get started!

Set everything up

First thing we need to do is create a new HTML5 document with a link to your stylesheet within the head. Then within the <body> tag, we can create two <div>s with a class name of ‘container’ and then ‘block’, making sure we comment the closing tags for better readability.

Product image and buttons

Next we’re going to add in an image and some buttons for our product. Firstly we create a <div> with a class name of ‘product’. We then pull in our product image and then add in two buttons. One of the buttons is a ‘Add to Cart’ button with a class name of ‘buy’ and the other is a ‘View Item’ button with a class name of ‘preview’.

Product information

Now let’s add in some information about our product. Firstly create a <div> with a class name of ‘info’ and then add in the product title, wrapped within a <h4> header element. We then add in a little text describing our product and then finish off with the price and a ‘Buy now’ button.

Star ratings

In the final bit of HTML, we’re going to add in a star rating section that will be positioned at the very bottom of our product block. We just simply add a <div> with a class name of ‘details’ and create an unordered list with a class called “rating”. In a later step, we’re going to use a CSS sprite to show a different-coloured star.

The CSS

Open up a CSS file and start adding some styles. First add in some default styles within the body selector. We’ve set our font to Arial and given it a light grey colour, and we’ll use a patterned background for the page. Finish off by giving our ‘container’ <div> some width and margin.

Style the block

Things are not looking that great, so let’s start shaping it all up. By targeting the ‘block’ class, we can give the body of our product information some shape and some nice subtle effects by using the ‘border-radius’ and ‘box-shadow’ properties. We do want to make sure that the position is set to relative, as this will allow us to absolutely position other elements within – such as the buttons.

Product image

Now let’s set some styles for our product image. Ensure the image is set to block and position is set to relative. Then we can set the width to 100% so it drops into the main product block. After that, we finish off by giving the top corners the same radius as the block.

Info and details

Next we will give our product text and other information some shape. Firstly let’s target the ‘info’ class, which holds the product title and description. We then separate the ‘details’ section – which is the star ratings – by adding a top border and then finish this off by giving it some padding all around.

The large buttons

The buttons we are talking about here are the ‘Add to Cart’ and ‘View Item’ buttons that we will position at the centre of the product image. We then hide them until the user mouses over the product image. We won’t see much in the way of buttons yet, but we’ll tackle that soon.

Button styles

This is where we will start giving the buttons some basic styling. Because we set the ‘.product’ class to relative, we can easily use absolute positioning to give ourselves complete control of exactly where these buttons should be. We can then give them some nice, rounded corners and hide them by using ‘opacity: 0’.

Icon styling

Here we set some styling for the icons that will be added in the next step to both of the large buttons. Make sure the content is empty and then set a height and width. Then, divide the area where the icon will be by adding a 1px border to the right. Then add a subtle drop shadow.

‘Add to Cart’ button

In this step, we’re going to just focus on the ‘Add to Cart’ button. After positioning it 20% from the top, we can give it a dark background colour. Then we can give it a subtle transition and lower its opacity for when we hover over it. Lastly, we will add in our icon that will be positioned to the left.

‘View Item’ button

Next up will be to add the styles to our ‘View Item’ button that will sit underneath the ‘Add to Cart’ button. We are going to give this a blue colour and also give it a linear gradient. Then, let’s give it a subtle drop shadow and finish up by giving it a two-second transition on hover.

Finish the buttons

In this step, we’ll add a simple active state on the ‘View Item’ button. All we are going to do is move the button down by two pixels using the ‘translateY’ value of the transform property when we click the button. In the next rule, we add in the icon like we did previously.

Information arrow

Let’s create the small arrow that we see pointing up to the product image just above the product’s title. This is going to be very simple. All we need to do is create a white 25 x 25px square, position it absolutely and rotate it by 45 degrees. Then we move it down using ‘top -12px’ so all we can see is one of the corners.

Product title

In this simple step, we will apply some styles to the product title to give our product description some shape. Start by setting the position to relative and giving it some padding and margin. Then set the font family, font weight and size. Finish up by pulling all the letters in slightly, using a negative value to the letter spacing.

Product description

Everything is taking shape quite nicely now and the next step is to think about the product description. First, let’s add a two-pixel blue line just underneath the title. The good thing about doing lines like this is the ease at which you can change the height. Then we give the product description some styling.

The price

Having now got a lot of the product description done, there are only two things left to do, one of which is simple: give the product price a little bit of much-needed styling. Ensure that you have a play around with this; sometimes a bigger font would look better, or perhaps even a different colour would work well.

‘Buy Now’ button

The ‘Buy Now’ button is the last step to finish off the product description section. We’re going to float this right and use relative positioning in order to position it right where we want it. We’re then going to continue to give it the same styling as our ‘View Item’ button – finishing up with a nice transition and drop shadow.

The rating section

This is the last bit of the tutorial where we deal with the star rating section. We position the unordered list over to the right and zero out any default margin or padding. Once we do this, the block will become shorter and our bullet points will be overflowing. Let’s sort that out next.

Seeing stars

On this final CSS rule, we are going to add in our stars. We have included a PNG file called ‘stars.png’ on the resource disc that you can use. We’re going to use this as a CSS sprite and first position the green stars that have the class name of “.rated” added to the <li> item.

Final thoughts

eCommerce is forever growing on the web, and the need to design cool and functional web elements is becoming more and more achievable when using CSS3. So, experiment with what you’ve learned throughout this tutorial and see what you can produce!