Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.
1. Choose the photograph. A portrait photograph of the pieces worn together works best. It is cropped to 4:5, so keep the pieces away from the edges.2. Add hotspots. In the theme editor choose Home page, select Shop the look, and add a Hotspot block per piece (up to 6). Choose the Product, then move the dot with Horizontal position and Vertical position: 0 is the left and top edge, 100 the right and bottom.3. Check the dots. Selecting a Hotspot block in the editor highlights its dot and piece, so you can nudge it onto the piece. The dots stay on the same spot of the photograph on phones and in right-to-left languages.
Hotspots and the list of pieces
What shoppers see. Pressing a dot highlights its piece in the list and moves focus to it. Single-variant pieces that are available get an Add to bag button that opens the bag drawer. Pieces with metal or size options, pre-order and price on request pieces get a View link to their product page.Layout. Image position on desktop puts the photograph first or second, and Gold frame around the image adds a hairline frame.
1 Shop the look, with its Hotspot blocks · 2 its settings · 3 the preview
⌘I
{"docsConfig":{"theme":"almond","$schema":"https://mintlify.com/docs.json","name":"Kwebby Documentation","description":"Documentation of Themes, Apps and Plugins offered by Kwebby.","colors":{"primary":"#F97200","light":"#F57700","dark":"#A73E06"},"logo":{"light":"https://mintcdn.com/kwebby/TpZ5Zd9XFi4SxDRE/images/kwebby-yellow-black.png?fit=max\u0026auto=format\u0026n=TpZ5Zd9XFi4SxDRE\u0026q=85\u0026s=8d72008e1f895697c1fbd9b26d1b536d","dark":"https://mintcdn.com/kwebby/TpZ5Zd9XFi4SxDRE/images/kwebby-yellow-black.png?fit=max\u0026auto=format\u0026n=TpZ5Zd9XFi4SxDRE\u0026q=85\u0026s=8d72008e1f895697c1fbd9b26d1b536d","href":"https://docs.kwebby.com"},"favicon":{"light":"https://mintcdn.com/kwebby/TpZ5Zd9XFi4SxDRE/images/favicon(1).png?fit=max\u0026auto=format\u0026n=TpZ5Zd9XFi4SxDRE\u0026q=85\u0026s=c527aedc2f6c7e40822d1c0ee3755200","dark":"https://mintcdn.com/kwebby/TpZ5Zd9XFi4SxDRE/images/favicon(1).png?fit=max\u0026auto=format\u0026n=TpZ5Zd9XFi4SxDRE\u0026q=85\u0026s=c527aedc2f6c7e40822d1c0ee3755200"},"navbar":{"links":[{"href":"mailto:service@kwebby.com","label":"Support"}],"primary":{"type":"button","label":"Back to Kwebby","href":"https://kwebby.com"}},"footer":{"socials":{"github":"https://github.com/kwebby"}},"contextual":{"options":["copy","view","chatgpt","claude","perplexity","mcp","cursor","vscode"],"display":"header"},"styling":{"latex":true},"navigation":{"pages":[]}},"deployment":{"deploymentMetadataValue":{"subdomain":"kwebby","hasAudioNarration":false,"actualSubdomain":"kwebby","customDomains":["docs.kwebby.com"],"gitSource":{"type":"github","owner":"mintlify-community","repo":"docs-kwebby-e0ca5b7f","deployBranch":"main","contentDirectory":"","isPrivate":true,"mountPath":"","label":""},"entitlements":{"AI_CHAT":{"status":"DISABLED"},"WEB_MCP":{"status":"DISABLED"},"NARRATION":{"status":"DISABLED"}},"buildId":"6ad70b109c07678feae63c0b","clientVersion":"0.0.4111","searchFilterCounts":[{"language":"default","tag":"Kelvin","count":108},{"language":"default","tag":"Gloaming","count":91},{"language":"default","tag":"Frosting","count":73},{"language":"default","tag":"Puggy","count":72},{"language":"default","tag":"Feature guides","count":60},{"language":"default","tag":"Home page","count":58},{"language":"default","tag":"Theme settings","count":38},{"language":"default","tag":"Getting started","count":25},{"language":"default","tag":"More sections","count":25},{"language":"default","tag":"Pages and blog","count":16}]},"assistantConfig":{"enableAskAiButton":false,"enableStarterQuestions":false,"enableContextualStarterQuestions":false,"enableAskAiSearchBar":true},"basePath":"","hasChatPermissions":false,"hasWebMcpPermissions":false,"toggles":[{"name":"kill-isr","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-rbac-roles","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-mintlify-slack","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"agent-integrations-settings","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"rbac-expansion","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-pr-grouping","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"custom-prefix","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"analytics-v7","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"user-flows-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"no-publish-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-onboarding","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"llms-txt-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving-live","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"stripTemperatureMiddleware","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"support-platform-pylon-zendesk","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"snapshot-serving","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"instant-rollback","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications-server","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"granular-notifications","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automations-fable","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fixed-ai-action-pricing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"automation-resolve-merge-conflict","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"scoped-publishing","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"mintql","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"page-level-analytics","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-version-history-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"billing-page-v2","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"full-page-search","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workspace-projects","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"assistant-v5","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"fork-pr-previews","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"revalidation-jwt","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-sso-scim","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"hobby-abuse-scan","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"dashboard-inbox","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-signup","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-dual-write","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"workos-enabled","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"approve-review-flow","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"editor-metadata","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"sso-setup-deadline-banner","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"turbopuffer-serve","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false},{"name":"live-agents","enabled":true,"variant":{"name":"disabled","enabled":false,"feature_enabled":true},"impressionData":false}],"googleFontsInlined":true},"customCss":[],"page":{"pagePath":"gloaming/guides/shop-the-look","slug":"/gloaming/guides/shop-the-look","pageMetadata":{"title":"Shop the look","description":"Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.","href":"/gloaming/guides/shop-the-look"},"description":{"compiledSource":"\"use strict\";\nconst {jsx: _jsx} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n p: \"p\",\n ..._provideComponents(),\n ...props.components\n };\n return _jsx(_components.p, {\n children: \"Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.\"\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\n","frontmatter":{},"scope":{}},"pageType":"default","mdx":{"mdxSource":{"compiledSource":"\"use strict\";const{Fragment:_Fragment,jsx:_jsx,jsxs:_jsxs}=arguments[0];const{useMDXComponents:_provideComponents}=arguments[0];function _createMdxContent(props){const _components={p:`p`,strong:`strong`,..._provideComponents(),...props.components},{Frame,Heading,OptimizedImage}=_components;if(!Frame)_missingMdxReference(`Frame`,true);if(!Heading)_missingMdxReference(`Heading`,true);if(!OptimizedImage)_missingMdxReference(`OptimizedImage`,true);return _jsxs(_Fragment,{children:[_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`1. Choose the photograph.`}),` A portrait photograph of the pieces worn together works best. It is cropped to 4:5, so keep the pieces away from the edges.`]}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`2. Add hotspots.`}),` In the theme editor choose Home page, select Shop the look, and add a Hotspot block per piece (up to 6). Choose the Product, then move the dot with Horizontal position and Vertical position: 0 is the left and top edge, 100 the right and bottom.`]}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`3. Check the dots.`}),` Selecting a Hotspot block in the editor highlights its dot and piece, so you can nudge it onto the piece. The dots stay on the same spot of the photograph on phones and in right-to-left languages.`]}),`\n`,_jsx(Frame,{caption:`Hotspots and the list of pieces`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/shop-the-look.webp?fit=max\u0026auto=format\u0026n=Y7lUE3PaLXfHjaRp\u0026q=85\u0026s=377cec229287000ef9322eec04968905`,alt:`Shop the look`,\"data-og-width\":`2160`,width:`2160`,\"data-og-height\":`1350`,height:`1350`,\"data-path\":`images/vesper/shop-the-look.webp`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/shop-the-look.webp?w=280\u0026fit=max\u0026auto=format\u0026n=Y7lUE3PaLXfHjaRp\u0026q=85\u0026s=fc276cc7fadbb2790d77f92ef5d12881 280w, https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/shop-the-look.webp?w=560\u0026fit=max\u0026auto=format\u0026n=Y7lUE3PaLXfHjaRp\u0026q=85\u0026s=eff2c517786936e8bf9ac6f309d8e59d 560w, https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/shop-the-look.webp?w=840\u0026fit=max\u0026auto=format\u0026n=Y7lUE3PaLXfHjaRp\u0026q=85\u0026s=8ae15db4f8261313244bb55e8399c472 840w, https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/shop-the-look.webp?w=1100\u0026fit=max\u0026auto=format\u0026n=Y7lUE3PaLXfHjaRp\u0026q=85\u0026s=420a737aa139721bd96f5d04842c15d5 1100w, https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/shop-the-look.webp?w=1650\u0026fit=max\u0026auto=format\u0026n=Y7lUE3PaLXfHjaRp\u0026q=85\u0026s=da4ab4b90ecbe4ce8607ff53043b2f43 1650w, https://mintcdn.com/kwebby/Y7lUE3PaLXfHjaRp/images/vesper/shop-the-look.webp?w=2500\u0026fit=max\u0026auto=format\u0026n=Y7lUE3PaLXfHjaRp\u0026q=85\u0026s=c1cc724f7aeb12ee208e22287c48fdd5 2500w`})}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`What shoppers see.`}),` Pressing a dot highlights its piece in the list and moves focus to it. Single-variant pieces that are available get an Add to bag button that opens the bag drawer. Pieces with metal or size options, pre-order and price on request pieces get a View link to their product page.`]}),`\n`,_jsxs(_components.p,{children:[_jsx(_components.strong,{children:`Layout.`}),` Image position on desktop puts the photograph first or second, and Gold frame around the image adds a hairline frame.`]}),`\n`,_jsx(Heading,{level:`2`,id:`in-the-theme-editor`,children:`In the theme editor`}),`\n`,_jsx(Frame,{caption:`1 Shop the look, with its Hotspot blocks · 2 its settings · 3 the preview`,children:_jsx(OptimizedImage,{src:`https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-shop-the-look.webp?fit=max\u0026auto=format\u0026n=ipMVAv6ECVUC3DoM\u0026q=85\u0026s=f11552d40c1526a4a46819f4837f9d27`,alt:`Shop the look in the theme editor`,\"data-og-width\":`1425`,width:`1425`,\"data-og-height\":`840`,height:`840`,\"data-path\":`images/vesper/editor-shop-the-look.webp`,\"data-optimize\":`true`,\"data-opv\":`3`,srcset:`https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-shop-the-look.webp?w=280\u0026fit=max\u0026auto=format\u0026n=ipMVAv6ECVUC3DoM\u0026q=85\u0026s=1ac627b1342b753853045614026797cb 280w, https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-shop-the-look.webp?w=560\u0026fit=max\u0026auto=format\u0026n=ipMVAv6ECVUC3DoM\u0026q=85\u0026s=954aeb9a0ad74e0edcbfcce3570f629b 560w, https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-shop-the-look.webp?w=840\u0026fit=max\u0026auto=format\u0026n=ipMVAv6ECVUC3DoM\u0026q=85\u0026s=bb991cff6a8df305842867d8bce54f3d 840w, https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-shop-the-look.webp?w=1100\u0026fit=max\u0026auto=format\u0026n=ipMVAv6ECVUC3DoM\u0026q=85\u0026s=bd0f12c31d9e6811efa387a1ceba7479 1100w, https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-shop-the-look.webp?w=1650\u0026fit=max\u0026auto=format\u0026n=ipMVAv6ECVUC3DoM\u0026q=85\u0026s=7d4043c45c8eca42f99c49de076f7a2d 1650w, https://mintcdn.com/kwebby/ipMVAv6ECVUC3DoM/images/vesper/editor-shop-the-look.webp?w=2500\u0026fit=max\u0026auto=format\u0026n=ipMVAv6ECVUC3DoM\u0026q=85\u0026s=eaeb66af31e222cfc28c5eef5e2ce036 2500w`})})]})}function MDXContent(props={}){const{wrapper:MDXLayout}={..._provideComponents(),...props.components};return MDXLayout?_jsx(MDXLayout,{...props,children:_jsx(_createMdxContent,{...props})}):_createMdxContent(props)}return{default:MDXContent};function _missingMdxReference(id,component){throw new Error(`Expected `+(component?`component`:`object`)+\" `\"+id+\"` to be defined: you likely forgot to import, pass, or provide it.\")}","frontmatter":{},"scope":{"config":{},"pageMetadata":{"title":"Shop the look","description":"Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.","href":"/gloaming/guides/shop-the-look"}}},"mdxSourceWithNoJs":null},"mdxExtracts":{"tableOfContents":[{"title":"In the theme editor","slug":"in-the-theme-editor","depth":2,"children":[]}],"codeExamples":{}},"jsLinks":[],"subdomain":"kwebby","siteName":"Kwebby Documentation","title":"Shop the look - Kwebby Documentation","navMaps":{"firstHrefInVersion":{},"firstHrefInLanguage":{}},"lastModified":"2026-10-20T06:33:00.892Z","originalFileLocation":"gloaming/guides/shop-the-look.mdx"},"headHtml":"\u003cscript data-mint-head>(function(){var d=document.documentElement,p=null;if(!p){try{p=localStorage.getItem(\"isDarkMode\")}catch(e){}if(p==='true')p='dark';else if(p==='false')p='light';if(p!=='light'\u0026\u0026p!=='dark'\u0026\u0026p!=='system')p=\"system\"}var r=p==='system'?(matchMedia(\"(prefers-color-scheme: dark)\").matches?'dark':'light'):p;d.classList.remove(r==='dark'?'light':'dark');d.classList.add(r);d.setAttribute(\"data-theme-preference\",p)})();\u003c/script>\u003cmeta data-mint-head name=\"description\" content=\"Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.\">\u003cmeta data-mint-head name=\"application-name\" content=\"Kwebby Documentation\">\u003cmeta data-mint-head name=\"generator\" content=\"Mintlify\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon/android-chrome-192x192.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"apple-touch-icon\" type=\"image/png\" sizes=\"180x180\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon/apple-touch-icon.png\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon/favicon-16x16.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon/favicon-32x32.png\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon/favicon.ico\" media=\"(prefers-color-scheme: light)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"192x192\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon-dark/android-chrome-192x192.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"16x16\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon-dark/favicon-16x16.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"icon\" type=\"image/png\" sizes=\"32x32\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon-dark/favicon-32x32.png\" media=\"(prefers-color-scheme: dark)\">\u003clink data-mint-head rel=\"shortcut icon\" type=\"image/x-icon\" href=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon-dark/favicon.ico\" media=\"(prefers-color-scheme: dark)\">\u003cmeta data-mint-head property=\"og:title\" content=\"Shop the look - Kwebby Documentation\">\u003cmeta data-mint-head property=\"og:description\" content=\"Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.\">\u003cmeta data-mint-head property=\"og:site_name\" content=\"Kwebby Documentation\">\u003cmeta data-mint-head property=\"og:url\" content=\"https://docs.kwebby.com/gloaming/guides/shop-the-look\">\u003cmeta data-mint-head property=\"og:type\" content=\"website\">\u003cmeta data-mint-head property=\"og:image\" content=\"https://kwebby.mintlify.site/_mintlify/api/og/v2?division=Feature+guides\u0026amp;title=Shop+the+look\u0026amp;description=Place+hotspots+on+a+photograph+of+pieces+being+worn%2C+linked+to+a+list+where+shoppers+add+them+to+the+bag.\u0026amp;theme=c66c1e6a00f2049f134dbc30\u0026amp;signature=9bb9ff3a9c1b84d3350ed371a83a6c4fc08fd563dd48259fb2ccfdaf3d222f09\">\u003cmeta data-mint-head property=\"og:image:width\" content=\"1200\">\u003cmeta data-mint-head property=\"og:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"twitter:card\" content=\"summary_large_image\">\u003cmeta data-mint-head name=\"twitter:title\" content=\"Shop the look - Kwebby Documentation\">\u003cmeta data-mint-head name=\"twitter:description\" content=\"Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.\">\u003cmeta data-mint-head name=\"twitter:image\" content=\"https://kwebby.mintlify.site/_mintlify/api/og/v2?division=Feature+guides\u0026amp;title=Shop+the+look\u0026amp;description=Place+hotspots+on+a+photograph+of+pieces+being+worn%2C+linked+to+a+list+where+shoppers+add+them+to+the+bag.\u0026amp;theme=c66c1e6a00f2049f134dbc30\u0026amp;signature=9bb9ff3a9c1b84d3350ed371a83a6c4fc08fd563dd48259fb2ccfdaf3d222f09\">\u003cmeta data-mint-head name=\"twitter:image:width\" content=\"1200\">\u003cmeta data-mint-head name=\"twitter:image:height\" content=\"630\">\u003cmeta data-mint-head name=\"msapplication-config\" content=\"/mintlify-assets/_mintlify/favicons/kwebby/qtPMsnKhF6QU_9XG/_generated/favicon/browserconfig.xml\">\u003cmeta data-mint-head name=\"apple-mobile-web-app-title\" content=\"Kwebby Documentation\">\u003cmeta data-mint-head name=\"msapplication-TileColor\" content=\"#F97200\">\u003clink data-mint-head rel=\"canonical\" href=\"https://docs.kwebby.com/gloaming/guides/shop-the-look\">\u003clink data-mint-head rel=\"alternate\" type=\"application/xml\" href=\"/sitemap.xml\">\u003clink data-mint-head rel=\"alternate\" type=\"text/markdown\" href=\"/gloaming/guides/shop-the-look.md\">\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https://docs.kwebby.com/#organization\",\"name\":\"Kwebby Documentation\",\"url\":\"https://docs.kwebby.com\",\"logo\":{\"@type\":\"ImageObject\",\"url\":\"https://mintcdn.com/kwebby/TpZ5Zd9XFi4SxDRE/images/kwebby-yellow-black.png?fit=max\u0026auto=format\u0026n=TpZ5Zd9XFi4SxDRE\u0026q=85\u0026s=8d72008e1f895697c1fbd9b26d1b536d\"}},{\"@type\":\"WebSite\",\"@id\":\"https://docs.kwebby.com#website\",\"name\":\"Kwebby Documentation\",\"url\":\"https://docs.kwebby.com\",\"publisher\":{\"@id\":\"https://docs.kwebby.com/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https://docs.kwebby.com/gloaming/guides/shop-the-look#webpage\",\"url\":\"https://docs.kwebby.com/gloaming/guides/shop-the-look\",\"name\":\"Shop the look\",\"description\":\"Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.\",\"dateModified\":\"2026-10-20T06:33:00.892Z\",\"isPartOf\":{\"@id\":\"https://docs.kwebby.com#website\"},\"breadcrumb\":{\"@id\":\"https://docs.kwebby.com/gloaming/guides/shop-the-look#breadcrumb\"}},{\"@type\":\"BreadcrumbList\",\"@id\":\"https://docs.kwebby.com/gloaming/guides/shop-the-look#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Feature guides\",\"item\":\"https://docs.kwebby.com/gloaming/guides/metal-swatches\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Shop the look\",\"item\":\"https://docs.kwebby.com/gloaming/guides/shop-the-look\"}]},{\"@type\":[\"Article\",\"TechArticle\"],\"@id\":\"https://docs.kwebby.com/gloaming/guides/shop-the-look#article\",\"headline\":\"Shop the look\",\"name\":\"Shop the look\",\"description\":\"Place hotspots on a photograph of pieces being worn, linked to a list where shoppers add them to the bag.\",\"url\":\"https://docs.kwebby.com/gloaming/guides/shop-the-look\",\"mainEntityOfPage\":{\"@id\":\"https://docs.kwebby.com/gloaming/guides/shop-the-look#webpage\"},\"dateModified\":\"2026-10-20T06:33:00.892Z\",\"publisher\":{\"@id\":\"https://docs.kwebby.com/#organization\"},\"isPartOf\":{\"@id\":\"https://docs.kwebby.com#website\"}}]}\u003c/script>\u003cscript data-mint-head type=\"application/ld+json\">{\"@context\":\"https://schema.org\",\"@type\":\"WebSite\",\"name\":\"Kwebby Documentation\",\"publisher\":{\"@type\":\"Organization\",\"name\":\"Kwebby Documentation\"},\"provider\":{\"@type\":\"Organization\",\"name\":\"Mintlify\",\"url\":\"https://mintlify.com\"}}\u003c/script>","agentPointerHref":"/gloaming/guides/shop-the-look.md","siteName":"Kwebby Documentation","nav":{"global":null,"tabs":[{"tab":"Home","pages":[{"title":"Home","href":""}]},{"tab":"Puggy","pages":[{"title":"Puggy","href":"/puggy/getting-started/introduction"}]},{"tab":"Frosting","pages":[{"title":"Frosting","href":"/frosting/getting-started/introduction"}]},{"tab":"Gloaming","groups":[{"group":"Getting started","icon":"rocket","pages":[{"title":"Welcome to Gloaming","href":"/gloaming/getting-started/introduction"},{"title":"Install the theme","href":"/gloaming/getting-started/install"},{"title":"Theme editor basics","href":"/gloaming/getting-started/theme-editor"},{"title":"Import the demo content","href":"/gloaming/getting-started/demo-content"},{"title":"Set up your products","href":"/gloaming/getting-started/set-up-products"},{"title":"Update the theme","href":"/gloaming/getting-started/updating"}]},{"group":"Theme settings","icon":"sliders","pages":[{"title":"Logo and favicon","href":"/gloaming/theme-settings/logo-and-favicon"},{"title":"Colors","href":"/gloaming/theme-settings/colors"},{"title":"Typography","href":"/gloaming/theme-settings/typography"},{"title":"Layout","href":"/gloaming/theme-settings/layout"},{"title":"Product cards","href":"/gloaming/theme-settings/product-cards"},{"title":"Cart","href":"/gloaming/theme-settings/cart"},{"title":"Search","href":"/gloaming/theme-settings/search"},{"title":"Social media","href":"/gloaming/theme-settings/social-media"}]},{"group":"Header and footer","icon":"bars","pages":[{"title":"Announcement bar","href":"/gloaming/sections/announcement-bar"},{"title":"Footer","href":"/gloaming/sections/footer"},{"title":"Header","href":"/gloaming/sections/header"}]},{"group":"Home page","icon":"house","pages":[{"title":"Before and after","href":"/gloaming/sections/before-and-after"},{"title":"Boutique and event","href":"/gloaming/sections/boutique-and-event"},{"title":"Collection list (arched)","href":"/gloaming/sections/collection-list-arched"},{"title":"Featured collection","href":"/gloaming/sections/featured-collection"},{"title":"Gallery mosaic","href":"/gloaming/sections/gallery-mosaic"},{"title":"Hero film","href":"/gloaming/sections/hero-film"},{"title":"Journal (home page)","href":"/gloaming/sections/journal-home-page"},{"title":"Newsletter","href":"/gloaming/sections/newsletter"},{"title":"Pledges","href":"/gloaming/sections/pledges"},{"title":"Press","href":"/gloaming/sections/press"},{"title":"Recently viewed","href":"/gloaming/sections/recently-viewed"},{"title":"Sale countdown","href":"/gloaming/sections/sale-countdown"},{"title":"Shop the look","href":"/gloaming/sections/shop-the-look"},{"title":"Slideshow","href":"/gloaming/sections/slideshow"},{"title":"Statement","href":"/gloaming/sections/statement"},{"title":"Story","href":"/gloaming/sections/story"},{"title":"Vertical films","href":"/gloaming/sections/vertical-films"}]},{"group":"Product page","icon":"gem","pages":[{"title":"Featured product","href":"/gloaming/sections/featured-product"},{"title":"Product information","href":"/gloaming/sections/product-information"},{"title":"Product recommendations","href":"/gloaming/sections/product-recommendations"},{"title":"Quick view","href":"/gloaming/sections/quick-view"}]},{"group":"Collections and search","icon":"magnifying-glass","pages":[{"title":"Collection","href":"/gloaming/sections/collection"},{"title":"Collections list page","href":"/gloaming/sections/collections-list-page"},{"title":"Search results","href":"/gloaming/sections/search-results"},{"title":"Search suggestions","href":"/gloaming/sections/search-suggestions"}]},{"group":"Cart","icon":"bag-shopping","pages":[{"title":"Bag drawer","href":"/gloaming/sections/bag-drawer"},{"title":"Cart","href":"/gloaming/sections/cart"},{"title":"Goes well with","href":"/gloaming/sections/goes-well-with"}]},{"group":"About and content pages","icon":"file-lines","pages":[{"title":"Call-to-action band","href":"/gloaming/sections/call-to-action-band"},{"title":"Chapter","href":"/gloaming/sections/chapter"},{"title":"Contact form","href":"/gloaming/sections/contact-form"},{"title":"Figures","href":"/gloaming/sections/figures"},{"title":"Gallery","href":"/gloaming/sections/gallery"},{"title":"Makers","href":"/gloaming/sections/makers"},{"title":"Numbered steps","href":"/gloaming/sections/numbered-steps"},{"title":"Page","href":"/gloaming/sections/page"},{"title":"Page hero","href":"/gloaming/sections/page-hero"},{"title":"Press quotes","href":"/gloaming/sections/press-quotes"},{"title":"Questions and answers","href":"/gloaming/sections/questions-and-answers"},{"title":"Timeline","href":"/gloaming/sections/timeline"}]},{"group":"Journal, boutiques and events","icon":"calendar","pages":[{"title":"Boutiques","href":"/gloaming/sections/boutiques"},{"title":"Events","href":"/gloaming/sections/events"},{"title":"Events blog","href":"/gloaming/sections/events-blog"},{"title":"Journal","href":"/gloaming/sections/journal"},{"title":"Journal story","href":"/gloaming/sections/journal-story"}]},{"group":"Account, trade and utility pages","icon":"user","pages":[{"title":"Account","href":"/gloaming/sections/account"},{"title":"Page not found","href":"/gloaming/sections/page-not-found"},{"title":"Password page","href":"/gloaming/sections/password-page"},{"title":"Quick order list","href":"/gloaming/sections/quick-order-list"}]},{"group":"Overlays","icon":"window-restore","pages":[{"title":"Age check","href":"/gloaming/sections/age-check"},{"title":"Spin wheel","href":"/gloaming/sections/spin-wheel"}]},{"group":"More sections","icon":"puzzle-piece","pages":[{"title":"Custom Liquid","href":"/gloaming/sections/custom-liquid"},{"title":"Image with text","href":"/gloaming/sections/image-with-text"},{"title":"Rich text","href":"/gloaming/sections/rich-text"}]},{"group":"Feature guides","icon":"book-open","pages":[{"title":"Metal swatches","href":"/gloaming/guides/metal-swatches"},{"title":"Ring sizes and the size guide","href":"/gloaming/guides/ring-sizes-and-size-guide"},{"title":"Engraving and gift options","href":"/gloaming/guides/engraving-and-gift-options"},{"title":"Gift wrapping, notes and suggestions","href":"/gloaming/guides/gift-wrapping-and-the-bag"},{"title":"Pre-order","href":"/gloaming/guides/pre-order"},{"title":"Price on request and enquiries","href":"/gloaming/guides/price-on-request"},{"title":"Quantity breaks and trade orders","href":"/gloaming/guides/quantity-breaks-and-trade-orders"},{"title":"Pickup in boutiques","href":"/gloaming/guides/pickup-in-boutiques"},{"title":"Filters with Search \u0026 Discovery","href":"/gloaming/guides/search-and-discovery-filters"},{"title":"Spin wheel","href":"/gloaming/guides/spin-wheel"},{"title":"Honest countdowns","href":"/gloaming/guides/honest-countdowns"},{"title":"Vertical films","description":"Prepare and add short portrait films of pieces being worn, and how the looping strip behaves.","href":"/gloaming/guides/vertical-films"},{"title":"Shop the look","href":"/gloaming/guides/shop-the-look"},{"title":"Boutiques and events","description":"Boutique cards with hours and directions, and salon events from an events blog with dates, places and replies.","href":"/gloaming/guides/boutiques-and-events"},{"title":"Menus and the drawer mega menu","href":"/gloaming/guides/menus-and-mega-menu"},{"title":"Pages and templates to create","href":"/gloaming/guides/pages-and-templates"},{"title":"Languages and right-to-left","href":"/gloaming/guides/languages-and-right-to-left"},{"title":"Metafields reference","href":"/gloaming/guides/metafields-reference"}]},{"group":"Help","icon":"life-ring","pages":[{"title":"Support","href":"/gloaming/help/support"},{"title":"Troubleshooting","href":"/gloaming/help/troubleshooting"}]}]},{"tab":"Kelvin","pages":[{"title":"Kelvin","href":"/kelvin/getting-started/introduction"}]}]},"basePath":"","title":"Shop the look - Kwebby Documentation","buildId":"dpl_DqYu5MPb49gWBBbUGgpHQUmCHY3P","deploymentId":"dpl_DqYu5MPb49gWBBbUGgpHQUmCHY3P","dynamics":["07c022d89b","a74be98ba7"],"chunks":["Frame-u3J1-UOn.js","DynamicMarkdown-B-f2cqXQ.js","zoom-image-lightbox-DTFzvaXJ.js","lightbox-handle-r17bVUz3.js"]}