How can I display a price range for product options without apps?

[KLC]

I have products that need to show a range of prices based on the option that they choose. 

Medium armored shirt is $193

A Medium un-armored shirt is $93

3XL shirt armored is $209
A 3XL un-armored shirt is $109

I want the price on the product page to be a range of $93-209 but I do not see any way to do this without having to install an app and I worry the apps may not play well with others. 

Any help would be great. 

[Made4uo-Ribe · Accepted solution]

Hi @KLC 

The simple code I can think about is using map and sort. And I assume you are using theme with custom liquid enable to make it simpler to add. Please follow the instructions below. 

• From your Shopify admin dashboard, click on "Online Store" and then "Themes".
• Find the theme that you want to edit and click on "Customize".
• Go to your product page, and add a "Custom liquid" block. 
• Place the the code below in the textfield provided 

{% assign price_range = product.variants | map: "price" | sort %}
{{ price_range.first | money }} - {{  price_range.last | money }}

See image for reference:

[KLC]

WOW, awesome!!! Thank you very much. 🙂 

[magriguez]

That's great! Any advice on how to make it hide on products that don't have a price variant? Thank you.