Generate UGC Gallery Section

Build a user-generated content gallery section displaying customer photos with product tags, social handles, and lightbox preview.

View as Markdown

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 user-generated content (UGC) gallery section that I can paste into my theme as a custom section, with these specifications:

Gallery Item Content:

  Customer-submitted photo
  Customer name or social media handle: @[HANDLE]
  Caption text (optional)
  Tagged product(s) with link to product page
  Social platform source icon (Instagram, TikTok, etc.)
  Like/heart count (optional display)


Gallery Layout:

  Grid style: [masonry/uniform-grid/justified]
  Columns: [3/4/5/6] on desktop
  Gap between images: [GAP]px
  Aspect ratio for uniform grid: [square/4:3/3:2]
  Load more button or infinite scroll after [NUMBER] items


Lightbox Features:

  Click to open full-size image
  Product tag overlay with “Shop This” link
  Customer name and caption in lightbox
  Navigation arrows between gallery items
  Close button and click-outside-to-close


Section Settings:

  Section heading: [SECTION_HEADING] (e.g., “Our Customers Love It”, “Share Your Style”)
  Subheading with hashtag: #[HASHTAG]
  CTA text: [CTA_TEXT] (e.g., “Share your photo for a chance to be featured”)
  Background color: [BACKGROUND_COLOR]
  Padding: [TOP_PADDING]px / [BOTTOM_PADDING]px


Design Options:

  Image hover effect: [zoom/darken-overlay/slide-up-info]
  Border radius on images: [RADIUS]px
  Optional image border or shadow
  Accent color: [ACCENT_COLOR]


Requirements:

  Lazy loading for all images
  Responsive: fewer columns on smaller screens
  Accessible alt text per image
  Lightbox keyboard navigation (Escape to close, arrows to navigate)
  Support for at least [NUMBER] gallery items
  Integration-ready for [Instagram API/manual upload/third-party UGC app]


Where to paste this: In Shopify admin, go to Online Store > Themes > Edit code, create a new file at sections/ugc-gallery.liquid, and paste in the generated Liquid, CSS, and JavaScript. Save, then add the section to a page via the theme customizer (Online Store > Themes > Customize > Add Section).

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