Product Video Gallery Section

Showcase product videos in a gallery grid with lightbox playback support.

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 section, JavaScript, and CSS for a product video gallery section that I can paste into my theme as a custom section, with these specifications: it should display [NUMBER] product videos in a grid layout. Each video card should show a thumbnail image with a play button overlay. Support both YouTube and Vimeo URLs entered via section schema block settings – extract the video ID to create embed URLs. When a customer clicks a video thumbnail, open a lightbox modal with the embedded video player. The lightbox should close when clicking outside or pressing Escape. Add a section heading [SECTION_HEADING] (e.g., See It In Action). Display in a [COLUMNS]-column grid on desktop, 2 on tablet, 1 on mobile. Each video block in the schema should have fields for: video URL, thumbnail image (optional, auto-generate from YouTube/Vimeo if not provided), and a caption. Lazy-load iframes so they only load when the lightbox opens. Generate the Liquid section with schema blocks, JavaScript, and CSS.

To use it: go to Online Store > Themes > Edit code, create a new file sections/product-video-gallery.liquid and paste in the generated Liquid, JS, and CSS (JS/CSS can live in assets/ and be linked from the section file), then open the theme customizer and add the new “Product Video Gallery” section to the page(s) where you want it, adding video blocks from there.

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