Adding a back-to-top button, floating contact button or reading progress bar

Global overlays are small widgets pinned over every page of your storefront: a back-to-top button, a floating contact button for WhatsApp, phone or email, and a reading progress bar. You switch them on from the Overlays tab inside the page builder. They belong to your whole store, not to any one page.

Considerations

• An overlay goes live the moment you switch it on, on every page of your store. The page builder's Save and Publish buttons are for the page you are editing and play no part.
• Saving an overlay's settings is live straight away too.
• The back-to-top button and the contact button both sit bottom right by default. If you use both, give them different corners.
• Staff who are not allowed to change overlays still see the cards, but the switches and Customise buttons are greyed out.
• If the Live Chat plugin is installed and active, a fourth card, Live Chat, appears. It is managed from the plugin's own settings. See Setting up Live Chat.

Open the Overlays tab

1. From your Orbit dashboard, go to Storefront, then Pages, and click any page. The page builder opens. To open it on your homepage instead, go to Storefront, then Themes, and click Customize.
2. In the toolbox on the left, click Overlays. The Global Overlays panel opens with three cards: Back to Top, Reading Progress Bar and Floating Contact Button.
3. Each card has a switch and a badge that reads Live or Off. There is nothing to drag onto the page.

Add a back-to-top button

1. On the Back to Top card, click the switch. The message Back to Top enabled appears and the button shows at the bottom right of the canvas. It is live on your storefront right away.
2. Click Customise to change how it looks.
3. Under Show, choose Icon only, Label only or Icon and label. With a label, the Label box holds the word Top. Change it if you like.
4. Set Appear after and its Unit. The button stays hidden until the shopper has scrolled this far. The default is 400 pixels.
5. Choose a Position: Bottom right, Bottom left or Bottom centre.
6. Pick a Background colour and an Icon / label colour. Switch on Hide on mobile to hide the button on screens narrower than 768px.
7. Click Save. The message Overlay settings saved appears and shoppers see the change straight away.

The form also has Accessible label, which screen readers announce, Scroll behaviour (Smooth or Instant), Offset X (px) and Offset Y (px) for the distance from the edge, Button size (px), Icon size (px), hover colours and Stacking order (z-index).

Add a WhatsApp, call or email button

1. On the Floating Contact Button card, click the switch. The message Floating Contact Button enabled appears. The button lands bottom right, in the same corner as the back-to-top button.
2. Click Customise.
3. Under Action, choose what the button does:
   • WhatsApp chat: opens a WhatsApp chat with you. Enter your Phone number in international format, digits only, for example 447123456789. Add a Pre-filled message so the chat opens with your words already typed.
   • Phone call: starts a call to your Phone number.
   • Email: opens a new email to your Email address with the Subject filled in.
   • Custom link: opens the Link URL. Switch on Open in a new tab if you want that.
   • Scroll to top: works like the back-to-top button.
4. Under Position, choose Top right, Top left, Bottom right or Bottom left. Pick a corner the back-to-top button is not using.
5. Click Save. The message Overlay settings saved appears.

You can also switch on Show label and set a Label such as Chat with us, choose a Shape (Circle, Rounded square or Pill), set the sizes and colours, and switch on Drop shadow or Pulse animation. The default colour is WhatsApp green.

Tip: Leave the plus sign and any spaces out of the phone number. Country code first, then the rest of the number.

Add a reading progress bar

1. On the Reading Progress Bar card, click the switch. A slim bar appears that fills as the shopper scrolls down the page.
2. Click Customise.
3. Under Position, choose Top of the page or Bottom of the page.
4. Set Bar thickness (px), Bar colour and Track colour.
5. Click Save.

The bar sits above your header and page content, and below popups and cookie banners. If something still covers it, raise Stacking order (z-index).

Turn an overlay off

1. Open the Overlays tab.
2. Click the switch on the card. The message Back to Top disabled appears, or the same for the other widgets, and the widget leaves your storefront. Its settings are kept for next time.

Tip: Click a widget on the canvas to jump to its settings in the panel.

Related guides

• Getting started with the page builder
• Saving, previewing and publishing a page
• Setting up Live Chat
• Setting your storefront preferences