Theme Settings Scroll And Back To Top

Multipurpose Fashion Theme

The Scroll & Back to Top settings improve long-page usability by allowing customers to quickly return to the top of the page. This is especially useful for collection pages and long product descriptions.

Access path:
Shopify Admin → Online Store → Themes → Customize → Theme settings → Scroll & Back to Top

1. Enable Back to Top Button

Setting ID: enable_back_to_top

When enabled, a floating button appears after the customer scrolls down the page. Clicking it smoothly scrolls back to the top.

Recommended for stores with long product pages or large collections.

2. Button Position

Setting ID: back_to_top_position

Bottom right
Bottom left

Preview

↑

Bottom right is the most common and user-friendly placement. Use bottom left if your store has chat widgets on the right side.

3. Show After Scrolling (px)

Setting ID: back_to_top_show_after

Defines how many pixels the user must scroll before the button appears. Range: 100px to 800px.

How It Works

Lower value (100px) → Button appears quickly
Medium value (300px) → Balanced behavior
High value (800px) → Appears only on long pages

Recommended value: 300px for most stores.

UX Recommendations

Enable for long product descriptions
Use bottom right placement by default
Avoid overlapping with chat or sticky cart icons
Test visibility on mobile devices

Common Mistakes

Problem	Cause	Solution
Button overlaps chat widget	Wrong position selected	Switch to bottom left
Button appears too soon	Scroll value too low	Increase show_after value
Button never appears	Scroll threshold too high	Reduce pixel value
Mobile UI cluttered	Too many floating elements	Keep floating elements minimal

FAQs

What does Back to top button do?

Displays a floating button allowing users to quickly return to the top of the page.

What does Show after scrolling control?

Defines how far users must scroll before the button appears.

Multipurpose theme documentation