How to create a shoppable lookbook on Magento 2

For any kind of aspirational lifestyle products (e.g.. clothing, furniture, footwear, cosmetics, etc), just showing a photo of your product isn’t always enough. You need to promote a particular product or product line in a visually appealing way. This is where a digital lookbook comes in handy.

Enter the lookbook, you’re probably familiar with the similar terms like Shop this room, Shop the look, Shop by Look, Product Tours, etc. When done right, a lookbook page helps to tell a story, engage your customers, and inspire them to buy your products. And the customers can interact and buy straight from your lookbook.

Shoppable Lookbook

Shoppable Lookbook.

Let’s take a quick look at how you can create a lookbook page for your own Magento 2 store. We’ll cover two options:

Install a lookbook module

UB Content Slider is an easy-to-use Magento 2 extension that lets you create taggable lookbooks in an attractive grid. Once you add a lookbook page with product image hotspots, the customers can see essential purchasing information like product name, price by hovering over hotspot markers. Most importantly, they can browse the products in a context where they can open a ‘quick view’ lightbox and add a product to their cart at any point.

Customers can add a product to their cart from your lookbook.

Customers can add a product to their cart from your lookbook.

The extension gives a lot of flexibility to specify the lookbook layout that fits you most:

  • Manually adding a slider or images with product hotspots to your existing pages. You simply open the page you want, use a WYSIWYG editor for the content, which allows you to use a predefined UB Content Slider widget. This way, you can embed the lookbook on any CMS pages of your Magento 2 store.
  • Or, starting with our pre-designed lookbook pages where we already support several layout options — full width one column, 2-column-grid, 3-column-grid, and 4-column-grid. You can easily create up to 4 column lookbook page. You can also define your own CSS class to customize the look and feel of your lookbook page.

Easy to add product image hotspots on the lookbook page

Easy to add product image hotspots on the lookbook page.

If you are new to our extension, it’s a good idea to take a look at the step by step guide here to get a feel for how the UB Content Slider works.

Use a Magento 2 theme that supports lookbooks

UB Trex Pro is the first Magento 2 theme at Ubertheme that features a built-in lookbook template (we expect to release the template within the next few days).

Slideshow with product image hotspots on the lookbook page

Slideshow with product image hotspots on the lookbook page.

Unlike product or catalog pages, lookbooks arrange images in a more interesting grid layout. For the first launch, the UB Trex Pro theme will come with two samples created specifically for fashion and furniture categories. You can expect more lookbook samples to be added in the coming time.

It’s worth noting that the primary purpose of a lookbook is to present your featured products in a real-life, eye-caching setting. So, a lookbook is only as strong as the images it contains.

With that in mind, it’s crucial that you invest your time and money to ensure your photos are done right. The high-quality photography helps to convey your brand and allows customers to view how a product is used in a real-life context, and give them an idea of how it might fit into their home or lifestyle.

Conclusion

By publishing an online Lookbook, you sell not just a product but the whole story and lifestyle of a product. Ultimately, you let the customers see the possibilities that the products are used, how to combine them with other products in your store, and how they fit into their home or lifestyle.

So regardless of how you create your lookbook, they’re an effective way to build excitement around your products and develop trust with the customers.

If you have any ideas or features that you’d like to see, then we’d be more than happy to hear about them. Please leave your feedback in the comments or reach out to us via info (at) ubertheme.com.

Written By

Head of UberTheme Team

Comments