To change the "Sale" tag to calculated percentage plus word in the SIMPLE Theme

[hungyujj]

I have edited my shopify in simple theme reference by this link:
https://community.shopify.com/c/Shopify-Discussion/Change-quot-sales-quot-text-to-percentage-on-Simp...

And here is my shopify website: ones-day.com

And it is worked but just work in specific page.
Here is successful by way of the attached linkAs shown the words do not change to xx% OFF in my home page, How can I edit the code to solve this problem? Many thanks for any solution!

[Propero · Accepted solution]

@hungyujj 

Ensuring that %age change also reflect on the product page and not just grid, please follow below steps 

1. Go to product-template.liquid under Sections and open the file

Search the code

{% if product.compare_at_price_max > product.price %}
            <span class="badge badge--sale"><span>{{ 'products.product.on_sale' | t }}</span></span>
          {% endif %}

Replace the above code with below code

{% if product.compare_at_price_max > product.price %}
<span class="badge badge--sale"><span>{{ product.compare_at_price_max | minus: product.price | times: 100.0 | divided_by: product.compare_at_price_max | money_without_currency | times: 100 | remove: '.0'}}%</span></span>
{% endif %}

[Propero · Accepted solution]

@hungyujj 

same change is needed in 

featured-product.liquid file also

[Natalie21]

Hi,  

I'm using the minimal theme and would like to change my sale or reduced / compare at price tag to read as the value saved rather than *sale* or *reduced*. 

Example: If the compare at price was £10.00 and the new price is £7.00, I would like the tag to read "You save £3.00" or "You save 30%"

My current product-template.liquid is as follows:

{% if product.compare_at_price > product.price %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.product.sale_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price">
{{ product.compare_at_price_max | money }}
</s>
{% else %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price hide">
{{ product.compare_at_price_max | money }}
</s>

Please could some help!? Many thanks!

[PaulNewton]

Hi @Natalie21 If you need integration help with the following I can be hired at paull.newton+shopifyforums@gmail.com 

---

@Natalie21 wrote:

I'm using the minimal theme and would like to change my sale or reduced / compare at price tag to read as the value saved rather than *sale* or *reduced*. 

Example: If the compare at price was £10.00 and the new price is £7.00, I would like the tag to read "You save £3.00" or "You save 30%"

My current product-template.liquid is as follows:

---

{% if product.compare_at_price > product.price %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">{{ 'products.product.sale_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price">
{{ product.compare_at_price_max | money }}
</s>
{% else %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="true">{{ 'products.product.sale_price' | t }}</span>
<s id="ComparePrice" class="product-single__sale-price hide">
{{ product.compare_at_price_max | money }}
</s>

To 

{% if product.compare_at_price > product.price %}
<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">You save</span>
<s id="ComparePrice" class="product-single__sale-price">
{{ product.price | minus:product.compare_at_price_max   | money }}
</s>

For percentage you would use something like either with ceil or floor math filters

{{ product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | money_without_currency }}

Further customization available at paull.newton+shopifyforums@gmail.com  

[Natalie21]

Thank you for your response @PaulNewton Unfortunately, your instruction doesn't seem to have worked.

I have removed the original template and replaced with your advice but its not changed anything. This is how it reads now...Have I done something wrong?

   <div class="product-single__prices{% if shop.taxes_included or shop.shipping_policy.body != blank %} product-single__prices--policy-enabled{% endif %}">

            <span id="PriceA11y" class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>

            <span id="ProductPrice" class="product-single__price" itemprop="price" content="{{ product.price | divided_by: 100.00 }}">

              {{ product.price | money }}

            </span>

            {% if product.compare_at_price > product.price %}

<span id="ComparePriceA11y" class="visually-hidden" aria-hidden="false">You save</span>

<s id="ComparePrice" class="product-single__sale-price">

{{ product.price | minus:product.compare_at_price_max   | money }}

</s>

            {% endif %}

            {% include 'product-unit-price', variant: variant, available: true %}

          </div>

          {%- if shop.taxes_included or shop.shipping_policy.body != blank -%}

            <div class="product-single__policies{% if product.has_only_default_variant and section.settings.product_quantity_enable == false %} product__policies--no-dropdowns{% endif %} rte">

              {%- if shop.taxes_included -%}

                {{ 'products.general.include_taxes' | t }}

              {%- endif -%}

              {%- if shop.shipping_policy.body != blank -%}

                {{ 'products.general.shipping_policy_html' | t: link: shop.shipping_policy.url }}

              {%- endif -%}

Thank you, Natalie