Skip to main content

Comparison Table

The Comparison Table is where customers view side-by-side product comparisons. This feature allows you to customize the table's appearance, behavior, and display options to create the best comparison experience for your customers.

Table Display Options​

Display Location​

Choose where the comparison table appears:

Page Display​

  • Page: Shows the comparison table on a dedicated page
  • Modal: Displays the table in an overlay popup

Page display benefits:

  • Full screen real estate for detailed comparisons
  • Better for complex products with many fields
  • Easier to print or share
  • More space for product images

Modal display benefits:

  • Quick access without leaving current page
  • Focused comparison experience
  • Less disruptive to browsing flow
  • Mobile-friendly interface

Color Customization​

Text Color​

Set the color of all text within the comparison table. Choose a color that provides excellent readability against your background.

Text color guidelines:

  • Use high contrast colors (dark text on light backgrounds)
  • Consider accessibility standards (WCAG AA compliance)
  • Ensure consistency with your store's typography
  • Test readability with your chosen background

Background Color​

Choose the background color for the comparison table. This should complement your store's design while ensuring good contrast with text.

Background color considerations:

  • Match your store's color scheme
  • Provide sufficient contrast with text
  • Consider both light and dark themes
  • Test on different devices and screen sizes

Highlight Button Feature​

Show Highlight Button​

Enable this feature to allow customers to highlight specific products or features during comparison.

When enabled:

  • Customers can highlight important differences
  • Visual emphasis on key features
  • Better focus during complex comparisons
  • Enhanced user engagement

When disabled:

  • Cleaner, simpler interface
  • Faster loading times
  • Less visual complexity

Highlight Customization​

Highlight Color​

Set the color used for highlighting text or features within the comparison table.

Highlight color tips:

  • Use colors that stand out from regular text
  • Ensure good contrast with background
  • Consider color psychology (yellow for attention, green for positive features)
  • Test with different content types

Highlight Background​

Choose the background color for highlighted elements.

Background color guidelines:

  • Provide clear visual distinction
  • Ensure text remains readable
  • Use subtle colors to avoid overwhelming
  • Consider accessibility for colorblind users

Table Layout and Design​

Responsive Design​

The comparison table automatically adapts to different screen sizes:

  • Desktop: Full table with all columns visible
  • Tablet: Optimized layout with horizontal scrolling
  • Mobile: Stacked layout or horizontal scroll

Column Management​

  • Fixed columns: Product names and key fields
  • Dynamic columns: Based on selected comparison fields
  • Sortable columns: Click to sort by specific fields
  • Resizable columns: Drag to adjust column widths

Row Management​

  • Product rows: One row per product
  • Feature rows: One row per comparison field
  • Header rows: Column titles and navigation
  • Footer rows: Action buttons and summary

User Experience Features​

Interactive Elements​

  • Sortable columns: Click headers to sort
  • Expandable rows: Click to show more details
  • Hover effects: Visual feedback on interaction
  • Click actions: Direct links to product pages
  • Previous/Next: Navigate between product sets
  • Page numbers: Jump to specific pages
  • Search: Find specific products in comparison
  • Filter: Show/hide specific fields

Actions​

  • Add to Cart: Direct purchase from comparison
  • View Product: Go to individual product page
  • Remove: Remove product from comparison
  • Share: Share comparison with others

Performance Optimization​

Loading Speed​

  • Lazy loading: Load content as needed
  • Image optimization: Compress product images
  • Caching: Store frequently accessed data
  • Minimal requests: Reduce API calls

Mobile Performance​

  • Touch optimization: Large, easy-to-tap elements
  • Smooth scrolling: Optimized for touch devices
  • Fast loading: Minimal data transfer
  • Offline support: Cache for offline viewing

Customization Options​

Table Styling​

  • Borders: Customize table borders and spacing
  • Fonts: Match your store's typography
  • Spacing: Adjust padding and margins
  • Shadows: Add depth with box shadows

Animation Effects​

  • Transitions: Smooth color and size changes
  • Hover effects: Subtle animations on interaction
  • Loading animations: Visual feedback during loading
  • Scroll effects: Parallax or fade effects

Best Practices​

Content Organization​

  • Logical grouping: Group related fields together
  • Clear labels: Use descriptive field names
  • Consistent formatting: Maintain uniform data presentation
  • Visual hierarchy: Emphasize important information

User Guidance​

  • Clear instructions: Help users understand how to use the table
  • Tooltips: Provide additional information on hover
  • Help text: Explain complex features
  • Tutorials: Guide new users through the process

Accessibility​

  • Keyboard navigation: Full keyboard support
  • Screen reader support: Proper ARIA labels
  • Color contrast: Meet accessibility standards
  • Focus indicators: Clear focus states

Troubleshooting​

Table Not Displaying​

  • Check if comparison table is enabled
  • Verify products are selected for comparison
  • Clear browser cache and reload
  • Check for JavaScript errors

Styling Issues​

  • Verify color values are valid
  • Check for CSS conflicts with your theme
  • Test on different browsers
  • Ensure responsive design is working

Performance Problems​

  • Optimize product images
  • Reduce the number of comparison fields
  • Check for slow-loading resources
  • Monitor server response times