How to Hide the 'Compare-At' Price on Product Cards in Shopify's Dawn Theme: A BemeApps Guide

By Tony Ng.
February 18th, 2025

How to Hide the 'Compare-At' Price on Product Cards in Shopify's Dawn Theme: A BemeApps Guide

Understanding the Problem

In the world of eCommerce, presenting a clear and concise product display is crucial for user experience and conversion rates. The 'compare-at' price feature in Shopify is a powerful tool that allows merchants to show customers the original price of a product alongside the discounted price. However, there are instances where this feature can clutter the product card, especially on home and collection pages, leading to confusion.

The specific issue arises when certain product variations are on sale, and the 'compare-at' price appears on the product card, making the layout appear cluttered. Interestingly, this problem does not affect all products uniformly, even when they share the same size variation on sale.

Causes of the Problem

Theme Limitations: The default settings in Shopify's Dawn theme may not provide granular control over where the 'compare-at' price is displayed.
Variation-Specific Sales: When only specific variations of a product are on sale, the 'compare-at' price might appear inconsistently across product cards.
CSS and Customization Gaps: Without custom CSS adjustments, the default theme settings may not hide the 'compare-at' price on product cards while retaining it for individual variations.

Why This Problem Matters

A cluttered product card can deter potential buyers, leading to decreased sales and a negative user experience. Ensuring that the product information is presented clearly and concisely is vital for maintaining customer trust and engagement.

Step-by-Step Guide to Solving the Problem

To effectively hide the 'compare-at' price on product cards while keeping it for specific variations, follow these steps:

Step 1: Access Your Shopify Admin

Log in to your Shopify admin panel.
Navigate to Online Store and then click on Themes.

Step 2: Customize Your Theme

Find the Dawn theme and click on Customize.
In the theme editor, navigate to the section where you want to hide the 'compare-at' price (e.g., home page, collection page).

Step 3: Add Custom CSS

Within the theme editor, locate the Theme Settings or Advanced Settings option.
Scroll to find the Custom CSS field.
Paste the following CSS code to hide the 'compare-at' price on product cards:

.price--on-sale .price-item--regular {
    display: none;
}

Save the changes to apply the CSS.

Step 4: Verify the Changes

Preview your store to ensure that the 'compare-at' price is hidden on product cards.
Check individual product pages to confirm that the 'compare-at' price is still visible for variations.

Additional Tips

Test Across Devices: Ensure that the changes display correctly on both desktop and mobile devices.
Backup Your Theme: Before making changes, always create a backup of your current theme to prevent data loss.

Common Questions and Answers

Q: Will this solution affect the SEO of my store? A: No, this CSS modification is purely visual and will not impact your store's SEO.

Q: Can I apply this solution to other themes? A: While this guide is specific to the Dawn theme, the CSS code can be adapted for other themes with similar structures.

Conclusion

By following this guide, you can declutter your Shopify store's product cards while maintaining the visibility of the 'compare-at' price for specific variations. This approach ensures a cleaner, more user-friendly shopping experience that can enhance customer satisfaction and potentially boost sales.

For more insights and solutions on eCommerce and Shopify customization, explore our related posts:

Author by BemeApps AI.