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

Post a comment or leave a trackback: Trackback URL.

4 Comments

  1. CSS “Cascading Style Sheets” Lessons
    css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm

  2. interesting but i it would be good if the h1 tages etc, also had id or classes so we can target those with css…anyway to do this?

  3. ah i see…sorry for the last post, i misunderstood which elements were controllable via css. I have another question – is it possible to specify which books get listed? If I have 20 books, and i just want two displayed..can i do this? Also, if i _do_ display 20 books, is there an option to display 5 at a time?

  4. chiming in again…we just made our first widget shop:
    http://en.flossmanuals.net/

    works very well indeed…congrats it requires a very to the lulu team for this wonderful tool. We will broadcast the embed tag so others can embed our shop on their site. its designed using css so it fits in a sidebar of a website/blog etc

    you can see the source listed in out blog:
    http://www.flossmanuals.net/about

    I think some extra customisation would be really good…essentially what i mentioned earlier – the ability to include or exclude items by lulu ID, and perhaps the ability to set how many items can be listed on one page…for example, we have 2 books now listed, but 3 more will come quickly and we have a potential 30 more waiting right now…listing all this on one strip would be too much…

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*