Shopify Tutorial: Displaying Product Prices (Regular and Sale Prices)

In this tutorial, we’ll demonstrate how to display regular and sale prices clearly in your Shopify theme using Liquid templating.

Step 1: Understanding the Liquid Code

The Liquid snippet below differentiates between regular and sale prices, displaying both prices when a product is on sale and only the regular price otherwise.

{% if product.compare_at_price > product.price %}
  <span class="sale-price">{{ product.price | money }}</span>
  <span class="original-price">{{ product.compare_at_price | money }}</span>
{% else %}
  <span class="regular-price">{{ product.price | money }}</span>
{% endif %}

Step 2: Adding the Code to Your Shopify Theme

1. Navigate to your Shopify Admin and select: Online Store > Themes > Actions > Edit Code
2. Choose the file where you want to display the price, typically product-template.liquid or a snippet file like price.liquid.
3. Insert the provided Liquid code at the desired location.

Step 3: Customizing the CSS

Add styling to your CSS file to visually distinguish prices:

.sale-price {
  color: red;
  font-weight: bold;
}

.original-price {
  color: grey;
  text-decoration: line-through;
  margin-left: 8px;
}

.regular-price {
  color: black;
  font-weight: normal;
}

Step 4: Testing Your Changes

Preview the changes on your store to ensure proper display:

• Products on sale should clearly show both sale and original prices.
• Regular products should show only the standard price.

Summary

Your product pricing is now set to clearly communicate sales and promotions to your customers effectively, enhancing your store’s user experience!