Shopify Comparison Grid Section

Description of the Section

The Comparison Grid section is designed to help you visually compare your products and features against those of your competitors. With this easy-to-use and customizable grid layout, you can highlight the strengths of your offerings, making it simple for potential customers to understand the advantages of choosing your products. This section supports rich customization options including font, text size, color, and alignment settings, ensuring it can be seamlessly integrated into your store's design.

Demo of the Section

Installation Instructions

1. Download the Sections Pro app on the Shopify App Store
2. Open the app and navigate to Free Sections
3. Search for "Comparison Grid"
4. Click to Publish or Purchase

Sample Use Cases for a Shopify E-commerce Store

1. Technical Product Features: If you sell complex products like electronics or software, use the Comparison Grid to show key specifications side-by-side.
2. Service Comparison: For service-oriented businesses, highlight the benefits of your service compared to competitor offerings.
3. Product Lines: If you offer different models or versions of a product, use the grid to compare the features of each model.
4. Customer Decision Making: Aid customers in making informed decisions by transparently displaying feature differences, which can lead to higher conversion rates.

Overview of the Configuration Settings

The Comparison Grid section offers a comprehensive array of settings for customization:

• Font Settings:

  • Override theme fonts: Enable or disable overriding of the theme's default fonts.
  • Headline Font: Choose a specific font for your section headlines.
  • Text Font: Select a different font for your section text.

• Text Settings:

  • Text Size: Adjust the size of the text.
  • Mobile Text Size: Set the text size specifically for mobile devices.
  • Text Line Height: Configure the line height for the text.
  • Text Color: Choose the color of the text.
  • Headline Size: Customize the size of the headlines.
  • Headline Line Height: Define the line height for the headlines.
  • Headline Color: Select a color for the headlines.
  • Content Alignment: Set the alignment for the content (left, center, right).

• Content Settings:

  • Headline: Provide the main headline for this section.
  • Headline Alignment: Choose the alignment for the headline.
  • Content: Add a description or introductory content.

• Colors:

  • Background Color: Set the background color of the section using a color picker or gradient.
  • Highlight Color: Define a color to highlight specific columns or rows.
  • Border Color: Choose a color for the borders.
  • Check Color: Select the color for checkmarks.
  • X Color: Choose the color for "X" marks.

• Dimensions:

  • Max Width of Section: Define the maximum width of the section.
  • Padding Top/Bottom/Left/Right: Adjust padding to set space around the content.
  • Spacing between Elements: Set the spacing between different text elements.
  • Cell Padding: Adjust padding inside each cell of the grid.

• Titles:

  • Product Title: Set the title for your product column.
  • Competitor Title: Set the title for the competitor product column.

The section also supports blocks for each row in the grid, each with its own settings for labels and support indicators for products and competitor products.