[{"data":1,"prerenderedAt":1172},["ShallowReactive",2],{"navigation_docs":3,"-docs-storefront-sdk-resources-products-in-images":357,"-docs-storefront-sdk-resources-products-in-images-surround":1167,"docs-site-config":1157},[4,74,135,139,161,195,273],{"title":5,"path":6,"stem":7,"children":8},"Assets API","\u002Fdocs\u002Fassets","docs\u002Fassets\u002Findex",[9,10,32,57],{"title":5,"path":6,"stem":7},{"title":11,"path":12,"stem":13,"children":14,"page":31},"Getting Started","\u002Fdocs\u002Fassets\u002Fgetting-started","docs\u002Fassets\u002F1.getting-started",[15,19,23,27],{"title":16,"path":17,"stem":18},"Base URL","\u002Fdocs\u002Fassets\u002Fgetting-started\u002Fbase-url","docs\u002Fassets\u002F1.getting-started\u002F1.base-url",{"title":20,"path":21,"stem":22},"Important Notes","\u002Fdocs\u002Fassets\u002Fgetting-started\u002Fimportant-notes","docs\u002Fassets\u002F1.getting-started\u002F2.important-notes",{"title":24,"path":25,"stem":26},"URL Format","\u002Fdocs\u002Fassets\u002Fgetting-started\u002Furl-format","docs\u002Fassets\u002F1.getting-started\u002F3.url-format",{"title":28,"path":29,"stem":30},"Custom Domains","\u002Fdocs\u002Fassets\u002Fgetting-started\u002Fcustom-domains","docs\u002Fassets\u002F1.getting-started\u002F4.custom-domains",false,{"title":33,"path":34,"stem":35,"children":36,"page":31},"Usage","\u002Fdocs\u002Fassets\u002Fusage","docs\u002Fassets\u002F2.usage",[37,41,45,49,53],{"title":38,"path":39,"stem":40},"Transforms","\u002Fdocs\u002Fassets\u002Fusage\u002Ftransforms","docs\u002Fassets\u002F2.usage\u002F1.transforms",{"title":42,"path":43,"stem":44},"Caching","\u002Fdocs\u002Fassets\u002Fusage\u002Fcaching","docs\u002Fassets\u002F2.usage\u002F2.caching",{"title":46,"path":47,"stem":48},"Recipes","\u002Fdocs\u002Fassets\u002Fusage\u002Frecipes","docs\u002Fassets\u002F2.usage\u002F3.recipes",{"title":50,"path":51,"stem":52},"Best Practices","\u002Fdocs\u002Fassets\u002Fusage\u002Fbest-practices","docs\u002Fassets\u002F2.usage\u002F4.best-practices",{"title":54,"path":55,"stem":56},"Reference","\u002Fdocs\u002Fassets\u002Fusage\u002Freference","docs\u002Fassets\u002F2.usage\u002F5.reference",{"title":58,"path":59,"stem":60,"children":61,"page":31},"Integration","\u002Fdocs\u002Fassets\u002Fintegration","docs\u002Fassets\u002F3.integration",[62,66,70],{"title":63,"path":64,"stem":65},"Nuxt","\u002Fdocs\u002Fassets\u002Fintegration\u002Fnuxt","docs\u002Fassets\u002F3.integration\u002F1.nuxt",{"title":67,"path":68,"stem":69},"Next.js","\u002Fdocs\u002Fassets\u002Fintegration\u002Fnextjs","docs\u002Fassets\u002F3.integration\u002F2.nextjs",{"title":71,"path":72,"stem":73},"Plain HTML","\u002Fdocs\u002Fassets\u002Fintegration\u002Fhtml","docs\u002Fassets\u002F3.integration\u002F3.html",{"title":75,"path":76,"stem":77,"children":78},"Avvyr CMS","\u002Fdocs\u002Fcms","docs\u002Fcms\u002Findex",[79,80,92,105,118,131],{"title":75,"path":76,"stem":77},{"title":11,"path":81,"stem":82,"children":83,"page":31},"\u002Fdocs\u002Fcms\u002Fgetting-started","docs\u002Fcms\u002F1.getting-started",[84,88],{"title":85,"path":86,"stem":87},"Quickstart","\u002Fdocs\u002Fcms\u002Fgetting-started\u002Fquickstart","docs\u002Fcms\u002F1.getting-started\u002F1.quickstart",{"title":89,"path":90,"stem":91},"Keys and access","\u002Fdocs\u002Fcms\u002Fgetting-started\u002Fkeys-and-access","docs\u002Fcms\u002F1.getting-started\u002F2.keys-and-access",{"title":93,"path":94,"stem":95,"children":96,"page":31},"Content Model","\u002Fdocs\u002Fcms\u002Fcontent-model","docs\u002Fcms\u002F2.content-model",[97,101],{"title":98,"path":99,"stem":100},"Types and fields","\u002Fdocs\u002Fcms\u002Fcontent-model\u002Ftypes-and-fields","docs\u002Fcms\u002F2.content-model\u002F1.types-and-fields",{"title":102,"path":103,"stem":104},"Entries and publishing","\u002Fdocs\u002Fcms\u002Fcontent-model\u002Fentries-and-publishing","docs\u002Fcms\u002F2.content-model\u002F2.entries-and-publishing",{"title":106,"path":107,"stem":108,"children":109,"page":31},"Delivery","\u002Fdocs\u002Fcms\u002Fdelivery","docs\u002Fcms\u002F3.delivery",[110,114],{"title":111,"path":112,"stem":113},"Delivery API","\u002Fdocs\u002Fcms\u002Fdelivery\u002Fdelivery-api","docs\u002Fcms\u002F3.delivery\u002F1.delivery-api",{"title":115,"path":116,"stem":117},"Preview and live editing","\u002Fdocs\u002Fcms\u002Fdelivery\u002Fpreview","docs\u002Fcms\u002F3.delivery\u002F2.preview",{"title":119,"path":120,"stem":121,"children":122,"page":31},"Frameworks","\u002Fdocs\u002Fcms\u002Fframeworks","docs\u002Fcms\u002F4.frameworks",[123,127],{"title":124,"path":125,"stem":126},"JavaScript client","\u002Fdocs\u002Fcms\u002Fframeworks\u002Fjavascript-client","docs\u002Fcms\u002F4.frameworks\u002F1.javascript-client",{"title":128,"path":129,"stem":130},"Nuxt layer","\u002Fdocs\u002Fcms\u002Fframeworks\u002Fnuxt","docs\u002Fcms\u002F4.frameworks\u002F2.nuxt",{"title":132,"path":133,"stem":134},"Management API","\u002Fdocs\u002Fcms\u002Fmanagement-api","docs\u002Fcms\u002F5.management-api",{"title":136,"path":137,"stem":138},"Early Access","\u002Fdocs\u002Fearly-access","docs\u002Fearly-access",{"title":140,"path":141,"stem":142,"children":143},"Events API","\u002Fdocs\u002Fevents","docs\u002Fevents\u002Findex",[144,145],{"title":140,"path":141,"stem":142},{"title":11,"path":146,"stem":147,"children":148,"page":31},"\u002Fdocs\u002Fevents\u002Fgetting-started","docs\u002Fevents\u002F1.getting-started",[149,153,157],{"title":150,"path":151,"stem":152},"Subscribing","\u002Fdocs\u002Fevents\u002Fgetting-started\u002Fsubscribing","docs\u002Fevents\u002F1.getting-started\u002F1.subscribing",{"title":154,"path":155,"stem":156},"Event Delivery","\u002Fdocs\u002Fevents\u002Fgetting-started\u002Fevent-delivery","docs\u002Fevents\u002F1.getting-started\u002F2.event-delivery",{"title":158,"path":159,"stem":160},"Event Reference","\u002Fdocs\u002Fevents\u002Fgetting-started\u002Fevent-reference","docs\u002Fevents\u002F1.getting-started\u002F3.event-reference",{"title":162,"path":163,"stem":164,"children":165},"Integrations API","\u002Fdocs\u002Fintegrations","docs\u002Fintegrations\u002Findex",[166,167],{"title":162,"path":163,"stem":164},{"title":11,"path":168,"stem":169,"children":170,"page":31},"\u002Fdocs\u002Fintegrations\u002Fgetting-started","docs\u002Fintegrations\u002F1.getting-started",[171,175,179,183,187,191],{"title":172,"path":173,"stem":174},"Why Use It?","\u002Fdocs\u002Fintegrations\u002Fgetting-started\u002Fwhy-integrations-api","docs\u002Fintegrations\u002F1.getting-started\u002F1.why-integrations-api",{"title":176,"path":177,"stem":178},"Use Cases","\u002Fdocs\u002Fintegrations\u002Fgetting-started\u002Fwho-is-it-for","docs\u002Fintegrations\u002F1.getting-started\u002F2.who-is-it-for",{"title":180,"path":181,"stem":182},"Pre-built Connectors","\u002Fdocs\u002Fintegrations\u002Fgetting-started\u002Fpre-built-integrations","docs\u002Fintegrations\u002F1.getting-started\u002F3.pre-built-integrations",{"title":184,"path":185,"stem":186},"Custom Inbound","\u002Fdocs\u002Fintegrations\u002Fgetting-started\u002Fcustom-inbound-api","docs\u002Fintegrations\u002F1.getting-started\u002F4.custom-inbound-api",{"title":188,"path":189,"stem":190},"Event Lifecycle","\u002Fdocs\u002Fintegrations\u002Fgetting-started\u002Fevent-lifecycle","docs\u002Fintegrations\u002F1.getting-started\u002F5.event-lifecycle",{"title":192,"path":193,"stem":194},"API Endpoints","\u002Fdocs\u002Fintegrations\u002Fgetting-started\u002Fmanagement-api-endpoints","docs\u002Fintegrations\u002F1.getting-started\u002F6.management-api-endpoints",{"title":196,"path":197,"stem":198,"children":199},"MCP Server","\u002Fdocs\u002Fmcp","docs\u002Fmcp\u002Findex",[200,201,225,234,244],{"title":196,"path":197,"stem":198},{"title":11,"path":202,"stem":203,"children":204,"page":31},"\u002Fdocs\u002Fmcp\u002Fgetting-started","docs\u002Fmcp\u002F1.getting-started",[205,209,213,217,221],{"title":206,"path":207,"stem":208},"Claude","\u002Fdocs\u002Fmcp\u002Fgetting-started\u002Fclaude","docs\u002Fmcp\u002F1.getting-started\u002F1.claude",{"title":210,"path":211,"stem":212},"Claude Code","\u002Fdocs\u002Fmcp\u002Fgetting-started\u002Fclaude-code","docs\u002Fmcp\u002F1.getting-started\u002F2.claude-code",{"title":214,"path":215,"stem":216},"VS Code","\u002Fdocs\u002Fmcp\u002Fgetting-started\u002Fvscode","docs\u002Fmcp\u002F1.getting-started\u002F3.vscode",{"title":218,"path":219,"stem":220},"Cursor","\u002Fdocs\u002Fmcp\u002Fgetting-started\u002Fcursor","docs\u002Fmcp\u002F1.getting-started\u002F4.cursor",{"title":222,"path":223,"stem":224},"Verify the connection","\u002Fdocs\u002Fmcp\u002Fgetting-started\u002Fverify","docs\u002Fmcp\u002F1.getting-started\u002F5.verify",{"title":226,"path":227,"stem":228,"children":229,"page":31},"Docs Server","\u002Fdocs\u002Fmcp\u002Fdocs-server","docs\u002Fmcp\u002F2.docs-server",[230],{"title":231,"path":232,"stem":233},"Docs server tools","\u002Fdocs\u002Fmcp\u002Fdocs-server\u002Ftools","docs\u002Fmcp\u002F2.docs-server\u002F1.tools",{"title":235,"path":236,"stem":237,"children":238},"API Server","\u002Fdocs\u002Fmcp\u002Fapi-server","docs\u002Fmcp\u002F3.api-server\u002Findex",[239,240],{"title":235,"path":236,"stem":237},{"title":241,"path":242,"stem":243},"Available tools","\u002Fdocs\u002Fmcp\u002Fapi-server\u002Ftools","docs\u002Fmcp\u002F3.api-server\u002F1.tools",{"title":245,"path":246,"stem":247,"children":248,"page":31},"Examples","\u002Fdocs\u002Fmcp\u002Fexamples","docs\u002Fmcp\u002F4.examples",[249,253,257,261,265,269],{"title":250,"path":251,"stem":252},"Exploring an API","\u002Fdocs\u002Fmcp\u002Fexamples\u002Fexploring-an-api","docs\u002Fmcp\u002F4.examples\u002F1.exploring-an-api",{"title":254,"path":255,"stem":256},"Building a Feature","\u002Fdocs\u002Fmcp\u002Fexamples\u002Fbuilding-a-feature","docs\u002Fmcp\u002F4.examples\u002F2.building-a-feature",{"title":258,"path":259,"stem":260},"Understanding Models","\u002Fdocs\u002Fmcp\u002Fexamples\u002Funderstanding-models","docs\u002Fmcp\u002F4.examples\u002F3.understanding-models",{"title":262,"path":263,"stem":264},"Code Review","\u002Fdocs\u002Fmcp\u002Fexamples\u002Fcode-review","docs\u002Fmcp\u002F4.examples\u002F4.code-review",{"title":266,"path":267,"stem":268},"Combining MCP Servers","\u002Fdocs\u002Fmcp\u002Fexamples\u002Fmulti-mcp","docs\u002Fmcp\u002F4.examples\u002F5.multi-mcp",{"title":270,"path":271,"stem":272},"Tips","\u002Fdocs\u002Fmcp\u002Fexamples\u002Ftips","docs\u002Fmcp\u002F4.examples\u002F6.tips",{"title":274,"path":275,"stem":276,"children":277,"page":31},"Storefront SDK","\u002Fdocs\u002Fstorefront-sdk","docs\u002Fstorefront-sdk",[278,290,323,338],{"title":11,"path":279,"stem":280,"children":281,"page":31},"\u002Fdocs\u002Fstorefront-sdk\u002Fgetting-started","docs\u002Fstorefront-sdk\u002F1.getting-started",[282,286],{"title":283,"path":284,"stem":285},"Installation","\u002Fdocs\u002Fstorefront-sdk\u002Fgetting-started\u002Finstallation","docs\u002Fstorefront-sdk\u002F1.getting-started\u002F1.installation",{"title":287,"path":288,"stem":289},"Configuration","\u002Fdocs\u002Fstorefront-sdk\u002Fgetting-started\u002Fconfiguration","docs\u002Fstorefront-sdk\u002F1.getting-started\u002F2.configuration",{"title":291,"path":292,"stem":293,"children":294,"page":31},"Resources","\u002Fdocs\u002Fstorefront-sdk\u002Fresources","docs\u002Fstorefront-sdk\u002F2.resources",[295,299,303,307,311,315,319],{"title":296,"path":297,"stem":298},"Products","\u002Fdocs\u002Fstorefront-sdk\u002Fresources\u002Fproducts","docs\u002Fstorefront-sdk\u002F2.resources\u002F1.products",{"title":300,"path":301,"stem":302},"Cart","\u002Fdocs\u002Fstorefront-sdk\u002Fresources\u002Fcart","docs\u002Fstorefront-sdk\u002F2.resources\u002F2.cart",{"title":304,"path":305,"stem":306},"Auth","\u002Fdocs\u002Fstorefront-sdk\u002Fresources\u002Fauth","docs\u002Fstorefront-sdk\u002F2.resources\u002F3.auth",{"title":308,"path":309,"stem":310},"Checkout & Shipping","\u002Fdocs\u002Fstorefront-sdk\u002Fresources\u002Fcheckout-shipping","docs\u002Fstorefront-sdk\u002F2.resources\u002F4.checkout-shipping",{"title":312,"path":313,"stem":314},"Orders, Returns & Reviews","\u002Fdocs\u002Fstorefront-sdk\u002Fresources\u002Forders-returns-reviews","docs\u002Fstorefront-sdk\u002F2.resources\u002F5.orders-returns-reviews",{"title":316,"path":317,"stem":318},"Customer assistant","\u002Fdocs\u002Fstorefront-sdk\u002Fresources\u002Fassistant","docs\u002Fstorefront-sdk\u002F2.resources\u002F6.assistant",{"title":320,"path":321,"stem":322},"Products in images","\u002Fdocs\u002Fstorefront-sdk\u002Fresources\u002Fproducts-in-images","docs\u002Fstorefront-sdk\u002F2.resources\u002F7.products-in-images",{"title":128,"path":324,"stem":325,"children":326,"page":31},"\u002Fdocs\u002Fstorefront-sdk\u002Fnuxt-layer","docs\u002Fstorefront-sdk\u002F3.nuxt-layer",[327,331,335],{"title":328,"path":329,"stem":330},"Overview","\u002Fdocs\u002Fstorefront-sdk\u002Fnuxt-layer\u002Foverview","docs\u002Fstorefront-sdk\u002F3.nuxt-layer\u002F1.overview",{"title":332,"path":333,"stem":334},"Composables","\u002Fdocs\u002Fstorefront-sdk\u002Fnuxt-layer\u002Fcomposables","docs\u002Fstorefront-sdk\u002F3.nuxt-layer\u002F2.composables",{"title":316,"path":336,"stem":337},"\u002Fdocs\u002Fstorefront-sdk\u002Fnuxt-layer\u002Fassistant","docs\u002Fstorefront-sdk\u002F3.nuxt-layer\u002F3.assistant",{"title":67,"path":339,"stem":340,"children":341,"page":31},"\u002Fdocs\u002Fstorefront-sdk\u002Fnextjs","docs\u002Fstorefront-sdk\u002F4.nextjs",[342,345,349,353],{"title":328,"path":343,"stem":344},"\u002Fdocs\u002Fstorefront-sdk\u002Fnextjs\u002Foverview","docs\u002Fstorefront-sdk\u002F4.nextjs\u002F1.overview",{"title":346,"path":347,"stem":348},"Hooks","\u002Fdocs\u002Fstorefront-sdk\u002Fnextjs\u002Fhooks","docs\u002Fstorefront-sdk\u002F4.nextjs\u002F2.hooks",{"title":350,"path":351,"stem":352},"Server helpers and proxy","\u002Fdocs\u002Fstorefront-sdk\u002Fnextjs\u002Fserver","docs\u002Fstorefront-sdk\u002F4.nextjs\u002F3.server",{"title":354,"path":355,"stem":356},"Components","\u002Fdocs\u002Fstorefront-sdk\u002Fnextjs\u002Fcomponents","docs\u002Fstorefront-sdk\u002F4.nextjs\u002F4.components",{"id":358,"title":320,"body":359,"description":1155,"extension":1156,"links":1157,"meta":1158,"navigation":541,"path":321,"seo":1165,"stem":322,"__hash__":1166},"docs\u002Fdocs\u002Fstorefront-sdk\u002F2.resources\u002F7.products-in-images.md",{"type":360,"value":361,"toc":1148},"minimark",[362,371,379,382,387,390,617,628,632,635,731,738,742,753,994,1001,1005,1018,1094,1108,1112,1133,1144],[363,364,365,366,370],"p",{},"Access via ",[367,368,369],"code",{},"client.assets",".",[363,372,373,374,378],{},"A merchant can mark the products shown in an image in the media library: the sofa, the rug and the lamp in a room photo. Each mark is a ",[375,376,377],"strong",{},"hotspot",", a point on the image and the product it shows. Use them for an image feed on the product page (\"see it at home\"), a shoppable campaign image, or a \"products in this image\" overlay.",[363,380,381],{},"Hotspots are read separately from the product. The product page renders without them, and you load them afterwards, so they never delay the first paint.",[383,384,386],"h2",{"id":385},"images-where-a-product-appears","Images where a product appears",[363,388,389],{},"Pass every variant id of the product page, so an image tagged with any variant is included:",[391,392,397],"pre",{"className":393,"code":394,"language":395,"meta":396,"style":396},"language-ts shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const product = await client.products.getByHandle('valen-sofa')\nconst group = product.variantGroupId ? await client.products.getVariantGroup(product.variantGroupId) : [product]\nconst variantIds = group.map((p) => p.productId)\n\nconst { data, pagination } = await client.assets.list({ productIds: variantIds, limit: 12 })\n\u002F\u002F → data: [{ id, url, path, name, width, height, hotspots: [{ id, x, y, productId, sku, label }] }]\n","ts","",[367,398,399,449,497,536,543,610],{"__ignoreMap":396},[400,401,404,408,412,416,420,423,425,428,430,434,437,440,444,446],"span",{"class":402,"line":403},"line",1,[400,405,407],{"class":406},"spNyl","const",[400,409,411],{"class":410},"sTEyZ"," product ",[400,413,415],{"class":414},"sMK4o","=",[400,417,419],{"class":418},"s7zQu"," await",[400,421,422],{"class":410}," client",[400,424,370],{"class":414},[400,426,427],{"class":410},"products",[400,429,370],{"class":414},[400,431,433],{"class":432},"s2Zo4","getByHandle",[400,435,436],{"class":410},"(",[400,438,439],{"class":414},"'",[400,441,443],{"class":442},"sfazB","valen-sofa",[400,445,439],{"class":414},[400,447,448],{"class":410},")\n",[400,450,452,454,457,459,462,464,467,470,472,474,476,478,480,483,486,488,491,494],{"class":402,"line":451},2,[400,453,407],{"class":406},[400,455,456],{"class":410}," group ",[400,458,415],{"class":414},[400,460,461],{"class":410}," product",[400,463,370],{"class":414},[400,465,466],{"class":410},"variantGroupId ",[400,468,469],{"class":414},"?",[400,471,419],{"class":418},[400,473,422],{"class":410},[400,475,370],{"class":414},[400,477,427],{"class":410},[400,479,370],{"class":414},[400,481,482],{"class":432},"getVariantGroup",[400,484,485],{"class":410},"(product",[400,487,370],{"class":414},[400,489,490],{"class":410},"variantGroupId) ",[400,492,493],{"class":414},":",[400,495,496],{"class":410}," [product]\n",[400,498,500,502,505,507,510,512,515,517,519,522,525,528,531,533],{"class":402,"line":499},3,[400,501,407],{"class":406},[400,503,504],{"class":410}," variantIds ",[400,506,415],{"class":414},[400,508,509],{"class":410}," group",[400,511,370],{"class":414},[400,513,514],{"class":432},"map",[400,516,436],{"class":410},[400,518,436],{"class":414},[400,520,363],{"class":521},"sHdIc",[400,523,524],{"class":414},")",[400,526,527],{"class":406}," =>",[400,529,530],{"class":410}," p",[400,532,370],{"class":414},[400,534,535],{"class":410},"productId)\n",[400,537,539],{"class":402,"line":538},4,[400,540,542],{"emptyLinePlaceholder":541},true,"\n",[400,544,546,548,551,554,557,560,563,566,568,570,572,575,577,580,582,585,589,591,594,596,599,601,605,608],{"class":402,"line":545},5,[400,547,407],{"class":406},[400,549,550],{"class":414}," {",[400,552,553],{"class":410}," data",[400,555,556],{"class":414},",",[400,558,559],{"class":410}," pagination ",[400,561,562],{"class":414},"}",[400,564,565],{"class":414}," =",[400,567,419],{"class":418},[400,569,422],{"class":410},[400,571,370],{"class":414},[400,573,574],{"class":410},"assets",[400,576,370],{"class":414},[400,578,579],{"class":432},"list",[400,581,436],{"class":410},[400,583,584],{"class":414},"{",[400,586,588],{"class":587},"swJcz"," productIds",[400,590,493],{"class":414},[400,592,593],{"class":410}," variantIds",[400,595,556],{"class":414},[400,597,598],{"class":587}," limit",[400,600,493],{"class":414},[400,602,604],{"class":603},"sbssI"," 12",[400,606,607],{"class":414}," }",[400,609,448],{"class":410},[400,611,613],{"class":402,"line":612},6,[400,614,616],{"class":615},"sHwdD","\u002F\u002F → data: [{ id, url, path, name, width, height, hotspots: [{ id, x, y, productId, sku, label }] }]\n",[363,618,619,620,623,624,627],{},"Results are newest first. Load the next page with ",[367,621,622],{},"startingAfter: pagination.nextCursor"," while ",[367,625,626],{},"pagination.hasMore"," is true.",[383,629,631],{"id":630},"hotspots-on-specific-images","Hotspots on specific images",[363,633,634],{},"To check whether the product's own gallery images have hotspots, pass their asset ids:",[391,636,638],{"className":393,"code":637,"language":395,"meta":396,"style":396},"const { data } = await client.assets.list({ ids: (product.assets ?? []).flatMap((a) => (a.assetId ? [a.assetId] : [])) })\n",[367,639,640],{"__ignoreMap":396},[400,641,642,644,646,649,651,653,655,657,659,661,663,665,667,669,672,674,677,679,682,685,688,690,693,695,697,700,702,704,707,709,712,714,717,719,722,724,727,729],{"class":402,"line":403},[400,643,407],{"class":406},[400,645,550],{"class":414},[400,647,648],{"class":410}," data ",[400,650,562],{"class":414},[400,652,565],{"class":414},[400,654,419],{"class":418},[400,656,422],{"class":410},[400,658,370],{"class":414},[400,660,574],{"class":410},[400,662,370],{"class":414},[400,664,579],{"class":432},[400,666,436],{"class":410},[400,668,584],{"class":414},[400,670,671],{"class":587}," ids",[400,673,493],{"class":414},[400,675,676],{"class":410}," (product",[400,678,370],{"class":414},[400,680,681],{"class":410},"assets ",[400,683,684],{"class":414},"??",[400,686,687],{"class":410}," [])",[400,689,370],{"class":414},[400,691,692],{"class":432},"flatMap",[400,694,436],{"class":410},[400,696,436],{"class":414},[400,698,699],{"class":521},"a",[400,701,524],{"class":414},[400,703,527],{"class":406},[400,705,706],{"class":410}," (a",[400,708,370],{"class":414},[400,710,711],{"class":410},"assetId ",[400,713,469],{"class":414},[400,715,716],{"class":410}," [a",[400,718,370],{"class":414},[400,720,721],{"class":410},"assetId] ",[400,723,493],{"class":414},[400,725,726],{"class":410}," [])) ",[400,728,562],{"class":414},[400,730,448],{"class":410},[363,732,733,734,737],{},"An image passed by id is returned also when it has no hotspots (",[367,735,736],{},"hotspots: []","). Both parameters can be combined; at most 50 ids each.",[383,739,741],{"id":740},"name-and-price","Name and price",[363,743,744,745,748,749,752],{},"A hotspot carries the product's ",[367,746,747],{},"productId"," and ",[367,750,751],{},"sku",", never its name or price: those differ per market and customer and change without the image changing. Fetch them in one call, and drop hotspots whose product does not come back (not sold in the market, or outside a signed-in customer's catalog):",[391,754,756],{"className":393,"code":755,"language":395,"meta":396,"style":396},"const ids = [...new Set(data.flatMap((img) => img.hotspots.map((h) => h.productId)))]\nconst products = await client.products.getBatchByIds(ids)\nconst byId = new Map(products.map((p) => [p.productId, p]))\n\nconst images = data.map((img) => ({\n  ...img,\n  hotspots: img.hotspots.filter((h) => byId.has(h.productId)),\n}))\n",[367,757,758,825,850,894,898,929,939,986],{"__ignoreMap":396},[400,759,760,762,765,767,770,773,776,779,781,783,785,787,790,792,794,797,799,802,804,806,808,810,813,815,817,820,822],{"class":402,"line":403},[400,761,407],{"class":406},[400,763,764],{"class":410}," ids ",[400,766,415],{"class":414},[400,768,769],{"class":410}," [",[400,771,772],{"class":414},"...new",[400,774,775],{"class":432}," Set",[400,777,778],{"class":410},"(data",[400,780,370],{"class":414},[400,782,692],{"class":432},[400,784,436],{"class":410},[400,786,436],{"class":414},[400,788,789],{"class":521},"img",[400,791,524],{"class":414},[400,793,527],{"class":406},[400,795,796],{"class":410}," img",[400,798,370],{"class":414},[400,800,801],{"class":410},"hotspots",[400,803,370],{"class":414},[400,805,514],{"class":432},[400,807,436],{"class":410},[400,809,436],{"class":414},[400,811,812],{"class":521},"h",[400,814,524],{"class":414},[400,816,527],{"class":406},[400,818,819],{"class":410}," h",[400,821,370],{"class":414},[400,823,824],{"class":410},"productId)))]\n",[400,826,827,829,832,834,836,838,840,842,844,847],{"class":402,"line":451},[400,828,407],{"class":406},[400,830,831],{"class":410}," products ",[400,833,415],{"class":414},[400,835,419],{"class":418},[400,837,422],{"class":410},[400,839,370],{"class":414},[400,841,427],{"class":410},[400,843,370],{"class":414},[400,845,846],{"class":432},"getBatchByIds",[400,848,849],{"class":410},"(ids)\n",[400,851,852,854,857,859,862,865,868,870,872,874,876,878,880,882,885,887,889,891],{"class":402,"line":499},[400,853,407],{"class":406},[400,855,856],{"class":410}," byId ",[400,858,415],{"class":414},[400,860,861],{"class":414}," new",[400,863,864],{"class":432}," Map",[400,866,867],{"class":410},"(products",[400,869,370],{"class":414},[400,871,514],{"class":432},[400,873,436],{"class":410},[400,875,436],{"class":414},[400,877,363],{"class":521},[400,879,524],{"class":414},[400,881,527],{"class":406},[400,883,884],{"class":410}," [p",[400,886,370],{"class":414},[400,888,747],{"class":410},[400,890,556],{"class":414},[400,892,893],{"class":410}," p]))\n",[400,895,896],{"class":402,"line":538},[400,897,542],{"emptyLinePlaceholder":541},[400,899,900,902,905,907,909,911,913,915,917,919,921,923,926],{"class":402,"line":545},[400,901,407],{"class":406},[400,903,904],{"class":410}," images ",[400,906,415],{"class":414},[400,908,553],{"class":410},[400,910,370],{"class":414},[400,912,514],{"class":432},[400,914,436],{"class":410},[400,916,436],{"class":414},[400,918,789],{"class":521},[400,920,524],{"class":414},[400,922,527],{"class":406},[400,924,925],{"class":410}," (",[400,927,928],{"class":414},"{\n",[400,930,931,934,936],{"class":402,"line":612},[400,932,933],{"class":414},"  ...",[400,935,789],{"class":410},[400,937,938],{"class":414},",\n",[400,940,942,945,947,949,951,953,955,958,960,962,964,966,968,971,973,976,979,981,984],{"class":402,"line":941},7,[400,943,944],{"class":587},"  hotspots",[400,946,493],{"class":414},[400,948,796],{"class":410},[400,950,370],{"class":414},[400,952,801],{"class":410},[400,954,370],{"class":414},[400,956,957],{"class":432},"filter",[400,959,436],{"class":410},[400,961,436],{"class":414},[400,963,812],{"class":521},[400,965,524],{"class":414},[400,967,527],{"class":406},[400,969,970],{"class":410}," byId",[400,972,370],{"class":414},[400,974,975],{"class":432},"has",[400,977,978],{"class":410},"(h",[400,980,370],{"class":414},[400,982,983],{"class":410},"productId))",[400,985,938],{"class":414},[400,987,989,991],{"class":402,"line":988},8,[400,990,562],{"class":414},[400,992,993],{"class":410},"))\n",[363,995,996,997,1000],{},"Show ",[367,998,999],{},"label"," instead of the product name when it is set.",[383,1002,1004],{"id":1003},"placing-the-dots","Placing the dots",[363,1006,1007,748,1010,1013,1014,1017],{},[367,1008,1009],{},"x",[367,1011,1012],{},"y"," run from 0 to 1 and are measured from the top-left corner of the ",[375,1015,1016],{},"original"," image, so they hold in every rendition:",[391,1019,1023],{"className":1020,"code":1021,"language":1022,"meta":396,"style":396},"language-vue shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv class=\"relative inline-block\">\n  \u003Cimg :src=\"`${img.url}?width=1200&fm=webp`\" :width=\"img.width\" :height=\"img.height\" class=\"block w-full h-auto\" \u002F>\n  \u003Cbutton\n    v-for=\"h in img.hotspots\"\n    :key=\"h.id\"\n    class=\"absolute -translate-x-1\u002F2 -translate-y-1\u002F2\"\n    :style=\"{ left: `${h.x * 100}%`, top: `${h.y * 100}%` }\"\n  \u002F>\n\u003C\u002Fdiv>\n","vue",[367,1024,1025,1049,1054,1059,1064,1069,1074,1079,1084],{"__ignoreMap":396},[400,1026,1027,1030,1033,1036,1038,1041,1044,1046],{"class":402,"line":403},[400,1028,1029],{"class":414},"\u003C",[400,1031,1032],{"class":587},"div",[400,1034,1035],{"class":406}," class",[400,1037,415],{"class":414},[400,1039,1040],{"class":414},"\"",[400,1042,1043],{"class":442},"relative inline-block",[400,1045,1040],{"class":414},[400,1047,1048],{"class":414},">\n",[400,1050,1051],{"class":402,"line":451},[400,1052,1053],{"class":410},"  \u003Cimg :src=\"`${img.url}?width=1200&fm=webp`\" :width=\"img.width\" :height=\"img.height\" class=\"block w-full h-auto\" \u002F>\n",[400,1055,1056],{"class":402,"line":499},[400,1057,1058],{"class":410},"  \u003Cbutton\n",[400,1060,1061],{"class":402,"line":538},[400,1062,1063],{"class":410},"    v-for=\"h in img.hotspots\"\n",[400,1065,1066],{"class":402,"line":545},[400,1067,1068],{"class":410},"    :key=\"h.id\"\n",[400,1070,1071],{"class":402,"line":612},[400,1072,1073],{"class":410},"    class=\"absolute -translate-x-1\u002F2 -translate-y-1\u002F2\"\n",[400,1075,1076],{"class":402,"line":941},[400,1077,1078],{"class":410},"    :style=\"{ left: `${h.x * 100}%`, top: `${h.y * 100}%` }\"\n",[400,1080,1081],{"class":402,"line":988},[400,1082,1083],{"class":410},"  \u002F>\n",[400,1085,1087,1090,1092],{"class":402,"line":1086},9,[400,1088,1089],{"class":414},"\u003C\u002F",[400,1091,1032],{"class":587},[400,1093,1048],{"class":414},[363,1095,1096,1097,1100,1101,748,1104,1107],{},"When the image is cropped with ",[367,1098,1099],{},"object-fit: cover",", map the point through the crop first: the original ",[367,1102,1103],{},"width",[367,1105,1106],{},"height"," are in the response for that.",[383,1109,1111],{"id":1110},"caching-and-visibility","Caching and visibility",[1113,1114,1115,1127,1130],"ul",{},[1116,1117,1118,1119,1122,1123,1126],"li",{},"Only images that are ",[375,1120,1121],{},"public",", ",[375,1124,1125],{},"published"," and finished processing are returned.",[1116,1128,1129],{},"The response does not depend on the customer and is cached at the edge for up to ten minutes. A moved hotspot can therefore take a few minutes to show.",[1116,1131,1132],{},"A hotspot whose product has been deleted is left out of the response.",[363,1134,1135,1136,1139,1140,370],{},"The REST endpoint is ",[367,1137,1138],{},"GET \u002Fv1\u002Fstorefront\u002F{marketId}\u002Fassets",", see the ",[699,1141,1143],{"href":1142},"\u002Fapis\u002Fstorefront-api","Storefront API",[1145,1146,1147],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":396,"searchDepth":451,"depth":451,"links":1149},[1150,1151,1152,1153,1154],{"id":385,"depth":451,"text":386},{"id":630,"depth":451,"text":631},{"id":740,"depth":451,"text":741},{"id":1003,"depth":451,"text":1004},{"id":1110,"depth":451,"text":1111},"Shoppable images. Hotspots that link the products shown in a photo","md",null,{"questions":1159},{"en":1160},[1161,1162,1163,1164],"How do I show the products in a lifestyle image?","How do I build an image feed for a product page?","Where do the hotspot coordinates come from?","Why is a hotspot missing in my store?",{"title":320,"description":1155},"tjNPeyi3lQ458lGHI2JJ4YlYacSYzdh0gPtfOsszcoE",[1168,1170],{"title":316,"path":317,"stem":318,"description":1169,"children":-1},"The shop's chat. Conversations, streamed answers, cards, photos, return proposals and handover to staff",{"title":328,"path":329,"stem":330,"description":1171,"children":-1},"What @avvyr\u002Fstorefront-nuxt gives you and how to install it",1793388941345]