Customizing the Mini-Storefront with CSS

One of the really useful things about the new HTML/Javascript Mini-Storefront Widget is that it generates your storefront display in good old-fashioned HTML. As a result, you can use Cascading Style Sheets (CSS) to customize the display of your storefront. This guide will give you an overview of the customization options available, and demonstrate how to use them. You don’t need to be a CSS guru, but knowing a little about CSS will help (learn more about CSS).

CSS Selectors

The JS Mini-Storefront provides a number of CSS selectors that you can use as hooks to add styling to your mini-storefront.

#lulu-storefront
This is the div containing all of the storefront widget’s components.
#lulu-storefront-title
This is an h1 tag that lists your name and storefront title, and links back to your storefront.
#lulu-storefront-items, .lulu-item
This is a ul list that contains the list of your content, each piece of content is contained in an li tag with the class lulu-item.
.lulu-item-thumbnail, .lulu-item-title, .lulu-item-description
These classes control the appearance of each content thumbnail, title and description.
.lulu-item-buynow
This is the styling for the ‘Buy Now’ link for each item.

Example

Our goal for this example is to make the Mini-Storefront blend in with the look of our example website.

example-storefront.jpg

We’ll be changing the colors used in the storefront, tweaking the fonts, and finally make the layout look a little nicer. First, let’s take a look at what it looks like before we start:

widget-basic.jpg

Changing the Colors

Our example site has some global colors for links, body text, and headers we want to use:

body {
	background-color: #e6e2af;
	color: #24231b;
}

a {
	color: #046380;
}

h1, h1 a, h2 {
	color: #a7a37e;
}

h2 a {
	color: #4b4938;
}

Changing the Fonts

We’re going to use Verdana for our body text, and Helvetica Neue (or Arial if we can’t find Helvetica Neue) for our headers.

body {
	font-family: verdana, sans-serif;
}

h1, h2 {
	font-family: “helvetica neue”, arial, sans-serif;
}

Changing the Layout

Getting the layout to look right will take a little bit more work. We’ll start with lining up the thumbnails and the descriptions. To do this, we need to float the thumbnails to the left:

.lulu-item-thumbnail {
	float: left;
}

.lulu-item {
	overflow: hidden;
}

That’s better, but we want to straighten things up a bit. So we’ll nudge the book descriptions over a bit:

.lulu-item-title, .lulu-item-description, .lulu-item-buynow {
	margin-left: 120px;
	display: block;
}

Oh, and we want to get rid of those annoying bullets in the list of books:

.lulu-item {
	list-style-type: none;
}

Here’s what it looks like with our CSS:

widget-example.jpg

Download Example 1

You can also download a slightly more complex example where I’ve gone through and cleaned things up a bit.

widget-fancy.jpg

Download Example 2

I hope these get you on your way to customizing the Lulu Mini-Storefront! Feel free to share any ideas, tips, or ask questions in the comments of this post.

Jackson Fox, User Experience Designer

Advertisements

0 Responses to “Customizing the Mini-Storefront with CSS”



  1. Leave a Comment

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s





%d bloggers like this: