Theme 💎 Built for Sidekick ✍️ Sidekick drafts it — you apply it
shopify sidekick theme navigation ui

Back-to-Top Scroll Button

Add a floating button that appears after scrolling and smoothly scrolls the page back to top.

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 back-to-top button section that I can paste into my theme as a custom section — a fixed floating button in the [BUTTON_POSITION] corner of the viewport. The button should become visible with a fade-in animation after the customer scrolls past [SCROLL_TRIGGER] pixels from the top. Clicking the button should smoothly scroll the page back to the top with a scroll behavior duration of [SCROLL_DURATION] milliseconds. Include section settings for button shape as [BUTTON_SHAPE] (circle or rounded-rectangle), button size [BUTTON_SIZE] pixels, background color [BUTTON_BG_COLOR], icon color [ICON_COLOR], hover background color [HOVER_BG_COLOR], bottom offset [BOTTOM_OFFSET] pixels, and side offset [SIDE_OFFSET] pixels. The button should use an inline SVG arrow-up icon with a stroke width of [ICON_STROKE_WIDTH]. Add an option to hide the button on mobile devices below [MOBILE_BREAKPOINT] pixels. The button should have a z-index of [Z_INDEX] to stay above other content. Include a CSS transition for opacity and transform with a duration of [TRANSITION_DURATION] milliseconds. The section should include the complete Liquid, inline CSS, and vanilla JavaScript with no external dependencies. Finally, tell me exactly which file to add this to (a section file, or a snippet included in theme.liquid) and how to enable it via 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