Hi @shinhajoon
To show the original (regular) price alongside the discounted price on your collection page in your Shopify store using the Supps theme, you will need to modify your theme’s Liquid code. This ensures that when a product is on sale, customers see both the crossed-out original price and the current discounted price automatically, without manual edits per product.
Here’s a tactful, step-by-step approach based on Shopify community best practices:
How to Show Both Original and Discounted Prices on Collection Pages
1. Locate the Product Card or Collection Template File
In Shopify admin, go to Online Store > Themes > Actions > Edit code.
Find the file responsible for rendering products on collection pages. This is often named something like:
sections/collection-template.liquid
snippets/product-card.liquid or snippets/product-grid-item.liquid
templates/collection.liquid (less common in modern themes)
Since you use the Supps theme, check under snippets or sections for the product card snippet.
2. Modify the Price Display Code
Inside the product card snippet, look for the code that outputs the product price. It might look like:
{{ product.price | money }}
or
{{ product.price | money_with_currency }}
You want to replace or wrap this with logic that checks if the product is on sale (i.e., if the compare-at price is higher than the current price) and then shows both prices.
Use this Liquid code pattern:
{% if product.compare_at_price > product.price %} <span class="original-price" style="text-decoration: line-through;"> {{ product.compare_at_price | money }} </span> <span class="sale-price" style="color: red; font-weight: bold;"> {{ product.price | money }} </span> {% else %} <span class="regular-price"> {{ product.price | money }} </span> {% endif %}
This code shows the original price crossed out if there’s a discount, and the sale price next to it.
If no discount, it just shows the regular price.
3. Save and Preview
Save the changes and preview your collection page.
Products with discounts should now show both prices automatically.
Products without discounts show only the regular price.
4. Optional: Add CSS Styling
To improve appearance, add CSS to your theme’s stylesheet (assets/theme.css or similar):
.original-price {
color: #999; text-decoration: line-through; margin-right: 8px;
}
.sale-price { color: #e60023; font-weight: 700; }
Important Notes
Backup your theme before making any code changes.
This method works automatically for all variants and products with discounts, so no manual per-product edits are needed.
If your theme uses JavaScript or specialized price rendering, you may need to adapt the code accordingly.
Some themes use metafields or alternate variables; ensure you test on multiple products.
