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

Nikita7
Visitor
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!

Replies 12 (12)

KarlOffenberger
Shopify Partner
1873 184 900

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!

Ardi94
Shopify Partner
104 3 32

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

DanGuillermo
New Member
4 0 0

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

mimicola
Visitor
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!

TechTips
Shopify Partner
6 0 3

@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

TechTips
Shopify Partner
6 0 3

I made a video tutorial on this for the Minimal Theme. Please take a look at it and see if it can help you out in any of the steps @Mimii https://youtu.be/HusdfandN2A . If it helped you out don't forget to like it 🙂 

Nikita7
Visitor
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!

littletingles
Excursionist
40 2 3

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

benleach9
Shopify Partner
3 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
Luvumor
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?

CptPillow
Visitor
1 0 0

Good day everyone I know this post is old and a different theme that I am working on but just got it working on my site.

All that I changed was the variant to product as shown below and it worked 100% for my store

These changes were on my product template where the price is included.

CptPillow_0-1639471338262.png

CptPillow_1-1639471370503.png

I hope this can help if someone in the future.

aleksandersolbe
Visitor
2 0 0

Hi, Could you please add the code in text/numbers (not screenshot) so it´s possible to copy paste? 😊