How to create a digital lookbook

In fashion, promoting your latest collection is less about the appeal of individual garments and more about how you showcase them. What inspires a consumer to add that crisp white shirt or leather jacket to their shopping cart — online or in-store — is who they’ll become when they wear it. Unfortunately, it's hard to communicate something so multidimensional through ads or product listings.

Over the years, best-selling ecommerce retailers — some of whom happen to be Contentful’s customers — have found brand storytelling to be a solution. Through brand ambassadors, captivating style advice, and artful fashion lookbooks, Urban Outfitters, Rapha, MATCHES FASHION, The ALDO Group, Gucci, Daniel Wellington, Bloomingdale’s, and other retailers are differentiating themselves from competitors to elicit enthusiastic followings or, better yet, loyal lifetime customers.

Attracting brand advocates requires research on social media and email marketing. Launching a fashion blog requires a simple content manager and some copy. Creating an online lookbook, however, requires tact and technology beyond the basics. A content platform like Contentful can be used to create great lookbooks and address business needs beyond the functionalities offered by single-use lookbook makers and online lookbook creators like Flipsnack.

In this post, we provide guidance on how to create a lookbook with Contentful. If you get stuck along the way, feel free to consult our deep documentation library and easy-to-use SDKs. While the following best practices, practical tips, and potential pitfalls are tailored to this specific project, they can inform you how to create other engaging content, such as long-form articles and interactive style pages.

What's a digital lookbook?

In the fashion industry, the purpose of an online lookbook is to convey a brand’s artistic vision and inspire viewers to adopt a certain style through powerful images. They are different from product catalogs, which provide a utilitarian overview of all the products offered by a retailer. The creative nature of lookbooks, especially interactive lookbooks, and flipbooks, make them difficult to create with traditional CMSes. With content organized in hierarchical trees, entries are page-centric and difficult to reuse.

As an API-first, cloud-native content management system, Contentful embraces a flat content structure that allows related pieces of content to be linked together in parent-child relationships. This modular approach comes in handy when you want to use a single chunk of information on several pages. As long as the original content type includes a field for entries, editors can add the appropriate type and number of entries they need at any time.

How do I make a virtual lookbook? 

The first step to creating any lookbook, digital or otherwise, is to select a template or theme. Once a theme is selected, you can add professional photographs and product information. If you are creating a digital lookbook, there are tools and platforms that can help with template selection, design, and publishing steps. 

How many pages is a digital lookbook? 

Lookbooks tend to be 8-15 pages long, however, if the collection you want to showcase is smaller, you can create a lookbook with as few as 4 pages. With so few pages, make sure to make the most of each one!

Ready to familiarize yourself with our content platform and build your own lookbook? Let’s get started.

Start building

Sign up for a free Contentful account

Use your favorite tech stack, language, and framework of your choice.

Build a container to hold the lookbook

First, we’ll define our lookbook content model, which is a lookbook template of sorts. We’ll add a top-level content type and name it “container.” The container content type will include little information beyond essential metadata (e.g., a title, URL, SEO metadata, and cover photo). Its true purpose, aside from populating a search engine results page, is to be a holding container for individual lookbook sections, which will be linked to an entry in a form of child entries. 

Here’s what a container structure looks like on the backend:

If you come from a page-centric paradigm, separating metadata from content might seem counterintuitive. Despite the separation, editors still have the option of deciding how long a lookbook is, its layout, and what images it contains (will they select those by the amateur or the professional photographer?). These concerns are dealt with in lower-level content types, or reference fields, which make individual chunks of your lookbook reusable — no copying and pasting is necessary. These components provide flexibility and power ever-evolving storytelling.

Organize your content and multimedia

Let’s move on to child entries. These hold the assets that make up the lookbook. Before we decide how many content types we should create, we must consider project specifications like overall goals, workflows, and team roles. Clarity in these areas will help us determine whether to take a custom or universal approach to creating child entries.

Option 1: The custom approach

In instances where the design team wants to exert tight control over the final lookbook design and layout, we create individual content types to support alternative layouts. For example, we can create content types that enable our content creators to add fullscreen images, insert quotes, embed a video, or display text into the lookbook. For now, let’s use a generic section name to describe this family of content types.

