Articles on: FAQ

How To Create A Lookbook Gallery With Essential Grid Gallery

A lookbook gallery helps showcase products in a visually appealing way by displaying lifestyle or promotional images with clickable product hotspots. In this guide, you’ll learn how to create a Shopify lookbook gallery using the Essential Grid Gallery app and customize it to match your store.


This guide explains how to create a lookbook-style gallery like the one shown in the video. The final result is a visual grid or masonry gallery where shoppers can click hotspot markers on images to view linked products.



From Shopify admin, go to Apps > Essential Grid Gallery.
The app opens with a template browser. On the left side, you can see template categories such as Portfolio, Photo Gallery, Video, Lookbook, Shoppable, Instagram, Products, Collage, and Collections.




Step 2: Choose A Lookbook Template

Select the Lookbook category from the template list.
Browse the available templates and select the Lookbook template. This template includes built-in hotspot functionality, making it ideal for creating shoppable product galleries.



After selecting a lookbook template, the gallery editor opens.
Use the Naming section to review or set:

  • Gallery Name: Enter a descriptive name that helps you identify the gallery later.
  • Gallery ID: Enter a unique Gallery ID or allow the app to generate one automatically. You’ll need this ID when adding the gallery to your Shopify theme.


Important: write down the Gallery ID. You will need it later when adding the gallery to your Shopify theme.




Step 4: Add Images To The Lookbook

Click Add Images in the gallery editor.
The media picker opens. Select the images you want to use in the lookbook, then confirm the selection.
Use high-quality images that clearly highlight the products you want customers to interact with. Lifestyle images generally perform better for lookbook galleries because they show products in real-world use.






After images are added, they appear in the editor preview.
Use the item controls to:

  • Reorder gallery items.
  • Edit individual images.
  • Duplicate items if needed.
  • Delete unwanted items.

For a lookbook gallery, place your strongest image near the top and group related visuals together.


Click the edit icon on an image to open the Edit Element modal.
The edit modal lets you configure the image and add shoppable behavior.
Common tabs shown in the video include:

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




Step 7: Add Product Hotspots

Hotspots are interactive markers that can be placed on an image and linked to Shopify products. When customers click or hover over a hotspot, they can view product details and navigate directly to the product page.
Inside the Edit Element modal, use the Add Products area to connect Shopify products to the image.
Follow this process:

  1. Search for or select a product.
  2. Choose the product checkbox.
  3. Place the hotspot on the image where the product appears.
  4. Click Add Hotspot.
  5. Confirm the product appears in the selected products area.
  6. Click S**ave **at the top of the editor page.

You can add multiple hotspots to a single image if you want to showcase several products within the same scene. Position each hotspot carefully so it clearly indicates the corresponding product.
Repeat this for each product you want to tag in the image.
Tip: place hotspot markers directly on or near the product, but avoid covering important visual details.




After adding images, hotspots, and layout settings, save the gallery from the app
After that, Open the Shopify theme editor.
Go to the page where you want to show the lookbook, then add the Essential Grid Gallery app block.
In the block settings, enter the Gallery ID from the app.


Updated on: 25/06/2026