/

August 5, 2024

How to add compare price in cart page

When you put a product on sale for a lower price so that customers can see how the prices compare, our product details, also known as the compare at price, must include a sale price and the original price in order to show a sale price in your online store.

In this blog, we show you how to add and compare prices on the cart page.

Follow the steps Shopify admin > Themes > Three dots > Edit code

Search the main-cart-items. liquid file in Sections

Then, after searching the below code

<div class=”product-option”>

    {{ item.original_price | money }}

</div>

 

replace this code

<div class=”product-option”>

  {%- if item.original_price == item.variant.compare_at_price -%}

    {{ item.original_price | money }}

  {%- else -%}

    <span class=”price-compare”>

      {{ item.variant.compare_at_price | money }}

    </span>

    <span class=”price-origin”>

      {{ item.original_price | money }}

    </span>

  {%- endif -%}

</div>

 

Then paste the below CSS according to your required positions.

.product-option .price-compare {

  text-decoration: line-through;

  margin-right: 4px;

}

.product-option .price-origin {

  color: #FF1111;

}

 

Click on the save button.

From the same category