Example 1: Section - Photo

Example 2: Section - Text

With design decisions solidified early on, there’s little room for editorial error while building out and populating the lookbook. Should the editor wish to add a new section, they need only create an entry of the desired type and fill out the necessary information.

The downside to this approach is that editors might grow frustrated with the fixed design pattern. Plus, the number of content types created to satisfy stylistic variations could become overwhelming to sort through. 

To smooth things over, we recommend introducing a dropdown that allows editors to control minor design elements like alignment or background color. While these functionalities might not be as robust as the ones offered by a targeted design software like Canva, they allow for some creative freedom and ensure brand consistency.

Option 2: The universal approach

In organizations where editors dictate the lookbook’s visual structure, we recommend taking a universal approach to content and asset organization. For simple components that include just a single module, such as a CTA or a title and text block, all you need to do is attach said component to the container entry. 

Should your layout showcase a collection of multiple products, content pieces, or multimedia assets, we recommend adding a layer to address more complex layout decisions. We’ll call this an “intermediate” content type and use it to manage how content is presented within a section. This type of module offers editors the flexibility to mix and match photos, text, and videos, or arrange elements. To really give your projects a unified, polished look, you might consider granting editorial access to certain styling controls, such as those outlined in the section above.

Lookbook images, videos, and texts can be entered as child entries in a module content type. To distinguish this scenario from the earlier one, let’s call the content type holding these entries “slots.” When design decisions are fixed in advance, it’s useful to create separate content types that correspond to alternative section layouts. In this more complex scenario, where layout decisions are already handled within the module content type, we’ll simply reuse the same content type for all types of content.

Integrate your product information

Up until now, we’ve ignored a critical lookbook component: product information. This might include a title, photo, price, product description, and ID. While the lookbook is a branding tool, providing these details enables consumers to add products to their cart and purchase it within the online store. There are three ways to integrate product info with visual pages, some of which are interactive features:

• Hotspot image overlays with tooltips, which reveal product information when hovered over.

• Call to action (CTA) button, placed at the bottom of a lookbook to direct visitors to a product page.

• Contextual product placement displays, when a user hovers over a particular section, product details populate. 

The appropriate content type for contextual product placement depends on whether products are linked to a section or an individual photo. If linked to a section, the info should be added to a section/module content type. If linked to a photo, the info must be added to individual slots. Depending on where your product information lives, you can either reference an external source or link to an entry within Contentful.

Address contingencies

To recap, our model consists of a container that holds individual lookbook sections, an optional module for determining the composition and layout, and actual photos, quotes, and texts at the bottom. To ensure that this content structure serves you well into the future, it’s important to prove the model against unforeseen contingencies and human error. 

Here are some pointers:

1. Educate editors with inline tips

With modular content, it’s easy to lose track of where and how a particular piece of content is used — which can result in the wrong content types being linked. To avoid this, provide editors with tips and practical examples that help them understand the role of specific fields and content types. Eileen Webb has some valuable advice on the topic.

2. Be frugal with content types

Defining content types is art more than science. Still, one rule yields positive results: minimize content types. Capital One has created 2,500 pages of content with less than 20 content types, which shows the versatility of a well-designed content model. Eliminate duplicates ruthlessly, if differences are purely stylistic. For minor variations, introduce an options field within a generic content type. 

3. Narrow your nesting

Speaking of consolidating content types, we recommend showing similar restraint with nesting. Having content types that are two levels deep (i.e., a parent and a child) is great, beyond that things start to get confusing.

4. Make use of validations

A modular approach isn’t an excuse to get messy with content. Missing assets, long paragraphs, and incompatible entries can unravel single-column pages, not to mention multi-column, responsive templates. Fortunately, this calamity is avoidable with validation rules. For more in-depth instruction on validations, check out the Field Setting Course available in the Contentful Learning Center or review our validation knowledge base article.

Tackle your next ecommerce project 

Once you’ve put the finishing touches on your lookbook and have sidestepped the pitfalls outlined above, you might be eager to use Contentful for other ecommerce initiatives. If so, we invite you to check out our demo on how to launch and personalize ecommerce experiences with our platform.

Subscribe for updates

Build better digital experiences with Contentful updates direct to your inbox.