How do I show price when no variant is selected ('Pick an Option' is default)?

Highlighted
New Member
2 0 0

Hello Shopify Commmunity,

I followed the articles below to disable the first variant from showing on my product pages, but rather the main featured image together with 'Pick an Option' in the selectors.

https://help.shopify.com/en/themes/customization/products/variants/show-featured-image-on-product-pa...

https://help.shopify.com/en/themes/customization/products/variants/how-to-add-a-pick-an-option-to-dr...

It worked well with my Debut theme.

The only issue I am having is that when no variant is selected by default, the price is no longer shown. There is simply an empty space. I want to change this and show the lowest available price by default.

Ironically, as shown above, Shopify warms of this potentially happening inside their tutorial. However, the demo store that they made for the tutorial manages to overcome this, so I know there must be a way.

There have been previous posts about this but with no resolution. I would appreciate any help or advice to where I can turn with this as it is important and I am even willing to spend some money to get it resolved.

Many thanks!

0 Likes
Highlighted
Shopify Partner
1838 176 673

Hi Nikita,

You will need to adapt the code from the tutorial and / or the product detail tamplate to use this

{{ product.price_min }}

Alternatively, you can look to

<script type="application/json" id="ProductJson-product-template">
// all your product variant data as JSON
</script>

and do it entirely client side.

Hope this helps and happy NYE!

I turn coffee in to code - since 1998
0 Likes
Highlighted
New Member
2 0 0

Hi Karl,

Many thanks for your response.

I'm somewhat new to code and don't quite understand. Could you elaborate please?

Where in the tutorial's code should I replace with the above?

Thank you!

0 Likes
Highlighted
Excursionist
42 1 6

Hi, I know this post is outdated but I'm also having the same issue and can't find a solution for it.

-Like and Mark as an Accepted Solution if my reply is helpful
I'm not an expert, these are my own experiences or codes that I gathered from others. I'm using Debut.
I have my own online pet supply store check it out at
PETLANTIS.CA
0 Likes
Highlighted
New Member
4 0 0

I know this is old but wondering if anyone found a solution?

0 Likes
Highlighted
Excursionist
40 2 1

same problem. Not sure why a proper answer hasn't been given?

0 Likes
Highlighted
Shopify Partner
1 0 0

Hi Nikita,

 

To resolve this problem firstly stop the javascript showing unavailable prices, by going to your theme.js and replacing: 

productUnavailable: 'price--unavailable',

with: 

/* productUnavailable: 'price--unavailable',*/

secondly, go into your product-price.liquid file and replace: (worth noting that the value of 1999 might differ between stores, so search for "assign compare_at_price", and its the second one from the top)

else
    assign compare_at_price = 1999
    assign price = 1999

with: 

else
    assign compare_at_price = product.compare_at_price
    assign price = product.price

Hope that helps!

Available for helping you with your store - anything code and design based
0 Likes
Highlighted
New Member
3 0 0

I have the same problem as the OP. I could not find the above code in theme.js.liquid. Anyone else with a solution on how to show the product.price_min on the product page even when no variant has been selected? I have already changed the button translation to show "Make a Selection" instead of "Unavailable" until a variant is chosen. But I want the from price to show, as it does in the demo store (see OP's post and links to the tutorials). Anyone with instructions on how to do this please?

0 Likes