Skip to main content

Floating Button

The Floating Button is a persistent comparison tool that follows customers as they browse your store. It provides quick access to comparison functionality and shows the current comparison list.

Button Configuration​

Style Options​

Choose from multiple button styles to match your store's design:

  • Style 1: Clean, minimal design
  • Style 2: Bold, prominent design
  • Style 3: Rounded, modern design
  • Style 4: Square, professional design

Select the style that best complements your store's aesthetic and provides the best user experience.

Color Customization​

Text Color​

Set the color of the text and icons on the floating button. Choose a color that provides good contrast against your background color.

Tips for text color selection:

  • Use high contrast colors for better readability
  • Consider your store's color scheme
  • Test on different backgrounds to ensure visibility

Background Color​

Choose the background color for the floating button. This should complement your store's design while making the button easily noticeable.

Color selection guidelines:

  • Use your brand colors for consistency
  • Ensure sufficient contrast with text color
  • Consider accessibility standards (WCAG guidelines)

Position Settings​

Predefined Positions​

Select from common button positions:

  • Right: Bottom-right corner (most common)
  • Left: Bottom-left corner
  • Top Right: Top-right corner
  • Top Left: Top-left corner

Custom Positioning​

For precise control, use custom positioning with pixel values:

Top Position​

  • Top: Distance from the top of the viewport
  • Right: Distance from the right edge (when using top positioning)

Bottom Position​

  • Bottom: Distance from the bottom of the viewport
  • Left: Distance from the left edge (when using bottom positioning)

Side Positioning​

  • Right: Distance from the right edge of the viewport
  • Left: Distance from the left edge of the viewport

Custom positioning tips:

  • Test on different screen sizes
  • Ensure the button doesn't overlap important content
  • Consider mobile vs desktop positioning needs
  • Use consistent spacing from edges

List Comparison Settings​

Show List Before Compare​

Toggle this option to display the comparison list before customers click to compare products.

When enabled:

  • Customers can see their selected products
  • Easy to remove products from comparison
  • Clear visual feedback of selection

When disabled:

  • Cleaner interface
  • Comparison list only appears when needed
  • Less visual clutter

List Styles​

Choose from different visual styles for the comparison list:

Style 1: Compact List​

  • Shows products in a condensed format
  • Good for limited screen space
  • Quick overview of selected items

Style 2: Detailed List​

  • More detailed product information
  • Better for complex products
  • Includes scroll functionality for many items

Style selection considerations:

  • Your product complexity
  • Available screen space
  • Customer preferences
  • Mobile vs desktop experience

Background Color​

Set the background color for the comparison list to match your store's design.

Background color tips:

  • Use colors that complement your button
  • Ensure good contrast with text
  • Consider both light and dark themes
  • Test readability with your content

User Experience Best Practices​

Button Visibility​

  • Position the button where it's easily accessible
  • Ensure it doesn't interfere with navigation
  • Make it noticeable but not intrusive
  • Test on different devices and screen sizes

Mobile Optimization​

  • Ensure the button is easily tappable on mobile
  • Consider thumb-friendly positioning
  • Test scrolling behavior
  • Optimize for one-handed use

Performance​

  • Keep button animations smooth
  • Ensure fast loading times
  • Optimize for different connection speeds
  • Test on various devices

Accessibility​

  • Ensure sufficient color contrast
  • Provide keyboard navigation support
  • Include proper ARIA labels
  • Test with screen readers

Troubleshooting​

Button Not Appearing​

  • Check if the feature is enabled in General Settings
  • Verify the selected pages include the current page
  • Clear browser cache and reload
  • Check for JavaScript errors in console

Positioning Issues​

  • Test custom positioning values
  • Ensure values don't push button off-screen
  • Check for CSS conflicts with your theme
  • Verify responsive behavior

Color Issues​

  • Ensure sufficient contrast ratios
  • Test on different backgrounds
  • Check color accessibility standards
  • Verify color values are valid hex codes