Shopify Dawn - How to build a Shop The Look Image

Store Design
, , , ,
1

Hi everyone,

I’d like to create a “Shop the Look” feature in my Shopify Dawn store. On haimov.com, they display this really nicely:

  • On desktop and mobile, the page shows a 3-column grid of images.

  • Each image has hotspots.

  • When you click/tap a hotspot, it opens the product details. On mobile, this appears as a bottom drawer popup (slides up smoothly), and on desktop it feels like an overlay that shows product info and add-to-cart options.

I’d love to replicate this but I’m starting from scratch.

:backhand_index_pointing_right: My questions:

  1. Should I build this as a custom section in Liquid/JS, or is there an app that already supports this exact layout + popup behavior?

  2. If custom is better, what’s the best approach? For example:

    • A 3-column grid of “shop the look” images

    • Each image has clickable hotspots

    • Clicking a hotspot triggers a bottom drawer (mobile) or overlay (desktop) that loads product info (image, price, ATC button)

  3. Does anyone have code examples, tutorials, or guidance for setting this up in Dawn?

I was considering the $9 “Shop the Look” section from Section Store, but on mobile its layout isn’t as smooth as Haimov’s bottom popup. My goal is to either:

  • Buy the $9 section and then add custom code so the product opens in a bottom drawer popup and with the 3 column image layout,

  • Or build this properly from scratch,

  • Or find an free app that already supports this exact functionality.

haimov.com Layout :backhand_index_pointing_down:

IMG_5457
IMG_54571320×2734 333 KB
IMG_5458
IMG_54581320×2654 256 KB

Shopify Section Layout ($9) :backhand_index_pointing_down:

IMG_5456
IMG_54561320×2730 292 KB

Thanks so much for your help!

2

Hey @AceDiamond,

Creating a Shop the Look like the reference site requires to do a lot of customization and the custom coding.

By any chance can you share the 4 digits collab code in the p/m so that I can implement it in your store.

Best,

Daniel

3

Hi @AceDiamond
I recommend you use an app to get this feature instead of customize code as it would take much time
https://apps.shopify.com/search?q=lookbook

4

Hi @AceDiamond,

  • Currently, the quick view popup comes with each theme, so in Dawn theme, if you want the display feature like haimov, you need to rebuild the theme quick view feature. And with the current budget, I think $9 for it is the lowest cost.
  • Building from scratch is the best way to create a feature, it will help you manage everything better. But in most cases, this will take a lot of time and cost.
  • Currently, I haven’t found any free apps that support this, but you can check out the current app builders.

I hope it is clear to you.

Best,
NamPhan

5

Hi @AceDiamond ,
I recommend using a third-party app instead of purchasing the “Shop the Look” section.

Based on your description, I suggest you check out some Quick View apps—they should meet your requirements.
For displaying a 3-column grid of images, you can also customize the relevant Liquid files for the collection.

I hope this advice is helpful. If you have any questions, please feel free to leave a message here and I’ll be glad to assist.

1 Like
6

What free apps can i use to achieve this?