Collection Banner Section

Design a hero banner for collection pages with image overlay, title, and description.

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 schema for a collection banner section that I can paste into my theme as a custom section for the top of collection pages. The banner should display the collection featured image as a full-width background with a [OVERLAY_COLOR] color overlay at [OVERLAY_OPACITY]% opacity. Centered on the banner, show the collection title in large [HEADING_FONT] text, the collection description below it, and optionally a breadcrumb trail above the title. The banner height should be [BANNER_HEIGHT] (options: small 200px, medium 350px, large 500px). On mobile, reduce the height proportionally. Add schema settings to let merchants toggle the description visibility, adjust overlay opacity, change text alignment (left, center, right), and set text color. If no collection image exists, fall back to a [FALLBACK_COLOR] solid background. Finally, tell me exactly which section file to create and how to add it to the collection template through the Shopify theme editor.

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