Hub/Theme/Back-to-Top Scroll Button
Task IntentTheme

Back-to-Top Scroll Button

Free Shopify Sidekick prompts & skills for merchants

What This Sidekick Query Does

Free Shopify Sidekick prompts & skills for merchants

Prompts

Copy, adapt, and run this directly in Shopify Sidekick.

Create a back-to-top button section for my Shopify theme that appears as 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.

Expected Output

Free Shopify Sidekick prompts & skills for merchants

Tips to Improve Results

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