Comparison Module Section

Overview: 

The Comparison Module is designed to showcase and compare multiple plans, packages, or service tiers in a clean and structured layout. It helps visitors quickly understand feature differences, usage limits, monetization options, and support availability across plans. The module supports flexible table layouts, custom styling options, CTA buttons, and fully responsive behavior for all devices.

No coding is required, making it easy for marketers and content editors to manage comparison tables directly inside HubSpot.

Getting Started

Add the Comparison Module to your HubSpot page, create plans using repeaters, customize feature categories, and highlight the differences between plans with an easy-to-manage comparison table. 

Key Features

1. Add multiple plans with custom titles, buttons, and feature values.
   
   
2. Create categorized comparison sections like Usage, Features, Support, and Monetization.
   
   
3. Easily manage rows and columns using repeaters.
   
   
4. Customize colors, spacing, typography, borders, and table styles.
   
   
5. Highlight recommended plans with badges or custom styling.
   
   
6. Fully responsive comparison table for desktop, tablet, and mobile devices.
   
   
7. Add CTA buttons like “Start for Free” or “Talk to Sales”.
   
   
8. Enable icons, checkmarks, or custom text values inside cells.

Installation

1. Add the Comparison Module to your HubSpot CMS library.
   
   
2. Drag and drop the module into your desired page or template.
   
   
3. Input product details, including images, descriptions, and pricing information.
   
   
4. Customize the layout and design settings to match your site’s aesthetic and save the page.

How to Use the Module

1. Insert the Comparison Module into your page layout.
   
   
2. Add product information such as title, descriptions, images, and other content.
   
   
3. Customize the look and feel of the Comparison Module, adjusting the layout and design as needed.
   
   
4. Preview the Comparison Module and publish the page to make it live on your site.

Module Compatibility

• Fully compatible with all HubSpot CMS templates and themes.
  
  
• Works across all modern browsers for consistent performance.
  
  
• Fully responsive design ensures smooth functionality across desktop, tablet, and mobile devices.

Adding Content with Image Layout to Comparison Module

1. Easily add images alongside product descriptions to enhance visual appeal.
   
   
2. Upload high-quality images for each product to provide customers with clear, detailed views.
   
   
3. Ensure that images are responsive, adjusting properly across different devices.
   
   
4. Use images to highlight key features and provide context to the products in your Comparison Module.

Best Practices

•  Keep comparison labels clear, concise, and informative to help users make better decisions. Use icons, badges, or visual indicators to improve readability and highlight important differences between plans. Limit the number of comparison columns displayed at once to keep the table organized and easy to navigate. Regularly update plan details, feature availability, and support information to maintain accuracy. Test the comparison table across different devices to ensure it displays correctly on desktop, tablet, and mobile screens. 

Features with Descriptions:

Plan Comparison Layout:
Display multiple plans, packages, or service tiers in a clean and easy-to-compare table layout.

Customizable Design:
Fully adjustable design options, including colors, fonts, buttons, spacing, and layouts to match your branding.

Mobile-Responsive:
Automatically adjusts for a smooth and consistent comparison experience across desktop, tablet, and mobile devices.

Simple Content Management:
Easily manage and update plan details, feature values, sections, and CTA buttons directly within HubSpot’s interface.

Enhanced User Experience:
Organize comparison data clearly, making it easier for visitors to evaluate differences and choose the most suitable plan or service.

Get Free Support

Need help setting up the module or customising it further?
We offer FREE 1-hour support for all our HubSpot modules.

Mail Us: resource@straightgrowth.com

Visit Website: https://www.straightgrowth.com/

👉 Book Your Free Support Session with Straight Growth