Introduction
We know that every online store is different and screen real estate is precious. There's no 'one size fits all' when it comes to where a button is on your website. This guide shows you how to customize the widget button so it's a perfect fit for your store.
💡 Pro Tip: Change any of these settings for mobile by selecting it near the top of the page. Changes to mobile will not reflect on desktop and vice versa.
Changing the placement
Choose the side of the screen on which you'd like to place the widget button. Follow these steps:
From the dashboard, go to On-Site Displays > Floating Widget.
Click Widget Button.
Choose from either the left or right-hand side of the screen.
Save your changes.
Adjusting the position with padding
Adjust the widget button's proximity to the screen edge by increasing or decreasing its padding.
From On-Site Displays, go to Floating Widget > Widget Button.
Change the padding pixel count to reposition to your preference.
Save your changes.
💡 Pro Tip: View changes to the padding live on your site to see what works best.
Choosing the button type
Change the content of the button, including the text and icon.
From On-Site Displays, go to Floating Widget > Widget Button.
Choose between Icon, Text, or Icon and text.
If you're using text, type it into the text field provided
If you're using an icon, choose between the two provided
Save your changes.
Choosing the button shape
Change the shape of the launcher button to suit your store's style.
From On-Site Displays, go to Floating Widget > Widget Button.
Choose between a Circle, Rounded or Square button shape.
Save your changes.
📝 Note: Changing the button shape will apply to both desktop and mobile.
Uploading a custom icon
Add your brand and style by adding your own icon to the widget launcher. If you have a favicon image for your store, this is a great place to include it!
From On-Site Displays, go to Floating Widget > Widget Button.
Scroll down to the bottom of the page.
Under Icon, select Upload custom icon.
Drag & drop the image file or browse your files to upload it.
Save your changes.
📝 Note: The size for the launcher's custom icons is 32px by 32px, larger images will scale down to this size.
Common questions
Can I change the color of the widget button?
Yes absolutely! This can be done by going to On-Site Displays > Floating Widget > Colors. Scroll to Widget Button and from here you can pick the color for the widget button background and text. See our guide on customizing the widget screen for more.
Can I hide the widget and link to the app in my header or menu?
For sure! This can be done using deep links to open the widget. See our guide to using deep links for more.