Adding Floating Icons and Draggable Floating Windows to App Pages

Floating components appear above your app's page content, providing quick access to specific destinations or displaying additional content. You can add two types of components to the Floating section of a page:

• Floating icons: Provide quick access to live chat, promotional pages, and other destinations. Floating icons automatically fade out when customers scroll and fade back in when scrolling stops.
• Draggable floating windows: Provided by apps, these windows can display product videos, bundle offers, and other content. They remain visible on the page, and customers can drag them to different positions.

This article explains which pages support floating components, how many you can add, how to add and manage them, and how draggable floating windows behave in the app.

Supported Pages and Component Limits

Floating icons and draggable floating windows are supported on different app pages:

• Floating icons can be added to:
  • Home page
  • Custom pages
  • Product details pages
  • Cart page
  • Collection pages
  • Product listing pages
  • Search results page
  • My Account page
• Draggable floating windows can be added to:
  • Home page
  • Custom pages
  • Product details pages
  • Cart page

The following limits apply to each page:

Adding Floating Icons to App Pages

To add floating icons to an app page:

1. Open the editor for the page you want to customize (for example, a product details page). In the left sidebar, locate Floating section and click Add floating component.

2. In the pop-up panel, select the Native block tab, then choose Floating icon under Basic components.

   Note: You can add only one Floating icon component per page. If the page already contains one, the Floating icon option will be unavailable.

   

3. (For pages other than the home page) In the Floating icon settings panel on the right, select a Content source:

   • Synchronized from the floating icon on the home page: Uses the floating icon settings from the home page. You cannot customize the floating icons separately for the current page.
   • Independently set: Allows you to configure floating icons specifically for the current page.

   

4. To configure floating icons independently, click + Add Floating icon beneath the Floating icon component in the left sidebar, then select Floating icon.

   

5. In the Floating icon settings panel on the right, configure the following:
   • Floating label name: Enter a name for the icon. This name is visible only to admins.
   • Floating label position: Select where the icon appears on the page, such as the bottom-right corner.
   • Image: Upload an image with a 1:1 aspect ratio. The recommended size is 240 × 240 px. Supported formats include .png, .jpg, .jpeg, and .gif.
   • Feature type: Select the icon's function and configure the corresponding settings:
     • Live Chat: Select an Online Chat App and choose whether to enable Unread Message Notifications.
     • Promotional Page: Select the promotional page customers will be directed to when they tap the icon.
   • Activation time (optional): Set the Start time and End time, or select Never expires.
6. Once you've finished configuring the icon, click Apply. To add more floating icons, repeat steps 4–5.

Adding Draggable Floating Windows to App Pages

Draggable floating windows are provided by installed apps. Only app components that support draggable floating windows appear in the available options.

To add a draggable floating window:

1. Open the editor for the page you want to customize. Under Floating section, click Add floating component.
2. In the pop-up panel, select the Application tab, then choose the app component you want to add.
3. Configure the app component as needed.

Managing Draggable Floating Windows

After adding draggable floating windows, you can manage them under Floating section in the editor:

• Reorder windows: Change the order of floating windows in the component list. If multiple windows overlap, those positioned lower in the list appear on top.
• Hide windows: Hide a window so customers cannot see it. Hidden windows still count toward the limit of three per page.
• Remove windows: Remove a window to free up a slot. Removing a window also clears any position previously saved by customers.

Saving and Publishing Floating Component Settings

Floating component settings are saved and published together with the other components on the page.

After completing your configuration, click Preview app to review the changes or Publish to Snaplook to test them. Once you've confirmed everything looks as expected, click Publish to live store to make the changes live in your app.

How Draggable Floating Windows Behave in the App

When customers browse your app, draggable floating windows behave as follows:

• Initial position: A floating window first appears at the position defined by the app developer. It automatically avoids the top navigation bar, bottom app bar, and system interface areas to prevent these elements from being obstructed.
• Dragging and position memory: Customers can drag a window to any available position on the page. The app automatically saves its last position and restores it when the customer returns to the page.
• Position synchronization across product details pages: Because all product details page templates share the same floating component settings, moving a window on one product details page also determines where it appears on other product details pages.
• Pop-ups and full-screen display: Depending on the app's functionality, customers can open a pop-up or drawer, or expand a floating window to full screen. They can exit full-screen mode using the close button or, on Android devices, the Back button.
• Loading failures: If a pop-up fails to load, the app automatically closes it and displays the message "Failed to load. Please try again."

How Uninstalling an App Affects Floating Components

If you uninstall an app that provides draggable floating windows, the associated components are affected as follows:

• Components are no longer displayed: After refreshing or reopening the page, components provided by the uninstalled app no longer appear in the editor or the app.
• Page settings are temporarily retained: The component's existing settings, display order, and visibility status are temporarily preserved.
• Saving the page may remove components: If you save an affected page while the app is uninstalled, its components may be removed from the page settings. Reinstalling the app will not restore components or settings that have already been removed.

Frequently Asked Questions About Floating Components

Q1: Why Can't I Find My Installed App Under the Application Tab?

Only app components that support draggable floating windows appear under the Application tab. If an app component needs to be embedded in the page content, click Add component in the Page content section instead.

Q2: Do Hidden Draggable Floating Windows Count Toward the Component Limit?

Yes. Hidden draggable floating windows still count toward the limit of three per page. To free up a slot, remove an existing window.

Q3: Can I Change the Size or Initial Position of a Draggable Floating Window?

No. The size and initial position are defined by the app developer and cannot be changed in the editor. However, customers can drag windows within the app, which automatically saves their updated positions.

Q4: Will a Draggable Floating Window Remember Its Previous Position If I Remove and Re-add It?

No. Removing a window also clears the position previously saved by customers. If you add it again, the window will appear at the initial position defined by the app developer.