Lookbook Grid Section

Create a lifestyle lookbook grid with hotspot pins linking to featured products.

Sidekick writes it — you put it live

Sidekick produces the content or code for this, but doesn't apply it to your store itself. You'll paste or publish the result yourself — the prompt tells Sidekick to explain exactly where it goes.

📋 Prompt

Run in Sidekick

Generate the Liquid, CSS, and JavaScript for a lookbook grid section for my [PAGE_NAME] page that I can paste into my theme as a custom section. The section should display [NUMBER] lifestyle images in a [GRID_LAYOUT] layout (options: masonry, uniform, mixed sizes). Each image should have clickable hotspot pins positioned at specific coordinates that, when clicked, reveal a small popup card showing: product image thumbnail, product name, price, and a Shop Now link. The hotspot positions should be configurable via section block settings (x_position and y_position as percentages). Add a section heading of [SECTION_HEADING] and optional subtext. On mobile, display images in a single column with hotspots still functional. Style the hotspot pins as small circles with a pulse animation. Generate the Liquid section with blocks for each hotspot, JavaScript for interactivity, and CSS.

To use the generated code: go to Online Store > Themes > Edit code, create a new file at sections/lookbook-grid.liquid, and paste the code in. Save, then open the theme customizer and add the “Lookbook Grid” section to the [PAGE_NAME] page.

How to Use

Copy the prompt above
Open Shopify Sidekick in your Shopify admin
Paste the prompt and replace the bracketed placeholders with your details
Review Sidekick's response and apply the suggestions