How To Create a Compare Products Chart in Shopify

Want to add a compare products chart to your Shopify store? In this guide, we’ll walk you through how to set up this feature, and we’ll go over some other types of tables you should consider adding to your store as well to optimize the shopping experience for your customers. 

Why Product Comparison Charts Are Useful for Merchants

Before we dig into the details of how to add a compare products chart, let’s review why you should consider doing so in the first place. 

There are three main reasons to add this feature to your Shopify store:

1. Upselling: By comparing a product to some of the other options in your own catalog, you can highlight the benefits of your more premium options and help increase your store’s average order value. 
2. Raising the standard: If you can show that your product compares favorably to the status quo in your industry (e.g., you sell a laptop with a longer battery life than the industry average), this will give visitors a compelling reason to consider committing to a purchase. 
3. Setting yourself apart: Showing how your product stacks up against a similar product offered by a competitor can lead to increased sales and market share. “[brand] alternative” and “[product] alternative” are fairly common search queries, so this type of comparison chart will also help you improve SEO.

While the specific type of chart you should add will vary depending on your goals, nearly every merchant is able to benefit from this feature. 

Creating a Product Comparison Chart in Shopify Using Shogun

With Shogun Page Builder, brands can make stunning product pages that consistently turn visitors into customers.

Creating an amazing product comparison chart in Shogun is as easy as leveraging the Custom Elements feature. Here are the steps:

Step 1. The cornerstone of Shogun Page Builder is the element library, which allows users to choose from a variety of ecommerce features to add to their page. Shogun’s Custom Element tool allows you to code your own elements and add them to the library. 

To create a Custom Element, first open the Shogun Page Builder app and select “Developer tools”.

Step 2. Click on the “Create New…” button. 

Step 3. Here, you’ll find options for adding Liquid (Shopify’s open-source templating language), CSS, and JavaScript code.

In this example, we used the following Liquid code to add a simple checkmark table to compare our product against a competitor’s:

