Configuration

Display Layout

• Select the number of products to compare.
• We can select below layout for the products.
  • Two Products
  • Three Products
  • Four Products
    

Columns

• Can be set to Two, Three or Four columns.

Component Title

• Title displayed at the top of the component.
• Should talk to what this table is comparing.
• It is required Field.

Product Content

• Product Name
  • Enter the product name headline.
  • Can be large or small.
• Product Link
  • Select or enter an optional link for the Product Name.
  • Name of the product can be clickable.
• Pricing
  • Optional product pricing text.
  • Can display or not.
• Product Image
  • Add an image for the product.
  • Image dimension is 150px x 114px.
• Image Alt Text
  • Alternate text for image.

Features & CTA

Features Grid

• Feature
  • Enter feature title text.
• Product 1 Feature
  • Enter feature description for product 1.
  • Prefix with ^ for grey text.
• Product 2 Feature
  • Enter feature description for product 2.
  • Prefix with ^ for grey text.
• Product 3 Feature
  • Enter feature description for product 3.
  • Prefix with ^ for grey text.
• Product 4 Feature
  • Enter feature description for product 4.
  • Prefix with ^ for grey text.

We can make the product features as symbolic representation as per below settings:-

• A grey X mark can be displayed by putting "No" in feature fields of respective products.
• A green check mark can be displayed by putting "Yes" in feature fields of respective products.

Call To Action

• Button Can be added to the product.
• Link
  • Select or enter a link for the cta.
• Link Text
  • Enter the text for the CTA button - required when link field is populated.
• Link Title
  • Enter the text for the cta link title attribute - required when link field is populated.

UI & Styles

Yes or No styles

• New Tab ?
  • CTA link will open in new tab if it is checked.
• Disable Lazy Loading of Image ?
  • Used to suppress lazy load of the images.
• No Gap ?
  • Removes the bottom margin separating modules.
• Top Gap ?
  • Adds a gap to the top of the component separating it from the top of the page or a prior component.
• Display Title ?
  • Check this option to display the Title.
• Bold Option ?
  • Makes the Product Name text larger and bold.
• Pink Headline ?
  • Render the headline in pink.
• Gray Background ?
  • Solid gray background on feature descriptions and attributes only.
  • Enable to add background to the chart.

Meta

• Element ID
  • Add an ID to the component to allow #hash linking.
  • It is optional field.

Notes:-

• We require minimum two products to compare.
• Maximum we can add four products