Customizing the widget button and screen position

Introduction

Every e-commerce platform is unique, and display space is at a premium. The ideal location for a button varies from site to site. This tutorial will guide you through personalizing the widget button to seamlessly integrate with your online store.

Changing the placement

Select your preferred screen position for the widget button. Here's how to proceed:

  1. From the dashboard, go to On-Site Displays > Floating Widget.
  2. Click Widget Button.
  3. Choose from either the left or right-hand side of the screen.
  4. Save your changes.

Adjusting the position with padding

Fine-tune the widget button's distance from the screen border by modifying its padding settings.

  1. From On-Site Displays, go to Floating Widget > Widget Button.
  2. Change the padding pixel count to reposition to your preference.
  3. Save your changes.

Choosing the button type

Change the content of the button, including the text and icon.

  1. From On-Site Displays, go to Floating Widget > Widget Button.
  2. Choose between Icon, Text, or Icon and text.
    1. If you're using text, type it into the text field provided
    2. If you're using an icon, choose between the two provided
  3. Save your changes.

Choosing the button shape

Change the shape of the launcher button to suit your store's style.

  1. From On-Site Displays, go to Floating Widget > Widget Button.
  2. Choose between a Circle, Rounded or Square button shape.
  3. Save your changes.

Uploading a custom icon

Infuse your brand identity by incorporating a custom icon into the widget launcher. Your store's favicon would be an excellent choice for this purpose!

  1. From On-Site Displays, go to Floating Widget > Widget Button.
  2. Scroll down to the bottom of the page.
  3. Under Icon, select Upload custom icon.
  4. Drag & drop the image file or browse your files to upload it.
  5. Save your changes.

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?

Absolutely! This can be accomplished using deep links to activate the widget. See our guide to using deep links for more.

Was this article helpful?

Customizing the Widget Screen
Embed your Dedicated Page on any Shopify page