You can configure the following settings for the Scroll To Top button:
-> Button Settings ->Advanced Settings -> Distance
-> Icon/Text Style -> Display -> Effects
Button Settings
From the Button Settings, configure the following settings:
– Button Type: Select the button appearance and display the button on your store by selecting the button type: Only Icon, Only Text, or Icon and Text.
– Position: Place the button on the store by selecting its position: Bottom Left or Bottom Right.
Advanced Settings
You can configure the Button Style & Distance of the button:
– Button Style: Customize the button appearance as per the following options:
> Background Color: Choose the background color of the button using the custom color picker tool.
> Hover Background Color: Choose the hover effect color when the mouse cursor moves over the button. The custom color picker tool is provided.
– Distance: Choose the place of the button exactly where you want to set the position of the button.
> Distance From Bottom: Select the space (distance) from the bottom. i.e., To avoid the button overlap on the footer content.
> Distance From Right/Left: Select the space from the right if the button position is selected Right and vice versa.
Preview: As you configure the button settings, you will get the real-time preview from the right-side under the Preview tab. So, you will get an idea of how the Scroll To Top button will look in your store.
Icon Style:
As per the selection of “Button Type”, you will get the options to configure the button:
– Display the Only Icon: If you have selected the Only Icon as “Button Type”, you need to configure the following settings.
> Choose Icon: The different shapes of the icon are given. Select the icon that you want to display for the Scroll To Top button.
> Icon Color: Choose the color of the icon using the custom color picker.
> Icon Size: Set the icon size by scrolling the bar to the right for enlargement and to the left for small.
– Display Only Text: If you have selected the Only Text as “Button Type”, you need to configure the following settings.
> Icon Text: Insert the text label to display on the button. i.e., Top.
> Text Size: Set the icon size by scrolling the bar to the right for enlarging the text and to the left for small.
> Icon Color: Choose the color of the icon using the custom color picker.
– Display Icon & Text: If you have selected the Icon and Text option, you can display the button with text & icon. You need to configure the “Icon Settings” & “Text Settings”.
– Display: Select the page of your store where you want to display the “Scroll To Top” button as you have configured. You will get the following options:
-> Entire Store (all the pages) -> Home Page -> Collection Page -> Product Page
– Effects:
> Scroll Offset: Insert how many pixels need to be scrolled to visible the button on the page while customers scroll down the page.