Back To Top Button Advance Plugin Documentation

How to Install How to Enable How to Customize Button How to Use the Plugin

How to Install

1. Download the Back to Top Button Advance plugin from our store (Download Plugin).

2. Go to Configuration → Local plugins from the Admin dashboard.

3. Click on the "Upload plugin or theme" button.

4. Popup will appear asking to navigate to the file that contains the plugins ZIP file.

5. Click on the "Choose File".

6. Select the .zip file named "Back To Top Button Advance" and then upload it using the "Upload plugin or theme" button.

7. After uploading the plugin, a success notification will appear at the top of the page with a message.

8. Once you see the notification, click on the "Restart application to apply changes" button.

9. To get this plugin, Search by the group name as Widgets in Configuration → Local Plugin.

10. Look for the Back to Top Button Advance plugin in the list.

11. Click the "Install" button next to the Back to Top Button Advance plugin.

12. Click the "Restart application to apply changes" button in top menu.

How To Enable

After installation, it's important to enable Back to Top button Plugin.

If the plugin is not enabled, the Back to Top button will not appear even after installation.

1. Go to the Configuration → Widgets.

2. Click the Edit button next to the Back to Top Button Advance.

3. Select the Is active checkbox and Click on the Update button to Enable the plugin.

Customize the Back to Top Button Advance Plugin

Once the plugin is installed and enabled, the next step is to customize the appearance and behavior of your Back to Top Button Advance plugin according to your store’s design and user preferences.

The plugin provides complete flexibility to adjust its position, color, hover effect, icon, and visibility settings.

Follow the steps below to configure the button to perfectly match your website style.

1. Go to your Admin Panel → Configuration → Widgets.

2. Find the Back to Top Button Advance Plugin in the list and click on "Configure".

Set Button Color.

3. Use the color picker to select your desired Button Color.

Choose colors that match your store’s theme while maintaining good contrast for readability.

Set the Text Color.

4. Use the color picker to select your desired Text Color.

Choose colors that match your store’s theme while maintaining good contrast for readability

Set Hover Color.

5. Use the color picker to select your desired Hover Color that appears when users move their cursor over the button.

Choose Button Position.

6. Select where the button should appear on your website.

You can choose from Top Left, Top Right, Bottom Left, or Bottom Right.

Adjust Mobile Visibility.

7. Enable or disable the option to Show on Mobile Devices.

If enabled, the button will appear on mobile screens; otherwise, it will remain hidden on smaller devices.

Set Scroll Threshold

8. Define the Scroll Threshold to control how far users must scroll before the button appears.

Set Offset Buttom.

9. You can adjust the Offset bottom to position the button precisely without overlapping other floating elements.

Adjust the Button Border Radius

10. The Border Radius setting allows you to control how rounded the corners of your Back to Top Button appear.

This helps you match the button’s shape to your website’s design — whether you prefer a sharp rectangular look, a slightly rounded style, or a completely circular button.

Upload Custom Icon or Image (Optional).

You can upload your own button image or icon to replace the default design.

11. Click on the Upload a file button.

12. Select a file from your computer.

13. Click on Open.

Save Your Changes.

14. After all customization is complete, click Save to apply your settings.

How to Use the Plugin

After configuration, your customized Back to Top Button Advance will smoothly appear at your selected position, styled with your chosen colors and image, providing users with a clean and seamless navigation experience.

1. Click this button to smoothly scroll back to top of the page.