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

Add an Animated Text Hero Section

Create a hero section with rotating or typing animated text to grab visitor attention.

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 hero section with animated text that I can paste into my theme as a custom section. Display the static text [STATIC_TEXT] followed by a rotating word that cycles through these options: [WORD1], [WORD2], [WORD3], [WORD4]. Use a [ANIMATION_TYPE] animation style (options: typing, fade, slide-up) for the word rotation. Each word should display for [DISPLAY_SECONDS] seconds before transitioning. Set the background to [BACKGROUND_COLOR] or use image [BACKGROUND_IMAGE_URL]. The heading should be [HEADING_SIZE] pixels in [TEXT_COLOR] color. Add a subheadline [SUBHEADLINE_TEXT] below the animated heading. Include a CTA button labeled [CTA_TEXT] linking to [CTA_URL]. Set section height to [HEIGHT] pixels. Finally, tell me exactly which section file to create and how to add it to my homepage through the Shopify theme editor.

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