# How to Make One Photo Shoppable on Shopify with Image Mapper > Pin each product in one photo and shoppers can open it, pick a variant and add it to the cart without leaving the page. Here is how to set it up with Image Mapper, step by step. Source: https://ginner-tech.com/blog/how-to-make-one-photo-shoppable-image-mapper/ Published: 2026-10-27 Updated: 2026-10-28 [App blog: Image Mapper](https://ginner-tech.com/blog/?topic=app-blog-image-mapper) 28 October 2026 · Luke Tran · 5 min read ![How to Make One Photo Shoppable on Shopify with Image Mapper](https://ginner-tech.com/assets/how-to-make-one-photo-shoppable-image-mapper-cover_1m0050.webp) A good lifestyle photo shows several products at once. The trouble is what happens next: a shopper likes the chair, the lamp and the throw, then has to search your catalogue for each one. Image Mapper – Shoppable Image fixes that by letting you place a small pin on each product in the photo. This guide takes you from an empty app to one working shoppable photo, with no code. The app has one plan, with a 7-day free trial. The current price is on its App Store listing. ## Part 1: How to set it up ### Step 1: Install and turn on the app embed Install the app and approve the charge. On the Shoppable Images page you will see a banner titled “Action Required: Activate Image Mapper in your Theme”. 1. Click **Activate in Theme (1-Click)**. The theme editor opens with Image Mapper Core already switched on. 2. Click **Save** in the theme editor. 3. Go back to the app and click **Verify Activation**. The banner disappears. ![The top of the Shoppable Images page in the Image Mapper app, with the heading, the Shoppable Images, Carousels, Galleries and Pin Styles tabs, and the Add Shoppable Image button](https://ginner-tech.com/assets/image-mapper-shoppable-images-page_Z23CmH7.webp) Once the app embed is active, the banner is gone and you land on the Shoppable Images page, with the Add Shoppable Image button at the top right. Without Image Mapper Core, nothing shows on your storefront. ### Step 2: Pick a photo with several products The app’s own help text says a good photo should have multiple products in it. A styled room or an outfit flat-lay both work. A single product gives you only one pin. ### Step 3: Create the shoppable image 1. On the **Shoppable Images** tab, click **Add Shoppable Image**. 2. Type a **Mapper name**. This is for your own reference, and it is also used as the image alt text. 3. Click **Upload an image**, or paste an address into the image URL field. Uploads go to your Shopify Files. ![The Add mapper page in Image Mapper with an empty Mapper name field and an Upload an image button](https://ginner-tech.com/assets/image-mapper-add-mapper_ZHIEEG.webp) The Add mapper page: type a Mapper name, then paste an image URL or click Upload an image. ### Step 4: Add a pin for each product Once your image loads, a Preview panel appears. 1. Click on the photo wherever you want a pin. Each click adds one. 2. Drag a pin to fine-tune its spot. 3. Click a pin to open its settings. Under **Data source**, keep **Product** selected and click **Browse product** to choose the product. If you skip this, the app shows “Product is required”. 4. Click **Save** in the pin sheet. 5. Repeat for every product you want shoppers to buy. ![The Pin 1 settings sheet in Image Mapper with Data source set to Product and a product chosen, over a living room photo with pins](https://ginner-tech.com/assets/image-mapper-pin-settings_1y094O.webp) The pin settings sheet with Data source set to Product and a product chosen. The preview behind it uses placeholder text. ### Step 5: Choose the optional switches On the same page you can turn on: - **Show modal on mouse hover instead of click** - **Force mapper fullwidth** - **Enable image carousel on quickview modal** - **Enable background overlay on modal opened** All four are off by default. Part 2 shows what each one does. Click **Save and Continue Editing**. A new image takes you to the **Install Shoppable Image** page. ### Step 6: Add it to your page 1. On the Install Shoppable Image page, click **Copy ID** under Method 1. 2. Open your theme editor (Online Store, Themes, **Customize**) and go to the page where you want the photo. 3. Click **Add section** or **Add block**, open the **Apps** tab and choose **Shoppable Lookbook**. 4. Set **Lookbook Format** to **Single Shoppable Image**, paste the number into **ID** and click **Save**. ![The Shopify theme editor with the Shoppable Lookbook block selected, Lookbook Format set to Single Shoppable Image and an ID filled in](https://ginner-tech.com/assets/image-mapper-shoppable-lookbook-block_1trk1W.webp) The theme editor with the Shoppable Lookbook block, Lookbook Format set to Single Shoppable Image, and the ID filled in. For a blog post or an older theme, use Method 2 on the same page instead. It gives you an HTML snippet to paste, and the Image Mapper Core embed still needs to be on. ### Step 7: Check it in a private window Browsers keep copies of the app’s files, so a normal tab may show an older version. The app suggests a private (incognito) window. The server cache can also delay changes by up to about 5 minutes. ## Part 2: What your shoppers see - **The photo with pins.** Each pin sits at the spot you chose on the image. The pins are positioned by percentage, so they stay on the same spot on a phone and on a computer. - **A quickview on click.** When a shopper taps a pin, a quickview opens with the product title, price, description and image, plus a variant selector if the product has options. - **Two buttons.** **VIEW ITEM** goes to the product page. **ADD TO CART** adds the chosen variant without leaving the page and shows “Item added to cart!”. - **Hover on a computer.** By default, hovering a pin shows a small tooltip with the product title, and clicking opens the quickview. (The tooltip is not used on phone-width screens.) If you switched on **Show modal on mouse hover instead of click**, hovering opens the quickview directly and there is no tooltip. - **Full width.** If you switched on **Force mapper fullwidth**, the image spans the full browser width. - **Quickview carousel.** If you switched on **Enable image carousel on quickview modal**, the quickview shows a swipeable carousel of all the product’s images. - **Background overlay.** If you switched on **Enable background overlay on modal opened**, the image dims while the quickview is open, and clicking the dim closes it. ![A storefront living room photo with a quickview open on a pin, showing the product title, price, VIEW ITEM and ADD TO CART](https://ginner-tech.com/assets/image-mapper-storefront-quickview-scaled_Z2052dE.webp) On the live store, tapping a pin opens a quickview with the title, price, VIEW ITEM and ADD TO CART. Last checked: October 2026 Image Mapper – Shoppable Image: [https://apps.shopify.com/image-mapper](https://apps.shopify.com/image-mapper) **Tags** - Image Mapper - Shopify - Shoppable images Luke Tran Founder and senior full-stack developer Luke has worked with Shopify and WordPress for more than 12 years and runs five apps on the Shopify App Store. [More about us](https://ginner-tech.com/about/) **More posts** [Previous post Room Photos That Sell Every Piece](https://ginner-tech.com/blog/im-room-photos-that-sell-every-piece/) [Next post Social Proof Beyond Reviews: Show Shoppers What Others Are Looking At](https://ginner-tech.com/blog/social-proof-beyond-reviews/) ## Keep reading [All insights](https://ginner-tech.com/blog/) - App blog: Image Mapper **[Room Photos That Sell Every Piece](https://ginner-tech.com/blog/im-room-photos-that-sell-every-piece/)** Shoppers like the sofa, the lamp and the throw, then hunt your catalogue one product at a time. A shoppable room photo lets them add each piece to the cart from the photo. 28 October 2026 · 2 min read - App blog: Image Mapper **[Shoppable holiday lookbook](https://ginner-tech.com/blog/im-shoppable-holiday-lookbook/)** A styled holiday photo is only half the job. Pin each product in it and shoppers can see the price, pick a variant and add to cart without leaving the page. 28 October 2026 · 2 min read - App blog: AHA - Onboarding Tours **[How to Launch a New Collection with a 4-Step Store Tour](https://ginner-tech.com/blog/launch-a-new-collection-with-a-4-step-store-tour/)** A new collection usually gets a banner and an email. A four-step store tour walks shoppers across the collection page and points at what matters. Here is how to build it. 28 October 2026 · 4 min read ## Tell us what you are building Tell us about your project in a short message. [Start a project](https://ginner-tech.com/contact/) [Email us](mailto:lucdkny@gmail.com)