Event Clothing

A fully responsive WordPress based eCommerce sample website, inspired by h&m, to showcase by knowledge of WordPress and WooCommerce.

Event Clothing - eCommerce


The homepage comprises of 4 main sections; the header, the left sidebar, the main content and the footer. The header section consists of a site-wide top announcements banner, which in this example highlights a discount voucher code on spends over a certain amounts. Just below that is the main website logo followed by the main page navigation bar

The main body of the homepage is home to the sidebar and the main content. The sidebar offers users the ability to search for an item, whether it be by SKU code or by all or part of an item name. It also contains links to their account and their basket which updates live, as and when users add an item to it, a sub-navigation menu for browsing the products and finally a list of the 4 items the user has viewed most recently.

The main content of the homepage shows the 8 most recently added products for each of the main product categories; Men and Women. This shows a thumbnail of each item, along with its name, price and a ‘sale’ badge for items which are currently on sale

Finally is the footer, which is split into 4 columns; Login form, Account options including links to their cart and the checkout, the 3 most recent items in the ‘Magazine’ blog and finally the company slogan and social media links.
Homepage Screen - eCommerce

Category Page

The category page is very similar to the homepage, with a few small differences. Firstly, and most obviously it only shows you the products for that category. In the example below, we are viewing the ‘Mens’ category. Secondly, the sidebar has an additional feature, a sliding price filter, allowing users to filer out products that do not fit into their price bracket.
Event Clothing - Category - eCommerce

Individual Product Page

Each product has its own page, which displays a larger image of the thumbnail we see on the previous pages, as well as a gallery of other images of that product. It also has the items title, followed by its price and the main product description. Beneath that as a drop-down to select your size, an indication of the current stock level and the option to add 1 or more of this item to your basket.

We then have three tab options; Description, Additional Information and Reviews. The Description gives some basic details about the product, Additional Information gives an idea of the product weight (which can be used to determine shipping costs) and available sizes and the reviews tab allows users to leave a review and star rating for the product as well as view other users’ reviews.
Event Clothing - Product - eCommerce


The basket page is pretty self-explanatory, and does everything you would expect of an eCommerce basket/cart page. It shows the user what they have in their basket, how much each item costs, gives the ability for users to add a discount coupon/voucher code, calculates the total cost including shipping and allows the user to proceed to make a payment at the Checkout.
Event Clothing - Basket - eCommerce


The final page I am going to showcase is the blog, or ‘Magazine’ as this clothing company likes to refer to it as. Again, this page doesn’t need much explaining, as I am sure you have all seen a blog at some point. The only small change I made to the layout of this page was to switch the sidebar over to the right, this draws the user straight in to the main content and offers an easy read from left to right. Each article has a featured image, a title and an excerpt from the main article.
Event Clothing - Blog - eCommerce

Don’t forget, this eCommerce website is a sample of what I can do, so go and explore it and see if a website like this would suit your business. Oh, and don’t worry, the PayPal payment option is in sandbox mode, so you wont accidentally purchase a mock-up product!

Your eCommerce Business

If you have a business and would like to boost your sales online, get in touch and let me help.

DK Web Design - Logo

What I Do

Hi, I'm Dan...I specialise in creating bespoke marketing information sites and small e-commerce (shop) websites. Tailored to marketing or selling your products or services successfully online.
Web Design - Tailored To You

Latest Tutorials

Latest Posts

%d bloggers like this: