Back-to-Top Scroll Button

What This Sidekick Query Does

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

Tips to Improve Results