Add price per portion/serving to Product Page

Store Design
, , , ,
1

Hello everyone,

we sell powder-based soft drinks for mixing with water. A can of 400g powder costs €39.99 and makes 50 portions.

The price per portion is approx. 0.79€ and is therefore significantly cheaper than a can of energy drink from the supermarket.

We would like to place this price advantage prominently on our product page next to the sales price of the products.

The price per portion should be highlighted in color and ideally also marked with a Font Awesome icon.

As we sell different product groups that have different content quantities (250g, 320g, 400g), the “number of portions” should be stored as metafields.

I am looking for someone to help me add the price per portion next to the sales price on the product page.

In the attachment you will find 2 examples of stores that have already implemented this function on the product page:

  1. https://de.weareholy.com/collections/holy-energy/products/cherry-cheetah

Screenshot_20231230-170910.png
Screenshot_20231230-170910.png1079×441 44.1 KB

  1. https://hydraid.com/products/hydration-helper-lemon

Screenshot_20231230-170926.png
Screenshot_20231230-170926.png1079×455 51.1 KB

Our store:

https://www.just-legends.com/

For your information: We are relaunching our store in January and also changing the theme. Here is a screenshot of our new product page, on which I have already marked the placement of the “price per portion” element:

Screenshot_20231230-171630~3.png
Screenshot_20231230-171630~3.png1080×2082 279 KB

If you have any questions, please contact me.

If you need further information, I will be happy to provide it.

I look forward to your answers.

Thank you very much!

Kind regards

Mario

1 Like
2

Hi @Just_Mario If you need this customization then contact me by my email for services.
Contact info in forum signature.
ALWAYS please provide context, examples: store url, theme name, post url(s) , or any further detail in ALL correspondence.

To simply add a price per portion, or erroneously a cost per unit, some OS2.0 themes have a custom-liquid block available for the product-info section. So for a product with only one variant you’d just use the metafield directly i.e. {{ products.first_available_or_selected.variant.metafields.info.portion.value }}.

For multivariant products you need javascript to update the value as the user selects options.

Though in the layout custom-liquid outputs will often be in the next "row" in the area and not be flush to other elements like the product price. So may need CSS to bring both displays onto the same line though the html structure doesn’t always make this possible. Keepin in mind smaller screens may purposefully need both to be on separate lines*.*