Want to show a custom compare-at price on your Shopify store, but not sure how?
Don’t worry, we’ll walk you through this process below.
In fact, we’ll show you two ways to accomplish this task — this guide covers how to customize a compare-at price with Shopify Liquid, and it covers how to do so within Shogun as well.
Even those who only occasionally shop online have probably noticed that stores often display two sets of prices: a higher original price and a lower sale price.
It’s easy to see why this marketing technique is so popular. People only have so much money to spend, and it can take some convincing to get them to part with their hard-earned dollars. Highlighting that a product is on sale will make it more attractive — people feel that if they’re going to commit to a purchase, they might as well get a good deal. Indeed, many shoppers won’t even consider buying a product online unless it is on sale.
Numerous studies have demonstrated the effectiveness of this tactic:
Overall, putting your products on sale and highlighting this fact with an enhanced design element will help you catch the attention of potential customers, stand out from the competition, and turn more of your web traffic into revenue.
Before we go further, it should be noted that Shopify offers built-in functionality for compare-at pricing, which is compatible with most Shopify themes. In other words, there’s a good chance you can add this feature to your store without editing any code at all.
If you haven’t tried already, you should check whether this option is available:
For a product with multiple variants, you’ll need to select the variant you would like to customize in the “Pricing” section of the product settings page — then, you’ll be able to find the “Compare-at price” field in the variant settings page.
Exactly how your compare-at price is shown will depend on which theme you’re using. For example, Shopify’s default Dawn theme will show the current price with the previous price crossed out next to it.
If you’re having any trouble with the process described above, you’ll probably be able to find a solution with Shopify Liquid.
Liquid is Shopify’s open-source templating language — it’s the particular type of code that’s used to build Shopify themes. You can add your own compare-at price element with Liquid code. And even if your theme is compatible with Shopify’s built-in functionality for compare-at pricing, you may still need to edit your Liquid code to customize this feature’s styling.
To access the Liquid code of your theme:
To demonstrate how this all works, let’s say you have the latest version of the Dawn theme and you want to make the font of the previous price red in order to really make it pop.
This can be done by editing the Dawn theme’s “component-price.css” file, which can be found in the “Assets” folder (alternatively, you can find this file by using the search bar located in the top-left corner of the Shopify code editor). Once you have this file open, replace the following block of code:
.price--on-sale .price-item--regular {
text-decoration: line-through;
color: rgba(var(--color-foreground), 0.75);
font-size: 1.3rem;
}
With this code:
.price--on-sale .price-item--regular {
text-decoration: line-through;
color: #FF0000;
font-size: 1.3rem;
}
You’ll now see that the font color of the previous price is red rather than the default black.
You can also add custom code to your Shopify store with Shogun.
Shogun Page Builder provides you with a vast library of pre-made design elements, allowing you to quickly set up pages for your online storefront. And in addition to these pre-made elements, you can also create your own with Shogun’s Custom Elements feature:
You can use Liquid/HTML, CSS, and JavaScript code to create your Custom Elements. For example, you could use the following code to add a table that not only compares prices, but also features and customer reviews (just swap out the default text with your own content):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Product Comparison Table</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
.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;
}
@media (max-width: 768px) {
.comparison-table {
width: 100%;
}
}
</style>
</head>
<body>
<table class="comparison-table">
<thead>
<tr>
<th>Product</th>
<th>Product #1</th>
<th>Product #2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="product-name">Price</td>
<td>$X</td>
<td>$Y</td>
</tr>
<tr>
<td class="product-name">Features</td>
<td>Feature X, Feature Y, Feature Z</td>
<td>Feature X, Feature Z</td>
</tr>
<tr>
<td class="product-name">Rating</td>
<td>X/5</td>
<td>Y/5</td>
</tr>
</tbody>
</table>
</body>
</html>
Once your Custom Element has been saved, you can then add it to any of your pages:
With Shogun’s Custom Elements feature, you’ll be able to create absolutely anything that you may need for your product pages, landing pages, and every other part of your Shopify store.
It’s also worth noting that there’s a separate app available, Shogun A/B Testing, that you can use to experiment with different prices, page designs, and more.
After you download this app, you’ll be able to publish two versions of your storefront at the same time. That way, you can make some changes and then see how this affects performance (in terms of conversion rate, sales volume, etc.) compared to the original version — and this will allow you to make a highly informed decision about whether you’d be better off sticking with the changes or reverting back to the original.
Shogun A/B Testing enables you to unlock your Shopify store’s true potential, as it reveals exactly what you must do in order to increase your conversion rate and make more sales.
