In the Shopify store homepage product collection,

[David235]

In the Shopify store homepage product collection, how can I display additional price attributes after the price, such as "$12/pcs, $20/kg"?

[HHenry]

kindly provide your store URL please and if it is password protected, please share the password as well. Thanks

Best Regards,

HHenry

[David235]

wholesalecrystalstone.com

[HHenry]

You can  follow the instruction below: 

1. Go to Shopify > Theme > Customize

2. Copy and paste this code on Theme settings > Custom CSS section

div.price__regular {
    display: inline-block;
}
.price__container:after {
    content: "/pcs";
    margin-left: -3px;
}

You can replace pcs with your desired text.

[David235]

The collection contains multiple products, and each product may have different attributes (for example, one product is in pcs and another in kg).

[HHenry]

You can create an 'additional price' product metafield.
add this metafield display after the price display location. For example Dawn theme edit file snippets/price.liquid, paste this at the end of the file before the </div> tag

{% if product.metafields.custom.additionalprice != %}
 <span>{{ product.metafields.custom.additionalprice }}</span>
{% endif %}

Text pcs or kg config in metafield.

[David235]

I’ve already pasted this code, but how do I set up the meta fields? Could you teach me? Thank you!

[mageplaza-cs]

Hi @David235,

I am from Mageplaza - Shopify solution expert.

To display additional price attributes on the product card, you'll need to modify the HTML of the product card in your theme. Here are some suggestions to help you achieve this:

1. Locate the Product Collection Template:

• In your Shopify admin, go to Online Store > Themes.
• Find your active theme and click Actions > Edit Code.

• In the Sections folder, look for the file that controls the product card display of the price.

  Example: Mine is  "price.liquid";
     
  
  

    2.  Add Custom Price Attributes :

• To display custom price attributes like "$12/pcs" or "$20/kg", you can use product metafields . Here's how to do it:

  Using Product Metafields (Dynamic)

  1. Create Product Metafields:

     • In your Shopify admin, go to Settings > Metafields.
     • Select Products and create custom metafields for attributes like "Price per piece" and "Price per kg".
     • For example, create a metafield like price_per_piece and price_per_kg for each product.

  2. Display Metafields in the Template: Now, display these metafields after the price.

<p class="product-price">{{ product.price | money }}</p>

{% if product.metafields.custom.price_per_piece %}
  <p class="product-additional-price">{{ product.metafields.custom.price_per_piece }} per pcs</p>
{% endif %}

{% if product.metafields.custom.price_per_kg %}
  <p class="product-additional-price">{{ product.metafields.custom.price_per_kg }} per kg</p>
{% endif %}

 3. Preview and Test: Save the changes and preview your homepage.

I hope this helps, please leave a comment if you need further instructions !

[David235]

"There is no code like the one in your image."

[mageplaza-cs]

@David235 ,

I am from Mageplaza - Shopify solution expert.

I researched your website and found that the 'price.liquid' file may differ among themes, but the structure of the file is mostly the same. You can press 'Ctrl + F' and type 'price__container' to find it in your 'price.liquid' file and modify it as needed.

I hope this helps, please leave a comment if you need further instructions !

[David235]

It didn't work, I set the meta field and it didn't work.

[mageplaza-cs]

Hi @David235,

Can you show me the updated metafields and the price.liquid file?

[David235]

[David235]

Product Meta Field Definitions
What to add? I added the code you gave me then I set up the product meta field and added the meta field in the product editor and it's not working either.

[mageplaza-cs]

Hi @David235 

Here are steps to add metafields :

1. Go to the Shopify Admin Panel:

   • Log in to your Shopify account.
   • Navigate to Settings > Custom data (formerly Metafields).

2. Choose the Product Resource:

   • Click on Products under the Metafields section.

3. Define a New Metafield:

   • Click Add definition.
   • Enter a Name (e.g., "Material" or "Custom Note").
   • Choose the appropriate Namespace and Key (e.g., custom.price_per_kg, custom.price_per_piece).
   • Select the Type (e.g., Single-line text, Integer, URL, etc.).
   • Add optional validation rules (e.g., character limits, required fields).

