Storefront Lookbook: volume 1

Written by James Koster on December 4, 2014 Blog, Storefront.

lookbookv1

In the Storefront lookbook we explore different aesthetics you can create using Storefront core and the optional extensions available for purchase.

The following designs can be created without touching a single line of code and help demonstrate the creative power that Storefront and it’s suite of extensions provides. In volume 1 we’re looking at the shop page in particular.

Book store

For a book store we’ve chosen a soft colour palette and serif typeface for a formal and trustworthy aesthetic. Setting the width to match the browser and displaying products in rows of 4 allows you to display plenty of products per page.

bookstore

We also added a prominent search bar in the header widget region allowing folks to quickly find the product they’re looking for.

To create this look you’ll need the following extensions:

Fashion store

Fashion stores often feature a minimalist, monotone design which allows the product photography to really pop and grab attention. Using a simple style and colour scheme is very simple and can achieve great results with the right catalog of products.

We demonstrate the flexibility of the header widget region by displaying some impact messages, compelling visitors to buy your products.

fashion-store

This look can be created without any extensions.

Tech store

A tech store might be selling software or other digital products. Here we use a vibrant color scheme and visually striking contrast colours to deliver a contemporary design. Often times tech products reputations precede them – removing the sidebar immediately immerses visitors in your product catalog. This works great if you have a small suite of products rather than a gargantuan catalog.

tech-store

To create this look you’ll need the following extensions:

Autumnal arts and crafts store

Removing the sidebar works great when you have a small catalog of products and displaying fewer and fewer products per row will really make your product photography stand out. This is perfect if you’re selling products that rely on the photography to sell them – handmade items being a perfect example of this. The large product imagery will help illustrate the craftsmanship on display.

Adding a seasonal background image, autumnal color scheme and centrally aligning/refining your site header will help your design feel friendly and on-point with minimal effort.

arts-and-crafts

To create this look you’ll need the following extensions:

Store with attitude

Combining abrasive textures with industrial, utilitarian typefaces can help add character and define attitude. This can work really well for counterculture stores selling less mainstream products. Subtle Patterns is a fantastic resource for discovering awesome, tiling textures. But don’t go overboard and remember – less is more!

music

To create this look you’ll need the following extensions:


We hope this post demonstrates the creative power at your fingertips when using Storefront! Remember to acknowledge the psychology of colour and tweet us a link to the unique designs you’ve created for a chance to make it into the next volume!

Download Storefront View Storefront extensions

cta-banner-10-product-page-v2_2x

5 Responses

  1. Luc
    December 5, 2014 at 9:17 pm #

    WTF, all those shops look the same?!???!?!!! Well, at least Storefront is pinchable, contrary to all the other Woo themes. This will finally make a usable Woo theme for iPads. And indeed it seems to fast!

  2. Matt
    December 5, 2014 at 11:21 pm #

    For the centered header can you add the add to cart link in the navigation list?

  3. Hemant Khatri
    December 6, 2014 at 12:39 am #

    I’m looking for more information on fashion store (theme) customization. I would appreciate, if you could point me to right resource to get more information on this. Thanks.

  4. Gerald
    December 6, 2014 at 9:34 am #

    Hi!

    This is not really an inspiration – we did this:
    http://www.kleinerfrechdachs.at (children fashion)

    and now we are busy to make s shop for advertising technics.

    Best regards,

    Gerald

    • @Gene_us
      December 8, 2014 at 3:03 pm #

      Though I agree with you that the provided examples are pretty uninspiring, the website you referenced uses Canvas, NOT Storefront. As you were.

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment
%d bloggers like this: