Shoppable Image Section

Generate the complete Liquid section code, JavaScript, and CSS for a shoppable image section that I can paste into my theme as a custom section, with these specifications: I should be able to upload a single large lifestyle or editorial image and tag products on it. Each tag should be positioned by percentage-based x/y coordinates set in the section schema blocks. When a customer hovers over (desktop) or taps (mobile) a tag marker, a product tooltip should appear showing: product thumbnail, product name, price, and an Add to Cart button. The tag markers should be small [MARKER_STYLE] indicators (options: plus-sign, dot, numbered). Include a product list strip below the image on mobile that shows all tagged products in a horizontal scroll. The section heading should be [SECTION_HEADING]. Generate the complete Liquid section code with schema blocks for each product tag, JavaScript, and CSS.

To use it: go to Online Store > Themes > Edit code, create sections/shoppable-image.liquid and paste in the generated code (JS/CSS can go in assets/ and be linked from the section file), then open the theme customizer, add the “Shoppable Image” section to the page you want, and add a block per product tag with its coordinates.