I’ve created a pricing table for my storefront using custom CSS within a multicolumn section. Currently, the prices in the table are static text within the section description.
I’d like to know if it’s possible to link these displayed prices dynamically to a product’s price, so the table will show the actual product prices. My goal is to have the pricing adjust based on the viewer’s location (i.e., reflect the correct currency and price) and store the pricing options as products.
Is this possible? Or is there a better way to implement this (while keeping it within the style of a pricing table)? I’d love any recommendations - preferably without paying for an app.
Thanks!
Are you displaying prices for a specific product? I mean you know which product you want to show these prices for?
Yes I would like to have them point to a specific product and I’ll set up a product for each of the three pricing options (if that makes sense)
I am sure you pretty much knowledge that this will involve coding.
What comes to my mind is since there are only three products we can loop through products and by checking with the product title or handle, etc we can assign it to that specific card or render that specific card and populate the content from that data
Thanks for the advice! Yeah I knew there would be a bit of coding involved. My knowledge of coding doesn’t go much further than CSS unfortunately. Would you be able to explain the code a little more? Would I have to create a custom section (liquid) for this? Thank you
I tried explaining the theory above. What I can do for you is implement this for you and then explain my approach to this of its ok with you
Best
Shadab
Thank you that would be much appreciated!
Please send your store url and collaborator access code.
Thank you! Here’s my url: https://nateswann-test.myshopify.com/ and access code: 1529
Hi @NateSwann I am pretty much done. If you now see any column inside your multi-column section you will have an option to select a product at the very top and the prices that are being displayed are dynamic. if ypu check i have removed the static text price you added and the price displays from the product.
Hope this helps
Best
Shadab
Amazing!!! Thank you so much you’re a life saver. Really appreciate the help. Out of curiosity, is there a way to adjust the code to remove the decimals and keep it as an integer if I needed to? Thanks again.
Yes if you look into code just before the info of your list starts you will find I am displaying prices with h4. Inside the h4 tag I have used a term money you can replace that with money_without_trailing_zeroes
Please check the spelling, you will probably get a auto fill feature once you start typing
Best
Shadab
Is there a way to keep currency shown while removing the trailing zeroes?
Sorry to be a nuisance again, but is it possible to have the option to select a variant of a product if needed? How difficult would it be to implement this?
Will have to check that to remove zero while showing currencies.
And for the other one do you need like to select a specific variant option of your choice on load rather than Shopify choosing the first selected or available variant?
Yes, similar to how the product is selected, is there a way I can have it setup to select the variant as well?
When you are on the product page we can say that every variant is a product in itself. Lets say for example you have a product with 3 color variants red, green, blue in this order. Now suppose you have all color variants available for this product. So what shopify does it selects the first color variant that was selected before or which is available which in this would be red when the page first loads. But you want to select the green variant automatically when the page loads. Is this what you are trying to implement? If yes do you want it for a particular product or do you need this feature for more than 1 product?
Tried and managed to come up with a hack. This is what i did
{{ product.price | money_without_trailing_zeros }} {{ shop.currency }}
So i used the filter i told you about beforemoney_without_trailing_zeros an added an extra shop.currency to include the currency of the shop
Yes, I’d like to choose between the variants for any product that has been selected in that pricing table column. For example, the three options on the table could all have the same product selected but I could choose to select a different variant for each, which would show the price set for that particular variant e.g. A membership product which would have variants for monthly, quarterly, and annually payment options (shown across the three columns but under the same product). I hope that makes sense.
Certainly sounds advanced.
As far as I understood i believe you should select a product and then show no of cards according to their no of variants. So if the product has 2 plans it will show 2 cards, if 3 then 3 and obviously the price will be dynamic but on that case you might have to use metafields and may be metaobjects to populate the other data other than price like description, what the plan offers, etc.
Before I edited code such that you get to select each product for each card which as I now understand is not feasible.
If you can also share a site or may be a video example for a better understanding.
