Articles on: FAQ

How to Create a Shopify Lookbook Gallery from Scratch

Overview

This guide shows you how to create a shoppable lookbook gallery in Shopify using Essential Grid Gallery. You’ll learn how to add images, connect products with hotspots, customize the layout, and display the lookbook on your storefront.

In Shopify admin, go to Apps > Essential Grid Gallery.
Once the app dashboard opens, click Start from Scratch to create a new gallery.





In the editor, confirm the gallery setup fields:

  • Gallery Name: Give the gallery a clear name.
  • Gallery ID: Enter a custom Gallery ID or let Essential Grid generate one automatically. Keep this ID handy, as you’ll need it when adding the gallery to your Shopify theme.





Step 3: Add Images

Click Add Images.
The media picker opens. Select the images you want to include in the lookbook.
Recommended image types:

  • Lifestyle product shots.
  • Model or outfit photos.
  • Close-up detail images.
  • Collection images with clear product placement.
  • Images that leave enough space for hotspot markers.

After selecting images, confirm the selection.
For the best lookbook experience, use high-quality images that clearly showcase your products. Make sure important products are visible and leave enough space around them for hotspot placement.





Once images are added, they appear in the editor preview.
Use this stage to:

  • Check image order.
  • Remove images that do not fit the lookbook.
  • Reorder images so the gallery tells a visual story.
  • Confirm that each image has space for product hotspots.

For a polished lookbook, place the strongest image near the top and group similar products or scenes together.



Step 5: Edit A Lookbook Image

Click the edit icon on a gallery image to open the Edit Element modal.
This modal is where you configure image behavior, add products, and create hotspots.
Common sections include:

  • Media
  • Settings
  • Item Datas
  • Lookbook
  • Shoppable
  • Other




Step 7: Add A Product Hotspot

Each hotspot can be linked to a Shopify product, allowing customers to quickly view and purchase items directly from the lookbook image.
Inside Edit Element, connect a Shopify product to an image hotspot.
Follow these steps:

  1. Search for the product in the Add Products area under lookbook tab.
  2. Select the product checkbox.
  3. Position the hotspot on the image by dragging it.
  4. Click Add Hotspot.
  5. Confirm the product appears in the selected products area.
  6. Click Update & Refresh.

Repeat this process for each product you want to tag in the image.
Best practices:

  • Place the hotspot close to the product being tagged.
  • Avoid placing hotspots over faces, text, or important product details.
  • Avoid overlapping hotspots.
  • Keep hotspot placement consistent across images.
  • Test hotspot interactions on mobile devices before publishing.



After adding images, layout settings, and hotspots, save or publish the gallery in Essential Grid Gallery.
Before moving to the theme editor, confirm:

  • The gallery has the correct name.
  • The Gallery ID is known.
  • Images display correctly.
  • Hotspots are attached to the correct products.
  • The gallery preview looks complete.



Step 9: Add The Lookbook To The Shopify Theme

Open Shopify's theme editor.
Go to the page where the lookbook should appear, such as the home page or a dedicated lookbook page.
Add the Essential Grid Gallery app block.
In the block settings, enter the Gallery ID from the app.
After entering the Gallery ID, save the theme and preview the page to confirm the gallery loads correctly on your storefront


Updated on: 25/06/2026