Crafting the perfect shop category page

Crafting the perfect shop category page

Crafting the perfect shop category page

July 06th, 2016 – 4 Comments

The one page that often seems to be forgotten in the optimization of eCommerce sites is the shop category page. We see this in our website reviews almost every week. In this article, I’d like to break down the elements of a perfect category page.

The shop category page: just a regular page

The shop category page should first be treated as a normal page you want to optimize for a particular keyword. In this case, that focus keyword is the category name itself. If your online shop has little categories, chances are these categories will be rather general. I’d still optimize the page for that general keyword. The thing you want to do is to add more related pages, focused on for instance related long tail keywords on your site and in your blog. On the shop category page itself, write an inviting, optimized introduction for the chosen keyword.

What people often forget is that this ‘introduction’ could be split up into an enticing paragraph that is located above your list of products and continued right below the list. This, of course, depends on the theme you’re using for your shop (or your development skills). Google seems to prefer at least some kind of textual introduction above your products list. But please feel free to elaborate (a lot) below that list. In the introduction, you should also include links to other sections of your website. That can be related shop categories pages or specific landing pages. Anything to make your visitors and Google find the right products.

List all your categories

Next to a textual intro, your category page also contains a list of all the categories, immediately visible or visible on demand, like Amazon’s category list:

Shop category page: Amazon categories

There is a select list that returns a huge list of subcategories if wanted. You can see that in the greyed-out area of the image. Your list might be shorter, like the one at Moleskine.com:

Shop category page: moleskine category

Moleskine incorporated the main categories in the main menu of their shop. On click, there is also a subcategory list, as you can see on the left in the image above.

Content SEO: learn how to do keyword research, how to structure your site and how to write SEO friendly content »

Content SEO Info

Product listings

The main section of your category page is, of course, the entire list of products in that category. It’s like the excerpts on your blog but narrowed down to just a few product details. These details combined need to entice the visitor to click to that particular product page. Let’s go over these details.

Call-to-action

The Moleskine example mentioned earlier leads me to the central element on the category page, the products list. There are a few things I think should be in there, but Moleskine’s product listing is missing a crucial one (in the screenshot above): a trigger for me to click. I know that all visitors understand these images and titles are clickable, but there is no trigger for me, like at Staples.com:

Staples' shop category page

It will make for an entire page of calls-to-action, but I guess that is better than no clue at all. You obviously want to place that call-to-action near (or containing) the price of the product.

Product image

One might argue that by leaving the add-to-cart button out, there will be more focus on the product image. This is another critical element of the product listing. We like to judge a book by its cover. It largely depends on the product image what kind of sentiment a product brings (and what product one will buy). Note that you can’t always optimize that:

DIY.com Screws

This screenshot clearly shows that you sometimes just can’t fix that image, or it’s just too much hassle to optimize thousands of images that come from manufacturer catalogs. In that case, it is vital to show differences between these images immediately. This is where the product title comes in.

Product title

A product title should include brand, product name and in the case of the screws in the screenshot above, dimensions. For some other products, you might want to include SKU as well. For LEGO, that makes all the sense in the world. A lot of people search for that particular SKU, like here:

LEGO SKU in the product name

Including that SKU in the product title, will help people finding that precise product page in Google.

Availability

Learn how to structure your site well with our Site structure training! »

Site structure training Info

In the screenshot of LEGO.com above, there is another element I like to see on a shop category page: availability. LEGO does a great job on this. Which makes sense as their shop also lists ‘retired products’. By adding a green ‘in stock’ text or a red ‘out of stock’, or even an enthusiastic ‘available from June 1st’ (add to wish list to receive a notification), you can help the decision process for a visitor.

List or grid?

On a more general note, another thing to decide is whether to use a list or grid view. There are things to say for both variations. A grid view allows for more products per page (which is easier to scan) and list views allow for more product details. You could also add a convenient switch so that the visitors can decide for themselves. If you have to choose, do test what works best.

Please allow for proper whitespace (top-bottom and left-right) between products. I do like the Moleskine category page when it comes to that.

Your two cents

I tried to highlight the most important decisions above. I’m sure you can think of more elements that need to be on that shop category page. Please leave these in the comments; I’d love to hear your two cents on this subject!

Read more: ‘Product page SEO’ »


4 Responses to Crafting the perfect shop category page

  1. Brian
    By Brian on 8 July, 2016

    Time to optimize my store again :) I originally removed the “Add To Cart” button as I personally thought it added “clutter” but I guess it’s time to do some A/B testing with and without it now. Thanks for the post!

  2. Abilio
    By Abilio on 8 July, 2016

    Michiel, for each category page I need to create a category in WordPress Dashboard? Thank you very much.

    • Brian
      By Brian on 8 July, 2016

      That depends a lot on the shopping plugin you’re using. For WooCommerce each category by default has it’s own category page.

  3. Montar loja Virtual
    By Montar loja Virtual on 6 July, 2016

    Very good. Michiel
    It really makes a big difference to them and commerces


Check out our must read articles about eCommerce