Settings

The Sticky Cart is a floating accessibility tool that keeps the shopping cart reachable at all times. Use these settings to customize its appearance, position, and behavior across different devices.

1. Visual Customization

• Cart icon: Select your preferred icon style from a variety of shopping bags and carts.

• Icon size: Set the icon dimensions independently for Desktop and Mobile (in pixels).

• Icon color: Choose a custom color for the cart icon to ensure it stands out.

• Background color: Change the background color of the floating sticky button.

2. Layout & Positioning

• Show on device: Choose to display the sticky cart on All devices, Desktop only, or Mobile only.

• Shape: Select between a Round or Square container for the button.

• Position: Define the anchor point (e.g., Bottom right) for both Desktop and Mobile layouts.

• Size: Adjust the overall diameter of the sticky button container for each device type.

• Axis offset (X & Y): Use these sliders to precisely move the button horizontally (X) and vertically (Y) to avoid overlapping with other site elements like chat bubbles.

3. Border & Shadow

• Border: Customize the button's outline by adjusting Thickness, Opacity, Color, and Corner radius (for the default shape).

• Shadow: Add depth to your button by configuring:

  • Opacity & Blur: Control the softness and visibility of the shadow.

  • Offset (Horizontal & Vertical): Adjust the direction and distance of the shadow.

  • Color: Choose a custom shadow color.

4. Quantity Icon (Badge)

The quantity icon is the small badge that displays the number of items currently in the cart.

• Font size & Scale: Adjust the text size and overall scale of the badge for Desktop and Mobile.

• Quantity background & Color: Fully customize the badge's background and text colors.

• Axis offset (X & Y): Fine-tune the exact placement of the quantity badge relative to the main cart icon to ensure perfect alignment.