How to change price label on product cards?

Technical Q&A
1

I’m using the Live Product Options app in shopify, a lot of my products are “$0” until options are added in the product page. I’ve made the actual products themselves $0 in shopify, value is only added when options from the app are selected in the product. Is there a way that I can change the product cards prices to say “From $20” (for example), instead of them all just saying “$0”? I hope this makes sense.

Any help is appreciated! Thank you!

3

The theme I’m using is Dawn 15.4.0

4

Hi @dzeyener ,
Yes, this is a pretty common setup when using Live Product Options or other custom options apps (Infinite Options, Bold, etc.), where the base product is $0 and the real price only comes from the options.

The problem is that Shopify’s collection pages and product cards only read the actual product.price (or product.price_min / product.price_max), so everything shows $0.

Ways you can fix it

Option 1: Hard-code a “From $X” label with metafields

  • Create a product metafield (ex: minimum_price) and set your “From” price for each product (20, 50, etc.).
  • In your theme’s product card template (usually snippets/product-card.liquid or similar in Dawn/Prestige/etc.), replace the default price output with something like:
{% if product.metafields.custom.minimum_price %}
  <span class="price">From {{ product.metafields.custom.minimum_price | money }}</span>
{% else %}
  {{ product.price | money }}
{% endif %}

Option 2: Use Compare-at price hack

  • Set your base product price in Shopify to the minimum option price ($20).
  • Then use the app’s price add-ons for extras.
  • This ensures that product cards naturally display From $20, while options add on top.
  • Downside: If you really need a $0 base in the checkout/cart, this won’t work well.
5

Hi @dzeyener,

Please send the website link, I will check it for you

6

Hi @dzeyener :waving_hand:

Yes — this makes perfect sense, and it’s a common scenario when using Live Product Options or similar apps that add pricing dynamically. The key is that Shopify by default displays the product’s base price ($0 in your case) on product cards, because it doesn’t know about the app’s options.

Here’s how you can handle it in Dawn 15.4.0:

:one: Use “Starting at” Price via JavaScript

You can dynamically replace the $0 on product cards with a “From $X” label. For example:

document.addEventListener('DOMContentLoaded', function() {
  document.querySelectorAll('.price').forEach(function(priceElement) {
    if(priceElement.innerText.trim() === '$0.00') {
      priceElement.innerText = 'From $20'; // replace 20 with your minimum option price
    }
  });
});

  • Paste this code in Online Store → Themes → Actions → Edit Code → Assets → base.js (or create a new JS file and include it).

  • Adjust the selector .price if your theme uses a different class for product card prices.

:two: Optional: Pull Minimum Price from Live Product Options App

  • Some apps provide a minimum price setting or a data attribute you can read via JS.

  • If your app supports it, you can make this dynamic instead of hardcoding $20.

Example (pseudo-code):

let minPrice = productCard.dataset.minOptionPrice; // from the app
priceElement.innerText = 'From $' + minPrice;

:three: Theme Code Alternative

  • You can also override the product card Liquid template:

    1. Edit product-card.liquid in Sections.

    2. Instead of {{ product.price | money }}, use a conditional:

{% if product.price == 0 %}
  From $20
{% else %}
  {{ product.price | money }}
{% endif %}

Hardcoding $20 works if all products share the same minimum starting price.

:light_bulb: Tip: Always duplicate your theme before editing code and test on multiple product cards to ensure it displays correctly.

7

It is a very common setup when using Live Product Options, By default, Shopify shows the base price in collection/products. you can use a metafield to display a “Starting Price” .

  1. Create a product metafield (For example: starting_price).

  2. Enter the starting price for each product in that metafield.

  3. To display it on Product page, please follow below:

    1. Go to Online Store > Themes > Edit code.
    2. Open your theme’s Sections or Snippets folder
    3. Find the file main-collection-product-grid.liquid, card-product.liquid, or product-grid-item.liquid (depends on your theme).
    4. Search for product.price or | money:
    5. Replace: {{ product.price | money }} with {{ product.metafields.starting_price | money }}

  4. Save the file and test, your products will now show custom price instead of $0.