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

[Musinsa]

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

Sample images are below:

 

My pages like these : 

[Musinsa]

 {%- if sca_compare_at_price > sca_price -%}
    <span class="ProductItem__Price Price Price--SalePer SalePer Text--subdued">{{sca_compare_at_price | minus: sca_price | times: 100 | divided_by: sca_compare_at_price | replace: '0,', ''| append: "% OFF"}}</span><br>
      {%- endif -%}

product-item.liquid

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

[Musinsa]

product-meta.liquid

   {%- if product.compare_at_price > product.price -%}
    <div class="ProductMeta__Price Price Price--SalePer SalePer Text--subdued u-h4">{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | replace: '0,', ''| append: "% OFF"}}</div>
      {%- 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 -%}
    <div class="ProductMeta__Price Price Price--SalePer SalePer Text--subdued u-h4">{{product.compare_at_price | minus: product.price | times: 100 | divided_by: product.compare_at_price | replace: '0,', ''| append: "% OFF"}}</div>
      {%- endif -%}

[Musinsa]

theme.css

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

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