4. Save the Metafield Definition.

5. Add Metafield Values to Products:

   • Go to the Products page in your admin.
   • Select a product and scroll to the Metafields section.
   • Enter the value for the custom metafield.
   • Save the product.

Here is the result in product page: 

To display the price, simply copy the code below and paste it wherever you want to display it:

{% if product.metafields.custom.price_per_piece %}
  <p class="product-additional-price">{{ product.metafields.custom.price_per_piece }} per pcs</p>
{% endif %}

{% if product.metafields.custom.price_per_kg %}
  <p class="product-additional-price">{{ product.metafields.custom.price_per_kg }} per kg</p>
{% endif %}

Kindly let me know if it is functioning as intended.

[David235]

[David235]

There's three prices now.

[mageplaza-cs]

Hi @David235 

The metafields are functioning as expected now. Could you please describe how you would like them to be displayed?

[David235]

Just add the attribute of the dollar field after the price

[mageplaza-cs]

I understand your point, therefore, we need to make the necessary adjustments to the metafields:

Apply the appropriate value for the product (per kg or per piece):

And update price.liquid:

<p class="product-price">
    {{ product.price | money}}
    {% if product.metafields.custom.is_per_kg %}
       /per kg
    {% endif %}
    {% if product.metafields.custom.is_per_piece %}
       /per pcs
    {% endif %}
</p>

Please let me know if it is functioning as intended.

[David235]

Can't my friend add pcs or kg to the original price?

[mageplaza-cs]

@David235 ,I want to clarify whether you need to add (kg/pcs) above the price, below the price, or both?

[David235]

Add both 2 and feel free to choose whether it's KG or pcs.

[David235]

Then I set it all up but the kg doesn't show up

[mageplaza-cs]

Please show me how you set up the metafield for kg, and make sure that you have set the kg value of the product to 'true'.

[David235]

I've opened it but the front page doesn't show up

[mageplaza-cs]

I'm pretty sure that the issue came from the namespace and key due to the difference in names.

<p class="product-price">
    {{ product.price | money}}
    {% if product.metafields.custom.is_per_kg %}
       /per kg
    {% endif %}
    {% if product.metafields.custom.is_per_piece %}
       /per pcs
    {% endif %}
</p>

The text after 'product.metafields' must match exactly the key of the metafield to function properly.

[David235]

[mageplaza-cs]

You need to change "custom.is_per_kg" to "custom.is_per_KG" in your price.liquid file because your key is

[David235]

yes，kg No KG
But can it be shown on the original price?

[mageplaza-cs]

Yes, it can be shown wherever you want. Please describe clearly where and when you would like it to be displayed.

[David235]

I just want the home page and the original price of the product to be displayed on it, and not to set an extra line for the price, is that ok?

[mageplaza-cs]

There are three types of prices. If you mean to display it after the product price, it is currently working that way.

[David235]

Is it okay if I want it formatted like this? Thank you.

[David235]

Is it okay if I want it formatted like this? Thank you.

[mageplaza-cs]

@David235Could you provide the full content of your 'price.liquid'? I will customize it for you.

[David235]

{% comment %}
Renders a list of product's price (regular, sale)

Accepts:
- product: {Object} Product Liquid object (optional)
- use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
- show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
- price_class: {String} Adds a price class to the price element (optional)
- hide_currency_code: {Boolean} hide currency code regardless of what setting is chosen

Usage:
{% render 'price', product: product %}
{% endcomment %}
{%- liquid
if use_variant
assign target = product.selected_or_first_available_variant
else
assign target = product
endif

assign compare_at_price = target.compare_at_price
assign price = target.price | default: 1999
assign available = target.available | default: false
assign money_compare_at_price = compare_at_price | money
assign money_price = price | money
unless hide_currency_code
if settings.currency_code_enabled
assign money_price = price | money_with_currency
assign money_compare_at_price = compare_at_price | money_with_currency
endif
endunless

if target == product and product.price_varies
assign money_price = 'products.product.price.from_price_html' | t: price: money_price
endif
-%}

