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]

Wholesale Natural Crystals | Raw Stones & Healing Crystals Supplier

[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).

[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.
  

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

{{ product.price | money }}

{% if product.metafields.custom.price_per_piece %}
  

{{ product.metafields.custom.price_per_piece }} per pcs

{% endif %}

{% if product.metafields.custom.price_per_kg %}
  

{{ product.metafields.custom.price_per_kg }} per kg

{% 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 !

[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 tag

{% if product.metafields.custom.additionalprice != %}
 {{ product.metafields.custom.additionalprice }}
{% 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!

[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 %}
  

{{ product.metafields.custom.price_per_piece }} per pcs

{% endif %}

{% if product.metafields.custom.price_per_kg %}
  

{{ product.metafields.custom.price_per_kg }} per kg

{% 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:

    {{ product.price | money}}
    {% if product.metafields.custom.is_per_kg %}
       /per kg
    {% endif %}
    {% if product.metafields.custom.is_per_piece %}
       /per pcs
    {% endif %}

Please let me know if it is functioning as intended.