Generate Logo Showcase/Carousel

Build an auto-scrolling logo carousel for press mentions, partner brands, or 'As Seen In' sections with grayscale hover effects.

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

Create a logo showcase/carousel block:

Features:

  Auto-scrolling horizontal logo carousel
  Infinite loop animation
  Grayscale logos that colorize on hover
  Optional link for each logo
  Pause on hover


Settings:

  Logo images (up to 12)
  Link for each logo (optional)
  Section heading (e.g., “As Seen In”, “Trusted By”)
  Scroll speed
  Logo size (small/medium/large)
  Grayscale effect toggle
  Background color
  Spacing between logos


Requirements:

  Smooth CSS animation (no jank)
  Responsive (fewer logos visible on mobile)
  Lazy loading
  Works without JavaScript (CSS-only animation)
  Accessible alt text for each logo


Please generate the Liquid, CSS, and JavaScript for this logo carousel as code I can paste into my own theme myself.

Where to add it: In the Shopify admin, go to Online Store > Themes > Edit code, create a new file under Sections (e.g. sections/logo-carousel.liquid), and paste the generated code in. Save, then open the theme editor and use “Add section” to place it on the 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