<div
class="
price
{%- if price_class %} {{ price_class }}{% endif -%}
{%- if available == false %} price--sold-out {% endif -%}
{%- if compare_at_price > price %} price--on-sale {% endif -%}
{%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
{%- if show_badges %} price--show-badge{% endif -%}
"
>
<div class="price__container">
{%- comment -%}
Explanation of description list:
- div.price__regular: Displayed when there are no variants on sale
- div.price__sale: Displayed when a variant is a sale
{%- endcomment -%}
<div class="price__regular">
<span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
<span class="price-item price-item--regular{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
{{ money_price }}
</span>
</div>
<p class="product-price">
{{ product.price | money}}
{% if product.metafields.custom.is_per_kg %}
/per kg
{% endif %}
{% if product.metafields.custom.is_per_piece %}
/per pcs
{% endif %}
</p>
<div class="price__sale {% if price_second %} price__sale--price-second{% endif %}">
<span class="visually-hidden visually-hidden--inline compare-price-label">
{{- 'products.product.price.regular_price' | t -}}
</span>
<span class="price-item price-item--sale price-item--last{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
{{ money_price }}
</span>
{%- unless product.price_varies == false and product.compare_at_price_varies %}
<span class="visually-hidden visually-hidden--inline regular-price-label">
{{- 'products.product.price.sale_price' | t -}}
</span>
<span class="price__compare-price">
<s class="price-item price-item--regular{% if main_price %} main-comapre-price accent-color-{{ block.settings.compare_price_color }}{% endif %}">
{{ money_compare_at_price }}
</s>
</span>
{%- endunless -%}
</div>
<small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
<span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
<span class="price-item price-item--last">
<span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
<span aria-hidden="true">/</span>
<span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
<span>
{%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
{{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
{%- endif -%}
{{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
</span>
</span>
</small>
</div>
{%- if show_badges -%}
{% unless hide_sale_badge %}
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{% assign percentage_saved = compare_at_price | minus: price | times: 100.0 | divided_by: compare_at_price | floor | append: '%' %}
{% capture money_saved %}
{{ compare_at_price | minus: price | money_without_trailing_zeros }}
{% endcapture %}
{% if settings.sale_basge_discount_icon %}{% render 'icon-discount' %}{% endif %}<span class='nowrap'>{{ settings.sale_badge_text | replace: '[percentage]', percentage_saved | replace: '[amount]', money_saved }}</span>
</span>
{% endunless %}
<span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
{{ 'products.product.sold_out' | t }}
</span>
{%- endif -%}
</div>

[mageplaza-cs]

Here is updated version, please let me know if it's working correctly

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - hide_currency_code: {Boolean} hide currency code regardless of what setting is chosen

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
  if use_variant
    assign target = product.selected_or_first_available_variant
  else
    assign target = product
  endif

  assign compare_at_price = target.compare_at_price
  assign price = target.price | default: 1999
  assign available = target.available | default: false
  assign money_compare_at_price = compare_at_price | money
  assign money_price = price | money
  unless hide_currency_code
    if settings.currency_code_enabled
      assign money_price = price | money_with_currency
      assign money_compare_at_price = compare_at_price | money_with_currency
    endif
  endunless

  if target == product and product.price_varies
    assign money_price = 'products.product.price.from_price_html' | t: price: money_price
  endif
-%}

<div
  class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out {% endif -%}
    {%- if compare_at_price > price %} price--on-sale {% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
  <div class="price__container">
    {%- comment -%}
      Explanation of description list:
      - div.price__regular: Displayed when there are no variants on sale
      - div.price__sale: Displayed when a variant is a sale
    {%- endcomment -%}
    <div class="price__regular">
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
      <span class="price-item price-item--regular{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
        {{ money_price }}
      </span>
    </div>
    <p class="product-price">
      {{ product.price | money }}
      {% if compare_at_price > price %}
      {% else %}
        {% if product.metafields.custom.is_per_kg %}
          /per kg
        {% endif %}
        {% if product.metafields.custom.is_per_piece %}
          /per pcs
        {% endif %}
      {% endif %}
    </p>
    <div class="price__sale {% if price_second %} price__sale--price-second{% endif %}">
      <span class="visually-hidden visually-hidden--inline compare-price-label">
        {{- 'products.product.price.regular_price' | t -}}
      </span>
      <span class="price-item price-item--sale price-item--last{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
        {{ money_price }}
      </span>
      {%- unless product.price_varies == false and product.compare_at_price_varies %}
        <span class="visually-hidden visually-hidden--inline regular-price-label">
          {{- 'products.product.price.sale_price' | t -}}
        </span>
        <span class="price__compare-price">
          <s class="price-item price-item--regular{% if main_price %} main-comapre-price accent-color-{{ block.settings.compare_price_color }}{% endif %}">
            {{ money_compare_at_price }}
          </s>
        </span>
        {% if product.metafields.custom.is_per_kg %}
          /per kg
        {% endif %}
        {% if product.metafields.custom.is_per_piece %}
          /per pcs
        {% endif %}
      {%- endunless -%}
    </div>
    <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
      <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
      <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
            {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
          {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
    </small>
  </div>
  {%- if show_badges -%}
    {% unless hide_sale_badge %}
      <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
        {% assign percentage_saved = compare_at_price
          | minus: price
          | times: 100.0
          | divided_by: compare_at_price
          | floor
          | append: '%'
        %}
        {% capture money_saved %}
{{ compare_at_price | minus: price | money_without_trailing_zeros }}
{% endcapture %}
        {% if settings.sale_basge_discount_icon %}{% render 'icon-discount' %}{% endif -%}
        <span class="nowrap">
          {{-
            settings.sale_badge_text
            | replace: '[percentage]', percentage_saved
            | replace: '[amount]', money_saved
          -}}
        </span>
      </span>
    {% endunless %}
    <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
  {%- endif -%}
</div>

[David235]

No way. There are 2 others for the same price.

[mageplaza-cs]

I sincerely apologize, I forgot to edit 'kg' to 'KG.' Can you please edit it for me ?

As I researched, there are two ways of displaying prices:

• On-sale products: The product price and sale price are shown.
• Other products: The regular price and product price are displayed.

Based on your description, I thought you wanted to show '/per (KG/pcs)' after the bottom price. Did I misunderstand you?

[David235]

I just want to display a single price without adding an extra line. It would be better to include "pcs" or "kg" next to the original price.

[mageplaza-cs]

You want to display it this way, right?

[mageplaza-cs]

Here is the updated version

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - hide_currency_code: {Boolean} hide currency code regardless of what setting is chosen

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
    if use_variant
        assign target = product.selected_or_first_available_variant
    else
        assign target = product
    endif

    assign compare_at_price = target.compare_at_price
    assign price = target.price | default: 1999
    assign available = target.available | default: false
    assign money_compare_at_price = compare_at_price | money
    assign money_price = price | money
    unless hide_currency_code
        if settings.currency_code_enabled
            assign money_price = price | money_with_currency
            assign money_compare_at_price = compare_at_price | money_with_currency
        endif
    endunless

    if target == product and product.price_varies
        assign money_price = 'products.product.price.from_price_html' | t: price: money_price
    endif
-%}

<div
        class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out {% endif -%}
    {%- if compare_at_price > price %} price--on-sale {% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
    <div class="price__container">
        {%- comment -%}
          Explanation of description list:
          - div.price__regular: Displayed when there are no variants on sale
          - div.price__sale: Displayed when a variant is a sale
        {%- endcomment -%}
        {%- comment -%}
            <div class="price__regular">
              <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
              <span class="price-item price-item--regular{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
                {{ money_price }}
              </span>
            </div>
            {%- endcomment -%}
        <p class="product-price">
            {{ product.price | money }}
            {% if compare_at_price > price %}
            {% else %}
                {% if product.metafields.custom.is_per_KG %}
                    /per kg
                {% endif %}
                {% if product.metafields.custom.is_per_piece %}
                    /per pcs
                {% endif %}
            {% endif %}
        </p>
        <div class="price__sale {% if price_second %} price__sale--price-second{% endif %}">
      <span class="visually-hidden visually-hidden--inline compare-price-label">
        {{- 'products.product.price.regular_price' | t -}}
      </span>
            <span class="price-item price-item--sale price-item--last{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
        {{ money_price }}
      </span>
            {%- unless product.price_varies == false and product.compare_at_price_varies %}
                <span class="visually-hidden visually-hidden--inline regular-price-label">
          {{- 'products.product.price.sale_price' | t -}}
        </span>
                <span class="price__compare-price">
          <s class="price-item price-item--regular{% if main_price %} main-comapre-price accent-color-{{ block.settings.compare_price_color }}{% endif %}">
            {{ money_compare_at_price }}
          </s>
        </span>
                {% if product.metafields.custom.is_per_KG %}
                    /per kg
                {% endif %}
                {% if product.metafields.custom.is_per_piece %}
                    /per pcs
                {% endif %}
            {%- endunless -%}
        </div>
        <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
            <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
              {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
            {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
        </small>
    </div>
    {%- if show_badges -%}
        {% unless hide_sale_badge %}
            <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
        {% assign percentage_saved = compare_at_price
                | minus: price
                | times: 100.0
                | divided_by: compare_at_price
                | floor
                | append: '%'
        %}
                {% capture money_saved %}
                    {{ compare_at_price | minus: price | money_without_trailing_zeros }}
                {% endcapture %}
                {% if settings.sale_basge_discount_icon %}{% render 'icon-discount' %}{% endif -%}
        <span class="nowrap">
          {{-
          settings.sale_badge_text
          | replace: '[percentage]', percentage_saved
          | replace: '[amount]', money_saved
          -}}
        </span>
      </span>
        {% endunless %}
        <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
    {%- endif -%}
</div>

[David235]

My friend, is it not possible to change the price from the original? Then the price with the discount becomes this.

Here's an extra 12$.
Can I add pcs or kg to the price on my original thread?

Trouble, my friend.

[mageplaza-cs · Accepted solution]

Hi friend,I can edit the price as you wish as long as there is a clear description or an illustration image, you can try this and let me know if there are any issues.

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object (optional)
  - use_variant: {Boolean} Renders selected or first variant price instead of overall product pricing (optional)
  - show_badges: {Boolean} Renders 'Sale' and 'Sold Out' tags if the product matches the condition (optional)
  - price_class: {String} Adds a price class to the price element (optional)
  - hide_currency_code: {Boolean} hide currency code regardless of what setting is chosen

  Usage:
  {% render 'price', product: product %}
{% endcomment %}
{%- liquid
    if use_variant
        assign target = product.selected_or_first_available_variant
    else
        assign target = product
    endif

    assign compare_at_price = target.compare_at_price
    assign price = target.price | default: 1999
    assign available = target.available | default: false
    assign money_compare_at_price = compare_at_price | money
    assign money_price = price | money
    unless hide_currency_code
        if settings.currency_code_enabled
            assign money_price = price | money_with_currency
            assign money_compare_at_price = compare_at_price | money_with_currency
        endif
    endunless

    if target == product and product.price_varies
        assign money_price = 'products.product.price.from_price_html' | t: price: money_price
    endif
-%}

<div
        class="
    price
    {%- if price_class %} {{ price_class }}{% endif -%}
    {%- if available == false %} price--sold-out {% endif -%}
    {%- if compare_at_price > price %} price--on-sale {% endif -%}
    {%- if product.price_varies == false and product.compare_at_price_varies %} price--no-compare{% endif -%}
    {%- if show_badges %} price--show-badge{% endif -%}
  "
>
    <div class="price__container">
        {%- comment -%}
          Explanation of description list:
          - div.price__regular: Displayed when there are no variants on sale
          - div.price__sale: Displayed when a variant is a sale
        {%- endcomment -%}
        {%- comment -%}
            <div class="price__regular">
              <span class="visually-hidden visually-hidden--inline">{{ 'products.product.price.regular_price' | t }}</span>
              <span class="price-item price-item--regular{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
                {{ money_price }}
              </span>
            </div>
            {%- endcomment -%}
        <p class="product-price">
            {% if compare_at_price > price %}
            {% else %}
                {{ product.price | money }}
                {% if product.metafields.custom.is_per_KG %}
                    /per kg
                {% endif %}
                {% if product.metafields.custom.is_per_piece %}
                    /per pcs
                {% endif %}
            {% endif %}
        </p>
        <div class="price__sale {% if price_second %} price__sale--price-second{% endif %}">
      <span class="visually-hidden visually-hidden--inline compare-price-label">
        {{- 'products.product.price.regular_price' | t -}}
      </span>
            <span class="price-item price-item--sale price-item--last{% if main_price %} main-price accent-color-{{ block.settings.price_color }}{% endif %}">
        {{ money_price }}
      </span>
            {%- unless product.price_varies == false and product.compare_at_price_varies %}
                <span class="visually-hidden visually-hidden--inline regular-price-label">
          {{- 'products.product.price.sale_price' | t -}}
        </span>
                <span class="price__compare-price">
          <s class="price-item price-item--regular{% if main_price %} main-comapre-price accent-color-{{ block.settings.compare_price_color }}{% endif %}">
            {{ money_compare_at_price }}
          </s>
        </span>
                {% if product.metafields.custom.is_per_KG %}
                    /per kg
                {% endif %}
                {% if product.metafields.custom.is_per_piece %}
                    /per pcs
                {% endif %}
            {%- endunless -%}
        </div>
        <small class="unit-price caption{% if product.selected_or_first_available_variant.unit_price_measurement == nil %} hidden{% endif %}">
            <span class="visually-hidden">{{ 'products.product.price.unit_price' | t }}</span>
            <span class="price-item price-item--last">
        <span>{{- product.selected_or_first_available_variant.unit_price | money -}}</span>
        <span aria-hidden="true">/</span>
        <span class="visually-hidden">&nbsp;{{ 'accessibility.unit_price_separator' | t }}&nbsp;</span>
        <span>
          {%- if product.selected_or_first_available_variant.unit_price_measurement.reference_value != 1 -%}
              {{- product.selected_or_first_available_variant.unit_price_measurement.reference_value -}}
          {%- endif -%}
            {{ product.selected_or_first_available_variant.unit_price_measurement.reference_unit }}
        </span>
      </span>
        </small>
    </div>
    {%- if show_badges -%}
        {% unless hide_sale_badge %}
            <span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
        {% assign percentage_saved = compare_at_price
                | minus: price
                | times: 100.0
                | divided_by: compare_at_price
                | floor
                | append: '%'
        %}
                {% capture money_saved %}
                    {{ compare_at_price | minus: price | money_without_trailing_zeros }}
                {% endcapture %}
                {% if settings.sale_basge_discount_icon %}{% render 'icon-discount' %}{% endif -%}
        <span class="nowrap">
          {{-
          settings.sale_badge_text
          | replace: '[percentage]', percentage_saved
          | replace: '[amount]', money_saved
          -}}
        </span>
      </span>
        {% endunless %}
        <span class="badge price__badge-sold-out color-{{ settings.sold_out_badge_color_scheme }}">
      {{ 'products.product.sold_out' | t }}
    </span>
    {%- endif -%}
</div>