Shopify Sidekick/Theme/Shoppable Image Section
Task IntentTheme

Shoppable Image Section

Turn any lifestyle image into a shoppable experience with tagged product overlays.

What This Sidekick Query Does

Turn any lifestyle image into a shoppable experience with tagged product overlays.

Prompt / Skill

Run on Sidekick
Build a shoppable image section where I can 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.

Expected Output

Turn any lifestyle image into a shoppable experience with tagged product overlays.

Tips to Improve Results

  1. 1

    Copy the prompt above

  2. 2

    Open Shopify Sidekick in your Shopify admin

  3. 3

    Paste the prompt and replace the bracketed placeholders with your details

  4. 4

    Review Sidekick's response and apply the suggestions

Sidekick Skills & Magic Prompt icon

Sidekick Skills & Magic Prompt

Create & manage AI skills for Sidekick. Discover skills from other merchants.