Discounte Price In Product Page

[amorfuz1]

Hello 
I was going through this website and in product page it showed best but at some discounted prices below the variant 
Could anyone tell this is app or custom coding 

[mrashid]

@amorfuz1 Yes, this is definitely possible with custom code. You can add a custom HTML block below the price section on the product page and enter your content directly there. This will give you flexibility to add details about discounts or highlight "best" offers as you wish. Let me know if you'd like assistance setting this up!

[rajweb]

Hey @amorfuz1 ,

To create a "Best Buy" discount section similar to what you see in the image, you can add custom code to your Shopify theme. The following guide will walk you through how to display a dynamically discounted price based on a percentage or flat-rate discount. This code will need to be placed in your theme’s product template files.

Prerequisites

-Familiarity with HTML, CSS, and Liquid (Shopify’s templating language).

-Backup your theme files before making any changes, so you can revert if necessary.

Step-1. Add Code to Calculate "Best Buy" Price:

Follow these steps:

1. Online Store

2. Themes

3. Edit Code.

4. Open the product.liquid or main-product.liquid  file (the file name may vary depending on your theme).

5. Look for the section where the product price is displayed. This is typically wrapped in a {{  product.price }} or {{ product.price | money }}tag.

6. Add the following code where you want the "Best Buy" price to appear. This example applies a 10% discount as the "Best Buy" price.

{% assign original_price = product.price %}
{% assign best_buy_discount = original_price | times: 0.10 %}  <!-- 10% discount -->
{% assign best_buy_price = original_price | minus: best_buy_discount %}

<!-- Display Original Price -->
<p>
  <span class="original-price" style="text-decoration: line-through; color: gray;">
    {{ original_price | money }}
  </span>
</p>

<!-- Display "Best Buy" Price -->
<p>
  <span class="best-buy-price" style="color: red; font-weight: bold;">
    BEST BUY at {{ best_buy_price | money }}
  </span>
</p>

<!-- Display Discount Message -->
<p style="color: gray;">
  Get Flat 10% off on all orders + Additional 5% off on prepaid orders.
</p>

Step 2. Style the Discount Section:

To make the "Best Buy" section visually appealing, add custom CSS.

1. Open your theme.css or theme.scss.liquid file (under Assets).
2. Add this CSS to style the discount prices:

.original-price {
  text-decoration: line-through;
  color: gray;
  font-size: 1rem;
}

.best-buy-price {
  color: red;
  font-weight: bold;
  font-size: 1.2rem;
}

.discount-message {
  color: gray;
  font-size: 0.9rem;
}

Preview a product page to see the "Best Buy" price and message in action.

Let me know if you need further assistance or customization with this!

If I was able to help you, please don't forget to Like and mark it as the Solution!
If you’re looking for expert help with customization or coding, I’d be delighted to support you. Please don’t hesitate to reach out via the email in my signature below—I’m here to help bring your vision to life!

Best Regard,
Rajat Sharma