The floating button sits in a fixed position on your storefront by default. But on certain pages, like product pages where it might overlap a sticky add-to-cart bar, you may need it to appear higher or lower. Rather than moving it globally, you can use Prism to serve a different position per page, while keeping the default position everywhere else.
Step 1: Select the Outer Container and Enable Overflow
Before adding Prism, you need to make sure the outer container of the floating button is configured to allow its children to render outside of its bounds.
In your Alia dashboard, go to Campaigns and open the campaign you want to edit.
Click on Floating button in the top navigation of the editor.
In the element panel on the left, click on the outermost Container at the top of the floating button structure.
In the container's settings, find the Overflow property and set it to Visible. This ensures child elements positioned outside the container's bounds will still display correctly.
Step 2: Add a Prism Element and Set Up Containers for Each Variation
Next, add a Prism element inside the floating button and create a container for each positional variation you need.
Click the + icon next to the Floating button section to add a new element.
Select Prism from the element picker.
Inside the Prism, add a Container for each page variation you need. For example:
Container 1: floating button position for product pages
Container 2: default floating button position for all other pages
Inside each container, add your floating button element.
Step 3: Set the Page Conditions on Each Container
Now set the display conditions on each container inside the Prism so they show on the right pages.
Click on the first container (your product page variant).
In the Show this child if conditions panel, click + Add a condition.
Select Is on page(s) and choose By path only.
Set the condition to Contains and enter the path — for example, /products to match all product pages.
For the second container (default position), set the condition to Is not on page(s) with the same path, so it shows everywhere else.
Step 4: Adjust the Margin to Reposition the Button
With the conditions in place, the final step is adjusting the position of the floating button inside each container using the margin settings.
Click on the floating button element inside the container you want to reposition.
In the right-hand settings panel, scroll down to the Margin section.
Adjust the Bottom margin to move the button up from the bottom of the screen, or the Left margin to shift it horizontally. For example, increasing the bottom margin on product pages will push the button above the sticky add-to-cart bar.
Repeat for the other container, setting margins to match your preferred default position.
If you need to rotate the button, use the rotation option to set the needed angle.
That's it! The floating button will now appear in the correct position depending on which page a visitor is on without affecting its position anywhere else on your site.