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
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
- 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