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

Highlighted
New Member
2 0 1

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!

1 Like
Highlighted
Shopify Partner
1840 176 692

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!

Liked this post? You might also like our fantastic upsell apps Candy Rack and Candy Cart or offer free gifts with Gift Box. All made with ❤️  and care by Digismoothie
0 Likes
Highlighted
New Member
2 0 1

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
46 1 8

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
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
5 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
Highlighted
New Member
1 0 0

Hi, I am having the same issue and after much googling, I cannot figure it out either. I have no development background, so other than following a tutorial, I have no ability to figure out how to change the code to have the product price display before a customer selects the variants (size and colour) for the product (which is an item of clothing).

For each of the products on this website, the product price does not change depending on what colour or size is selected. From a usability perspective, I need to have the product price display on the product page BEFORE the user selects the size and colour of the product.

Is there someone able to share a tutorial on what I need to alter in the code or teach me, or let me know what it would cost to write this code and tell me where to put it in the relevant liquid files, it would be greatly greatly appreciated.

I am looking at this for a friend who has a small e-commerce store with a few products and a small budget. Currently, they are using WordPress (WooCommerce) which handles all of this quite well, but they are finding WordPress difficult to maintain. I want to see if I can move them over to Shopify as it seems easier to maintain overall - but if I can't figure out how to get the price to display before the product variants are selected, Shopify is not going to be a viable option for them to transfer to.

Many thanks in advance!

0 Likes
Highlighted
Shopify Partner
4 0 1

@mimicola What theme are you using? I am trying this out right now on Debut and it seems to select the first variant. Can you provide more details  please

0 Likes