← All Skills
Theme 💎 Built for Sidekick ✍️ Sidekick drafts it — you apply it
shopify sidekick theme hero design

Design a Gradient Hero Section

Create a hero section with a gradient background, bold typography, and a modern aesthetic.

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 
Add a hero section to my homepage with a gradient background transitioning from [COLOR_START] to [COLOR_END] in a [GRADIENT_DIRECTION] direction. Display the heading [HEADLINE_TEXT] in large bold [HEADING_FONT] font at [HEADING_SIZE] pixels. Add a subheadline [SUBHEADLINE_TEXT] in a lighter weight below. Include two CTA buttons side by side: the primary button labeled [PRIMARY_CTA_TEXT] linking to [PRIMARY_CTA_URL] with a solid [BUTTON_COLOR] background, and a secondary outline button labeled [SECONDARY_CTA_TEXT] linking to [SECONDARY_CTA_URL]. Set the section height to [HEIGHT] pixels. Center all content vertically and horizontally. Use [TEXT_COLOR] for all text elements.

Generate the Liquid, CSS, and JavaScript for this gradient hero section as a custom section I can paste into my 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/gradient-hero.liquid), and paste the generated code in. Save, then open the theme editor, go to your homepage, and use “Add section” to place it at the top.

How to Use

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