Back to Top Button: setup and help

Follow the steps in Quick start.

Open Configure > Back to Top Settings > General.

For a shop with a chat widget on the right, try Position Left, Button style Circle and Show after scroll (px) 600. For the squared style, choose Square with a threshold of 300.

Multistore inheritance

Button values resolve from shop to shop group to all shops, then to the shipped defaults. In a shop or group context, each Value source: ... selector offers Use inherited value and Use explicit value. An inherited value follows later changes in the parent context. An explicit value is stored only for the selected context.

Use Use inherited button settings to clear all four button overrides in the selected child context. To retain some overrides, change only the individual value-source selectors. Saving requires edit access and employee access to every affected shop.

Open Theme styles with one shop selected. The screen is unavailable for theme editing in group and all-shops contexts.

Leave Custom value off to use detected theme values. The module maps its background to the primary button background, text to primary button text, hover to primary hover, radius to button radius, border color and width to their theme values, and focus to the focus border color. Where shown, All modules changes the shared shop value and Back to Top Button only or the module-specific row changes only this module. The exact module row name follows its translated display name.

Change background, text, hover, borders or focus when the detected control is hard to see. Change Radius for the Square style if its corners do not match the theme. These fields start from detected values rather than fixed module colors.

Use Refresh shop styles after changing the theme or its style settings. Existing custom values are kept. Clear custom styles removes custom style values and returns to matched shop styles; review its confirmation because this is shared style infrastructure.

Your theme must render at least one of displayFooter, displayFooterAfter or displayBeforeBodyClosingTag. The module protects against duplicate button output when the theme calls more than one of these hooks. It registers its CSS and JavaScript through the front media/header hooks.

The button uses #mprb2t-btn, .mprb2t-visible, .mprb2t-left or .mprb2t-right, and .mprb2t-circle or .mprb2t-square. It contains the upward SVG arrow, a Back to top accessible label and a title. Its default size is 48 by 48 pixels. It sits 30 pixels from the bottom and selected side.

The script requests smooth scrolling when the browser supports it. With reduced-motion preferences, it uses automatic scrolling. It also falls back to an immediate scroll when scroll options are unsupported. When the button has keyboard focus, it remains available until focus moves away even if the page returns above the threshold.

Test below and above the threshold. Click the arrow, use keyboard activation, and check the control on narrow screens. There are no built-in page targeting, mobile-only visibility, icon upload or instant-scroll selection fields.

If the control is absent, confirm Enable, the effective multistore value, the scroll threshold and the theme hook. Check that views/js/front.js and views/css/front.css load without errors. Use the module's Integrity page for setup checks.

If the color does not match, review Theme styles and any existing custom values. If saving is refused, reload the form and check edit permission and shop access.

For further changes, put CSS in your theme stylesheet. These selectors match the rendered button:

#mprb2t-btn { background: #111; color: #fff; }
#mprb2t-btn:hover { background: #444; }
#mprb2t-btn.mprb2t-right { bottom: 20px; right: 20px; }
#mprb2t-btn.mprb2t-left { bottom: 20px; left: 20px; }

The supported template override is themes/your-theme/modules/mprbacktotop/views/templates/hook/backtotop.tpl. Keep the fixed ID, data threshold and accessibility attributes if you adjust the markup.

Set Enable to No in the effective context, or disable the module in Module Manager. Use Uninstall to remove it. Uninstall removes its theme registration, configuration and admin menu. If theme cleanup fails, uninstall returns a failure so you can resolve the issue and retry.