Blurred background image

How to Create a Lookbook for your eCommerce Site

When it comes to fashion, the presentation of garments is everything. 

It is less about the clothing itself and more about how you showcase it. 

If you step out of the fashion industry, the same applies to all commerce. It’s the reason we’re attracted to products that are set up nicely behind a nice background, rather than plain-looking products surrounded by a plain background – whether it’s in a physical store or online. 

The problem, however, is that it can be very difficult to communicate a thing, an idea, through product listings and ads. 

There is the challenge. 

Over the last few years, some of the best-selling ecommerce retailers have found a solution in branded storytelling. 

Solutions such as working with brand ambassadors, the providing of style advice, and the development of fashion lookbooks provide companies with the ability to differentiate themselves from their competitors and build better branding and customer loyalty. 

Attracting brand advocates means researching social media as well as doing some email marketing. Launching a fashion blog requires an easy-to-use CMS. However, when it comes to creating an online lookbook, it needs greater technology that goes beyond the basics.  How to Create a Lookbook for your eCommerce Site

A CMS, such as Contentful, can be used to create fantastic lookbooks while addressing business needs that stretch beyond the functionalities offered by single-use lookbook makers as well as digital lookbook platforms like Flipsnack. 

But how can you create a lookbook with Contentful? 

We’ll set out the best practices of building lookbooks. But just before that, let’s cover a quick recap of lookbooks. 

What is a lookbook? 

Within the fashion industry, the whole purpose of a digital lookbook is to communicate a brand’s artistic vision and to inspire users and viewers to adopt certain styles through captivating images. They differ from product catalogs, which give a utilitarian overview of all the products offered by a brand. 

This gives lookbooks a creative aspect and as such makes it difficult to make them with traditional content management systems. With content organized hierarchically, the entries are specific to the page and tend to be difficult to reuse. 

Because Contentful is API-focused and cloud-native, it facilitates a flat content structure that allows related pieces of content to be better linked together. 

The Contentful approach is actually quite useful for when brands want to use single chunks of information across multiple pages. 

So how can you build a lookbook? 

Step one: create a container to place the lookbook 

First of all, define your lookbook content model, which is a type of lookbook template. Then add a top-level content type and name it “container.” This container content type is going to hold very little info beyond the key metadata (I.e., the title, the URL, the SEO metadata, and the cover photo). That’s because its general essence, besides populating a search engine results page, is to act as a holding container for individual lookbook sections. And these are going to be linked to an entry. How to Create a Lookbook for your eCommerce Site

If you come from a page-centric paradigm, then it may be more intuitive to separate metadata from content. In spite of the separation, editors will still have the option to decide how long a lookbook is, its layout, and what images it holds. 

These types of concerns are typically dealt with in lower-level content types or reference fields, which make individual chunks of your lookbook reusable. These components have the advantage of providing greater flexibility and power when it comes to storytelling. 

Step two: organize the content

Next up are the assets that make up the lookbook. Before deciding the amount of content types that should be created, you first need to consider the specifications of the project, such as overall goals, workflows, and team roles. Clarity in these areas will help your brand when it comes to determining whether to take a custom or universal approach to creating these child entries. 

A) custom approach

When the design team wants to hold tighter control over the final lookbook design and layout, create individual content types to support alternative layouts. For example, you can create content types that enable your content creators to add fullscreen images, embed videos, insert quotes, or display text in the lookbook. 

B) universal approach

In companies where editors have the power to dictate the visual structure of a lookbook, take a universal approach to content and asset organization. For simple components that include just a single module, like CTAs or a title and text block, all you have to do is attach those components to the container entry.  

If you are thinking of showcasing a collection of multiple products, content pieces, or multimedia assets, then it would be best to add an additional layer to address more complex layout decisions. 

This type of module provides editors with the flexibility to mix photos, text, and videos, or arrange elements. In order to give your projects a greater unified, polished feel, consider giving editorial access to specific controls in style. 

The images, videos, and text of a lookbook can be entered as child entries within a module content type. When design decisions are fixed in advance, it’s helpful to create separate content types that align with alternative section layouts. In this scenario, where layout decisions are handled within the module content type, you can easily reuse the same content type for all types of content.

C) product information integration

In terms of product information (i.e., the 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 them online. 

There are three ways to integrate product info with visual pages: 

  1. Hotspot image overlays with tooltips, which reveal product information when hovered over. 
  2. Call to action (CTA) button, placed at the bottom of a lookbook to direct visitors to a product page. 
  3. 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 

PS: ArganoUV is one of the world’s leading Contentful specialists. Contact us to see how we can work together. 

Related Ideas

If you got value from this article, you may enjoy these other articles, as well. We’re always adding value!

Additional Web Vitals That Compliment Core Web Vitals
  • ArganoUV
  • Contentful

Additional Web Vitals That Compliment Core Web Vitals

Beyond the Core Web Vitals, which other site metrics should you keep an eye on. ...
A Unified Digital Estate: Degroof Petercam & Contentful
  • ArganoUV
  • Commerce
  • Contentful

A Unified Digital Estate: Degroof Petercam & Contentful

For a unified digital content estate, independent financial partner Degroof Petercam switched its content over to...
Building the Homes of Tomorrow: Plant Prefab & Contentful
  • ArganoUV
  • Contentful

Building the Homes of Tomorrow: Plant Prefab & Contentful

Plant Prefab plugged in its content to Contentful and now provides their clients with the home...

Latest ideas

Our latest thinking about SF Commerce Cloud.

Core eCommerce Competencies
  • ArganoUV
  • Commerce

Core eCommerce Competencies

Core payment competencies in ecommerce.
The Benefits of eCommerce for Independent Pharmacies
  • ArganoUV
  • Pharma

The Benefits of eCommerce for Independent Pharmacies

Why go online if you’re an independent pharmacy?
Key Features for All eCommerce Pharmacies
  • ArganoUV
  • Pharma

Key Features for All eCommerce Pharmacies

What are the key features of a pharmacy digital store?

How can we achieve
awesomeness together?