Documentation
Feedback
Guides
VTEX IO Apps

VTEX IO Apps
Back To Top Button
vtex.store-components
Version: 3.172.1
Latest version: 3.172.2

This page is about version 3.172.1 of the app, which is not the most recent version. The latest stable version is 3.172.2.

The back-to-top-button component is a button that redirects users to the top of the page when clicked.

{"base64":"  ","img":{"width":1586,"height":713,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":56394,"url":"https://user-images.githubusercontent.com/28419764/77644893-9238af80-6f40-11ea-8ceb-7355d0c12686.png"}}

Back To Top Button rendered as a text button

{"base64":"  ","img":{"width":1574,"height":683,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":1687084,"url":"https://user-images.githubusercontent.com/28419764/79279983-a60f6b80-7e85-11ea-9a8d-48abd655e559.png"}}

Back To Top Button rendered as a caret icon

Configuration

  1. Import the vtex.store-components app to your theme's dependencies in the manifest.json file as in the following example:

_10
"dependencies": {
_10
"vtex.store-components": "3.x"
_10
}

  1. Add the back-to-top-button block into a store template of your choice. In the example, it will be added to the home page:

_10
"store.home": {
_10
"blocks": [
_10
+ "back-to-top-button",
_10
]
_10
},

  1. Then, declare the back-to-top-button block using the props stated in the Props table. For example:

_10
"store.home": {
_10
"blocks": [
_10
"back-to-top-button",
_10
]
_10
},
_10
+ "back-to-top-button":{
_10
+ "props":{
_10
+ "displayThreshold": 800,
_10
+ }
_10
+ }

Props

Prop nameTypeDescriptionDefault Value
displayenumDefines the component rendering. Possible values are: button to display a button with a Back To Top label text or caret-icon to display just an icon.button
displayThresholdnumberDefines the window Y pixel in which the button will be displayed.600

Customization

To apply CSS customizations in this and other blocks, follow the Using CSS handles for store customization guide.

CSS Handles
backToTopButtonActive
backToTopButtonContainer
backToTopButtonHidden
See also
Vtex.store Components
VTEX IO Apps
VTEX App Store
VTEX IO Apps