Shopify Product Comparison – Compare Features & Benefits
Add a customizable product comparison table to your Shopify store. Compare features, benefits, and values across multiple products. Fully responsive and interactive for mobile and desktop users.
Liquid Code
<!--
========================================
Section Name: Product Comparison
Tech Stack: Liquid, HTML, CSS, JavaScript
What This Section Does:
- Displays a product comparison table with customizable features and product columns.
- Includes dynamic icons for "Yes," "No," and "Dash" values.
- Supports a call-to-action button for driving conversions.
- Fully responsive design for seamless mobile and desktop compatibility.
Promotion:
Help your customers make informed decisions with a detailed product comparison table. Showcase your product's advantages over competitors. Get it now at [PrebuiltTemplates](https://prebuilttemplates.com/).
========================================
-->
<section class="product-comparison-section" style="background-color: {{ section.settings.background_color }}; padding: {{ section.settings.padding_top }}px 0 {{ section.settings.padding_bottom }}px;">
<div class="comparison-container page-width">
<div class="comparison-header">
<h2 class="comparison-title">{{ section.settings.title }}</h2>
<div class="comparison-description">{{ section.settings.description }}</div>
{% if section.settings.show_cta %}
<div class="comparison-cta">
<a href="{{ section.settings.cta_link }}" class="cta-button">{{ section.settings.cta_text }}</a>
</div>
{% endif %}
</div>
<div class="comparison-table">
<div class="comparison-table-header">
<div class="feature-column">
<!-- Empty cell for feature names -->
</div>
<!-- Product column headers -->
{% for block in section.blocks %}
{% if block.type == 'product_column' %}
<div class="product-column">
<div class="product-name">{{ block.settings.product_name }}</div>
</div>
{% endif %}
{% endfor %}
</div>
<!-- Feature rows -->
{% for block in section.blocks %}
{% if block.type == 'feature_row' %}
<div class="comparison-row">
<div class="feature-name">{{ block.settings.feature_name }}</div>
{% for product_block in section.blocks %}
{% if product_block.type == 'product_column' %}
<div class="feature-value">
{% assign feature_key = block.settings.feature_id %}
{% assign product_key = product_block.settings.product_id %}
{% assign comparison_value = block.settings[product_key] %}
{% if comparison_value == 'yes' %}
<span class="checkmark"><svg xmlns="http://www.w3.org/2000/svg" fill="rgba(40,155,0,1)" viewBox="0 0 256 256" class="svg-icon" ><title>check</title><path d="M229.66,77.66l-128,128a8,8,0,0,1-11.32,0l-56-56a8,8,0,0,1,11.32-11.32L96,188.69,218.34,66.34a8,8,0,0,1,11.32,11.32Z"></path></svg></span>
{% elsif comparison_value == 'no' %}
<span class="x-mark"><svg xmlns="http://www.w3.org/2000/svg" fill="rgba(255,116,116,1)" viewBox="0 0 256 256" class="svg-icon" ><title>x</title><path d="M205.66,194.34a8,8,0,0,1-11.32,11.32L128,139.31,61.66,205.66a8,8,0,0,1-11.32-11.32L116.69,128,50.34,61.66A8,8,0,0,1,61.66,50.34L128,116.69l66.34-66.35a8,8,0,0,1,11.32,11.32L139.31,128Z"></path></svg></span>
{% else %}
<span class="dash-mark"><svg xmlns="http://www.w3.org/2000/svg" fill="rgba(214,154,0,1)" viewBox="0 0 256 256" class="svg-icon"><title>minus</title><path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128Z"></path></svg></span>
{% endif %}
</div>
{% endif %}
{% endfor %}
</div>
{% endif %}
{% endfor %}
</div>
</div>
</section>
<style>
/* Reset margins */
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
.product-comparison-section {
width: 100%;
}
svg.svg-icon {
width: 20px;
}
.comparison-container {
max-width: 1200px;
margin: 0 auto;
}
.comparison-header {
text-align: left;
margin-bottom: 40px;
}
.comparison-title {
font-size: 2.5rem;
margin-bottom: 15px;
}
.comparison-description {
font-size: 14px;
margin-bottom: 20px;
line-height: 1.4;
letter-spacing: 0;
}
.comparison-cta {
margin-top: 20px;
}
.cta-button {
display: inline-block;
background-color: #000;
color: #fff;
padding: 12px 25px;
text-decoration: none;
font-weight: 500;
}
.comparison-table {
border-collapse: collapse;
width: 100%;
border: 1px solid #e0e0e0;
}
.comparison-table-header {
display: flex;
border-bottom: 1px solid #e0e0e0;
}
.feature-column {
width: 30%;
padding: 15px;
font-weight: bold;
}
.product-column {
flex: 1;
padding: 15px;
text-align: center;
font-weight: bold;
border-left: 1px solid #e0e0e0;
}
.comparison-row {
display: flex;
border-bottom: 1px solid #e0e0e0;
}
.feature-name {
width: 30%;
padding: 15px;
}
.feature-value {
flex: 1;
padding: 15px;
text-align: center;
border-left: 1px solid #e0e0e0;
}
.checkmark {
color: #4CAF50;
font-size: 1.2rem;
}
.x-mark {
color: #F44336;
font-size: 1.2rem;
}
.dash-mark {
color: #9E9E9E;
}
@media screen and (max-width: 768px) {
.comparison-table {
overflow-x: auto;
display: block;
}
}
</style>
{% schema %}
{
"name": "Product Comparison",
"settings": [
{
"type": "color",
"id": "background_color",
"label": "Background Color",
"default": "#f5f5f5"
},
{
"type": "range",
"id": "padding_top",
"label": "Padding Top",
"default": 60,
"min": 0,
"max": 100,
"step": 5
},
{
"type": "range",
"id": "padding_bottom",
"label": "Padding Bottom",
"default": 60,
"min": 0,
"max": 100,
"step": 5
},
{
"type": "text",
"id": "title",
"label": "Section Title",
"default": "Product vs. The Rest"
},
{
"type": "textarea",
"id": "description",
"label": "Description",
"default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo."
},
{
"type": "checkbox",
"id": "show_cta",
"label": "Show CTA Button",
"default": true
},
{
"type": "text",
"id": "cta_text",
"label": "Button Text",
"default": "Shop now"
},
{
"type": "url",
"id": "cta_link",
"label": "Button Link"
}
],
"blocks": [
{
"type": "product_column",
"name": "Product Column",
"settings": [
{
"type": "text",
"id": "product_name",
"label": "Product Name",
"default": "Our Product"
},
{
"type": "text",
"id": "product_id",
"label": "Product ID (unique)",
"default": "product1"
}
]
},
{
"type": "feature_row",
"name": "Feature Row",
"settings": [
{
"type": "text",
"id": "feature_name",
"label": "Feature Name",
"default": "Feature"
},
{
"type": "text",
"id": "feature_id",
"label": "Feature ID (unique)",
"default": "feature1"
},
{
"type": "select",
"id": "product1",
"label": "Product 1 Value",
"options": [
{
"value": "yes",
"label": "Yes (✓)"
},
{
"value": "no",
"label": "No (✕)"
},
{
"value": "dash",
"label": "Dash (—)"
}
],
"default": "yes"
},
{
"type": "select",
"id": "product2",
"label": "Product 2 Value",
"options": [
{
"value": "yes",
"label": "Yes (✓)"
},
{
"value": "no",
"label": "No (✕)"
},
{
"value": "dash",
"label": "Dash (—)"
}
],
"default": "no"
},
{
"type": "select",
"id": "product3",
"label": "Product 3 Value",
"options": [
{
"value": "yes",
"label": "Yes (✓)"
},
{
"value": "no",
"label": "No (✕)"
},
{
"value": "dash",
"label": "Dash (—)"
}
],
"default": "no"
},
{
"type": "select",
"id": "product4",
"label": "Product 4 Value",
"options": [
{
"value": "yes",
"label": "Yes (✓)"
},
{
"value": "no",
"label": "No (✕)"
},
{
"value": "dash",
"label": "Dash (—)"
}
],
"default": "dash"
}
]
}
],
"presets": [
{
"name": "Product Comparison",
"category": "Custom Sections",
"blocks": [
{
"type": "product_column",
"settings": {
"product_name": "Our Product",
"product_id": "product1"
}
},
{
"type": "product_column",
"settings": {
"product_name": "Competitor 1",
"product_id": "product2"
}
},
{
"type": "product_column",
"settings": {
"product_name": "Competitor 2",
"product_id": "product3"
}
},
{
"type": "feature_row",
"settings": {
"feature_name": "Feature 1",
"feature_id": "feature1"
}
},
{
"type": "feature_row",
"settings": {
"feature_name": "Feature 2",
"feature_id": "feature2"
}
}
]
}
]
}
{% endschema %}