<style>
        .comparison-table {
            width: 80%;
            margin: 20px auto;
            border-collapse: collapse;
            background-color: #fff;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .comparison-table th,
        .comparison-table td {
            border: 1px solid #ddd;
            padding: 12px;
            text-align: center;
        }

        .comparison-table th {
            background-color: #f2f2f2;
        }

        .product-name {
            font-weight: bold;
        }

        .correct {
            color: green;
        }

        .incorrect {
            color: red;
        }

        @media (max-width: 768px) {
            .comparison-table {
                width: 100%;
            }
        }
    </style>


    <table class="comparison-table">
        <thead>
            <tr>
                <th>Features</th>
                <th>Your Product</th>
                <th>Competitor's Product</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="product-name">Feature #1</td>
                <td class="correct">✓</td>
                <td class="incorrect">✗</td>
            </tr>
            <tr>
                <td class="product-name">Feature #2</td>
                <td class="incorrect">✗</td>
                <td class="correct">✓</td>
            </tr>
            <tr>
                <td class="product-name">Feature #3</td>
                <td class="correct">✓</td>
                <td class="correct">✓</td>
            </tr>
            <tr>
                <td class="product-name">Feature #4</td>
                <td class="incorrect">✗</td>
                <td class="incorrect">✗</td>
            </tr>
        </tbody>
    </table>

Add the code for your table, give the new element a name, and then save your changes.

Step 4. Go back to the main Shogun Page Builder dashboard and select the product page you want to customize. 

Step 5. In the editor, click on the “Elements” icon to open the element library.

Step 6. Scroll down to the “Custom” section of the element library — you’ll see the new element you just created listed at the end. Drag this element to wherever you want your product comparison chart to be displayed on the page.

Step 7. Your compare products chart will be added to the page, and there are plenty of customization options that you can use to perfect the styling and formatting. 

This is just the tip of the iceberg when it comes to what you can do with custom elements. For example, you could use this feature to make:

• A blog feed that shows previews of your latest posts and automatically updates whenever you add a new post
• Multicolor swatches for collection images, like on EasyPlant
• A 3D image of your product that rotates as the visitor scrolls down, like on this product page for the iPhone SE
• An interactive tool that allows visitors to visualize product customizations, like the charm bracelet builder on James Avery
• A confetti animation that’s triggered when a visitor lands on your site on their birthday (this is made possible by combining custom elements with personalized experiences)

And that’s still but a small sample of all the possibilities of custom elements. Essentially, you can create any sort of ecommerce feature or design element that you can imagine. 

Creating Other Table Formats in Shopify

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

• Sizing chart: One of the main things consumers dislike about shopping online is that they don’t get to try items out before they buy them. While online stores can’t offer that experience, at the very least you should do the next best thing and provide visitors with all the information that you can remotely. When applicable, a detailed and accurate sizing chart will be quite helpful — this information can make customers more confident that they’ll be satisfied with their purchase, which should help improve your conversion rate and reduce returns as well.
• Product specifications: Again, the more information you provide about your product, the more likely you are to make the sale (85% of consumers say product information is important to them when deciding on which brand to buy from). A product specifications table allows you to cover a large amount of details in a particularly easy-to-read way. 
• Pros and cons: While you likely won’t want to highlight any cons on your product pages, this type of table can be an effective way to summarize information on other areas of your site, such as any long-form guides or reviews that you may have published on your blog. 

There are two ways to add a chart to your Shopify store — you can use Shopify’s built-in theme editor or a third-party app like Shogun.

Creating a Table with the Shopify Theme Editor

To add a chart with the Shopify Theme Editor:

Step 1. Log into Shopify and select the sales channel that you would like to customize. 

Step 2. Select the “Customize” button for the theme you want to edit.

Step 3. Use the dropdown menu located at the top of the screen to navigate to the page template you want to add a table to.

Step 4. Different themes will give you different options for adding tables. Some don’t offer any table options at all, while others provide multiple table features to choose from. 

For example, the Motion theme allows you to add a “Size chart” block to the default product page template.

Step 5. After adding the “Size chart” block, click on the “Select page” button.

Step 6. You can choose a table that’s already been made or select “Create page” to make a new table. 

Step 7. Selecting “Create page” will take you to the “Add page” section of the main Shopify dashboard, which includes a tool for building tables. 

Once you’re done making your table, give it a name and save your changes. 

And once you’ve added the table/page to your “Size chart” block, it will then be included on the page as a clickable popup.

Creating a Table with Shogun

To add a chart with Shogun Page Builder:

Step 1. After opening the app, select the page you want to add a table to.

Step 2. In the element library, select the “Table” element and place it on the page wherever you would like it to be displayed. 

That’s it! You’ll now be able to fill in the table data and customize the styling however you like. 

Optimizing Your Tables with Shogun A/B Testing

Whenever you create a table for your Shopify store, you will have many decisions to make. 

For example, if you’re setting up a product comparison chart, which products should be included, exactly? Which details should you compare? If you add too much information, will visitors get overwhelmed and just skip past the chart altogether? And regardless of the content, what should the design of the table itself look like?

The most effective way to find the answers to these questions is to run some tests and see what works best. 

Shogun A/B Testing allows you to easily conduct such experiments. Whenever you want to test out some new changes, you can use this app to publish two versions of your storefront at the same time — some visitors will be shown the version with changes, everyone else will still see the original version, and then you can compare how these versions perform against each other to see whether or not your changes are truly worth making.

Once your experiment has been published, you’ll be able to review a wide variety of metrics for both the original version and the new variant, including the conversion rate, revenue per visitor, average order value, and more. Shogun A/B Testing even keeps track of statistical significance for you, so you’ll know exactly when you’ve collected enough data to confidently conclude which version is better. 

Overall, Shogun A/B Testing gives you the insight you need to make all the right decisions about your store’s design and content.