Show compare at price on product page

[Luxluxlux360]

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

[devcoders · Accepted solution]

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 %}
<span class="compare-at-price" style="text-decoration: line-through; color: #888;">
{{ product.compare_at_price | money }}
</span>
{% endif %}
<span class="current-price">{{ product.price | money }}</span>

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!