Product comparison charts are often seen in many Shopify stores. If you are looking for a way to boost sales, it could be a great solution. Out of the box in Shopify we can use tables to create one, this article will show you how to get started.

Best ways to create product comparison chart in Shopify

Here are some methods to add a chart to your Shopify store.

Using Tables in the Rich Text Editor for pages

Follow these steps to get it set up on your site: 

Note: You need to have the theme configured with blocks that use the Rich Text Editor for this to work. 

1. On the admin side, navigate to the page or product that you want to edit. 
2. Select the “table” option to insert a table. You can use the controls at the top of the editor to add new columns and rows.
3. From here you can add in text and information.
4. Further customisation of the table’s appearance will require further editing in the Rich Text Editor or the use of custom CSS code.

You can add this example of CSS code to make the table responsive

@media screen and (max-width: 767px) {
  .rte table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  
  .rte table td, .rte table th {
    min-width: 120px;
  }
}

This method is very simple to do but it has some limitations including:

• Not automatically responsive without custom CSS
• Limited styling options without code knowledge
• Manual updates required when product details change
• Not all themes support tables in their Rich Text Editor
• Not suitable for large product catalogs

We have other options for Shopify owner. The next one is using metafield and liquid.

Method 2: Using Metafields and Liquid (Developer Option)

For a more customised, native solution, you can use Shopify’s metafields and Liquid code.

1. Set up product metafields:
   • Go to Settings > Custom data > Products
   • Click “Add definition”
   • Then create the metafield definitions:
2. Add comparison data to products:
   • Navigate to a product you want to add the chart
   • Scroll to the Metafields section
   • Set the metafield definition to true
   • Add related products to “Compare Products” list
   • Add feature names to “Comparison Features”
3. Create feature metafields for each product:
   • For each feature in your “Comparison Features” list, create a metafield definition
   • Example: Create “Weight” (Type: Text), “Material” (Type: Text), etc.
   • Fill these values for each comparable product
4. Add Liquid code to your product template:

{% if product.metafields.custom.comparable %}
  <div class="comparison-wrapper">
    <button id="show-comparison" class="button">Compare Similar Products</button>
    <div id="comparison-table" class="hide">
      <table>
        <thead>
          <tr>
            <th>Features</th>
            {% for compared_product in product.metafields.custom.compare_products.value %}
              <th>{{ compared_product.title }}</th>
            {% endfor %}
            <th>{{ product.title }}</th>
          </tr>
        </thead>
        <tbody>
          {% for feature in product.metafields.custom.comparison_features.value %}
            {% assign feature_handle = feature | handleize %}
            <tr>
              <td>{{ feature }}</td>
              {% for compared_product in product.metafields.custom.compare_products.value %}
                <td>{{ compared_product.metafields.custom[feature_handle] }}</td>
              {% endfor %}
              <td>{{ product.metafields.custom[feature_handle] }}</td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <script>
    document.getElementById('show-comparison').addEventListener('click', function() {
      document.getElementById('comparison-table').classList.toggle('hide');
    });
  </script>

  <style>
    .comparison-wrapper {
      margin: 20px 0;
    }
    .hide {
      display: none;
    }
    #comparison-table table {
      width: 100%;
      border-collapse: collapse;
    }
    #comparison-table th, #comparison-table td {
      border: 1px solid #e8e8e8;
      padding: 10px;
      text-align: left;
    }
    #comparison-table th {
      background-color: #f6f6f6;
    }
    @media screen and (max-width: 767px) {
      #comparison-table {
        overflow-x: auto;
      }
    }
  </style>
{% endif %}

5. Add this code to your theme.liquid file or use the theme editor to create a new snippet and include it on your product page. It will display the table on the product page.

Using the Shopify apps

There are various apps that can help you get the job done, and the setup is quite simple for Shopify owners or marketers. We recommend the app LDT Product Compare‘. While this app is one of the top options, there are other alternatives available. It’s worth exploring a few to find the one that best suits your specific needs and budget.

Here’s how to use the LDT Product Compare app

Step 1: Installation

1. Click “Add app” to begin the installation process.
2. Follow the prompts to authorise the app for your store.

Step 2: Initial configuration

1. Once installed, navigate to the LDT Product Compare dashboard in your Shopify admin panel.
2. Click on “Settings” to configure your general preferences (optional)

Step 3: Creating comparison table

1. In the app dashboard, click “Create New Comparison” or “Add New Table”.
2. Select the products you want to include:
   • You can choose individual products or entire collections
   • Use the search function to find specific items
3. Choose which product attributes to display:
   • Common options include price, size, color, and material
   • You can also add custom attributes

Step 4: Customising the appearance

1. Go to the “Design” or “Customize” section in the app.
2. Adjust the following to match your store’s branding:
   • Table colors (background, text, borders)
   • Font styles and sizes
   • Button designs
3. Choose a layout for your comparison table:
   • Side-by-side view
   • Grid view
   • List view

Step 5: Implementing 

1. Decide where you want the comparison feature to appear:
   • Product pages
   • Collection pages
   • Both
2. Use the app’s auto-insert feature to add the comparison button to your chosen locations.
3. If needed, fine-tune the button’s position using your Shopify theme editor.

Alternatives to a product comparison chart 

In addition to product comparison charts, there are several other types of tables you should consider adding to your Shopify store, such as:

Sizing Chart: One of the main frustrations for consumers when shopping online is not being able to try items on before making a purchase. While online stores can’t replicate that experience, you can at least provide as much information as possible. A detailed and accurate sizing chart can be very helpful in this regard; it helps reassure customers that they’ll be happy with their purchase, which can boost your conversion rate and reduce returns.

Product Specifications: The more information you offer about your products, the more likely you are to secure a sale. A product specifications table allows you to present a wealth of details in a clear and easy-to-read format.

Pros and Cons: While you may not want to highlight any downsides on your product pages, this type of table can effectively summarise information on other areas of your site, such as long-form guides or reviews that you may have published on your blog.

Conclusion

By following these steps, you can create an effective product comparison chart that enhances your Shopify store’s user experience and potentially increases sales. Remember to regularly update your chart as products change and to keep testing and improving based on customer feedback and analytics data.

Ready to create your Shopify product comparison chart? Start implementing these steps today and watch your conversions grow! If you need help, book a free call with Kahunam’s experts to get right consultation for this matter.