How to Add 'Compare at Price to the Cart Page' in Shopify Dawn Theme

00
How to Add 'Compare at Price to the Cart Page' in Shopify Dawn Theme
Disclaimer: We may earn a commission at no extra cost to you. Commissions do not affect our opinions or evaluations.

In the world of e-commerce, providing customers with transparent pricing information is essential for building trust and encouraging purchases. Shopify's Dawn theme offers a sleek and customizable platform for online stores, but it may lack a critical feature – displaying the compare at price in the cart. In this article, we'll guide you through the process of adding the compare at price to the cart page in the Shopify Dawn theme. This process will also work for all free shopify themes. 

Enjoy 3 months of Shopify for $1/month

Trusted by over 2,000,000 businesses worldwide

Step 1: Navigate to the Store Dashboard

Begin by logging into your Shopify store and accessing the Store Dashboard. Please take a look into the below screenshot.

Shopify Theme Open

Step 2: Open Theme Edit Code

Once you're in the Dashboard, go to the 'Online Store' section and select 'Themes.' Find the Dawn theme/Your Theme you're using and click on '3 Dots' beside 'Customize' button. Finally, click on 'Edit code' to access the theme's code editor.

Shopify Theme Code Edit Option

Step 3: Locate The 'main-cart-items.liquid' file.

In the code editor, find and click on the 'Sections' folder. Look for 'main-cart-items.liquid' or search with name of the section and click on it to open the file.

Shopify Code Editor

Step 4: Insert the Code

Within the 'main-cart-items.liquid' file, search for the code 'item.original_price | money.' Once found, paste the following code directly below it:


 {% if item.variant.compare_at_price > item.variant.price %}
    {{ item.variant.compare_at_price | money }}  
 {% endif %}

Your Coffee Tip and my code,   A perfect blend. Buy Me A Coffee

Shopify Code

This code snippet checks if the compare at price is higher than the regular price for each item in the cart. If true, it wraps the compare at price in HTML `<s>` tags, indicating a strikethrough style.

Step 5: Save Changes

After pasting the code, make sure to save the changes to the 'main-cart-items.liquid' file. This ensures that the modifications take effect.

Conclusion:

By adding the compare at price to the cart page in the Shopify Dawn theme, you enhance the transparency of your pricing structure and provide customers with valuable information. This simple customization can contribute to a more informed shopping experience, potentially boosting customer trust and satisfaction.

If you need help with Shopify Custom Coding, Store Design or Theme Development, you may hire use.

Happy customizing!

Back to blog