Quick Compare
The Quick Compare section allows merchants to showcase two products in a structured comparison layout. This section helps customers quickly understand the differences between products by displaying important information such as pricing, specifications, features, options, and other product details in an easy-to-read format.
The section is useful for highlighting product variations, comparing similar products, showcasing upgrades, or helping customers choose the product that best fits their needs. With customizable layouts, specification rows, product cards, styling controls, responsive settings, and metafield support, the Quick Compare section helps create a modern shopping experience that improves product discovery and supports faster purchasing decisions.
How to Add the Quick Compare Section
- From your Shopify admin, go to Online Store > Themes.
- Click Customize on the Voltix theme.
- In the Theme Editor, select the Quick Compare section from the left sidebar.
- Customize the settings and add and edit block text as per your store requirements.
- Click Save.
How To Configure The Quick Compare Settings
The section settings allow you to control the overall appearance, comparison layout, typography styling, product card behavior, animations, spacing, responsive design, accessibility labels, and color customization for the Quick Compare section.
- Heading: Enter the main heading for the section, such as Find Your Perfect Match.
- Color Scheme: Select a color scheme for the section. Use Edit scheme to customize the card background and text colors.
- Use custom gradient background: Enable this option to replace the standard background with a custom gradient.
- Gradient: Configure the gradient background used for the section. Select Linear gradient to apply a linear color transition.
Product Card Block Settings
Each Product Card block allows you to configure an individual product used in the comparison layout. You can select a product and customize its image, title, price, button, color information, and recommendation status.
- Product: Select the Shopify product to display in the comparison card. When a product is selected, its image, title, and price are automatically populated. If the product has a Color or Colour option, its color swatches are also displayed automatically.
- Image override: Upload a custom image to replace the product's default image in the comparison card.
- Title override: Enter a custom product title to replace the automatically populated product title.
- Price override: Enter a custom price to replace the product's automatically populated price.
- Button label: Enter the text displayed on the product action button.
- Button link: Select or enter the destination for the product button. This setting is ignored when a product is selected above.
- Column label: Enter the label displayed above the product's color column, such as Color.
- Match score: Set the match score displayed with the color swatches. The score controls the small meter bar shown below the color swatches and is displayed only when color swatches are available.
- Mark as recommended: Enable this option to highlight the product as the recommended choice in the comparison layout.