Prestige Theme - How To Set A Sale Badge Such As 00% OFF on product page?

How can I set a 10% OFF on the product page and collection page?

Sample images are below:

My pages like these :

{%- if sca_compare_at_price > sca_price -%}
    {{sca_compare_at_price | minus: sca_price | times: 100 | divided_by: sca_compare_at_price | replace: '0,', ''| append: "% OFF"}}

      {%- endif -%}

product-item.liquid

Pasted the code below “{%- if show_product_info -%}” , so I could set on a collection page.

product-meta.liquid

{%- if product.compare_at_price > product.price -%}
    {{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | replace: '0,', ''| append: "% OFF"}}

      {%- endif -%}

Put source code below “{%- if block.settings.show_sku and product.selected_or_first_available_variant.sku != blank -%}”,

The result is :

{%- if settings.currency_code_enabled -%}

{%- endif -%}

{%- if product.compare_at_price > product.price -%}
    {{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | replace: '0,', ''| append: "% OFF"}}

      {%- endif -%}

theme.css

/**
 * ----------------------------------------------------------------------------
 * Sale
 * ----------------------------------------------------------------------------
 */

.SalePer { 
color: #ffffff;
    background-color: #e33434;
    padding: 0 4px;
}