Hi,
I want to show my compare at price eithe strike through on product page next to the price. My site is https://lux360.net/products/burberry-shirts-blue-8073216a1960-p24
Topic summary
Main issue: Show the “compare at price” (original price) with a strikethrough next to the current price on the product page.
Proposed solution: Edit the theme code in Shopify (Online Store > Themes > Edit code). Locate the product page template (product.liquid or a product section file) and add Liquid to conditionally display compare_at_price when it’s greater than price, followed by the current price.
Styling: Optional CSS suggested for a .compare-at-price class (font-size adjustment and spacing) to control appearance. The intent is a strikethrough style next to the main price; styling can be refined via CSS.
Support offer: The responder offers to implement the change directly if store access is granted.
Status: No confirmation of implementation or results yet; guidance provided, outcome pending.
Notes: The key technical element is a conditional Liquid check (compare_at_price > price) to ensure the original price only appears when there’s a valid discount. The included screenshot is illustrative; the code snippet is central to applying the fix.
1 Like
Hello @Luxluxlux360
You’ll need to make some adjustments to your theme’s code. Here’s how to do it:
Go to your theme’s code:
In your Shopify admin, go to Online Store > Themes.
Find the theme you want to edit and click on Actions > Edit code.
Locate the product template:
Look for the file that controls the product page template. It’s usually named something like product.liquid or found under the Sections folder (e.g., product-template.liquid).
Insert the Compare at Price code:
Find where the product price is displayed. You should see code similar to {{ product.price | money }} or a price class.
Add the following code to display the “Compare at price” next to the main price, with a strike-through style:
{% if product.compare_at_price > product.price %}
{{ product.compare_at_price | money }}
{% endif %}
{{ product.price | money }}
Style the Compare at Price (Optional):
To customize the appearance of the “Compare at price,” add some CSS to your theme’s stylesheet. Locate the CSS file theme.css and add:
.compare-at-price {
font-size: 0.9em;
margin-right: 5px;
}
Note: If you’re not familiar with coding, you can grant me access to your store, and I’ll make the changes for you. Thank you!
1 Like