Tinker theme 'from pricing' collection page

[BandO]

Hi, I’m looking at the tinker theme from the new horizon themes. I noticed it does not show the ‘from’ price on items on the collection page when theres varying prices of varients. Is there a way of correcting this without using an app? or is there any other horizon themes that do show the ‘from’ price on the collection page

[Websitedivaa]

Hello @BandO

Yeah, that’s a common thing with the Tinker theme. By default, it doesn’t show the “From” price on the collection page when products have variant prices. You can actually fix it pretty easily without using any app.

Here’s what to do:

1. Go to Online Store → Themes → Edit code

2. Open card-product.liquid (or sometimes main-collection-product-grid.liquid)

3. Look for where the product price is displayed — it should look like this:{{ product.price | money }}

4. Replace that part with this:{% if product.price_varies %}

From {{ product.price_min | money }}

{% else %}

{{ product.price | money }}

{% endif %}

That’ll make it show “From $X” whenever your product has variants with different prices.

If you want the “From” text to look a bit lighter or smaller, you can add a small CSS tweak like this:

.price–from {font-size: 0.9em;color: #777;}

It’s a simple fix and works fine for most of the Horizon themes too.

Hope that helps!

[devcoders]

Hi @BandO

Ok dear, please share your store URL and collaborator code with me so I can check and provide you with the proper solution.

[tim_1]

Yes, Horizon family of themes show the price of the first variant on collection page, which is misleading.

You can, however, fix it without editing theme code, which is a huge beenfit.
You need to hide the “Price” block and add a “Custom liquid” block right next:

Put this code into “Custom block”:

<div ref="priceContainer">
  <span class="price">
    {% assign price = closest.product.price | money_with_currency %}

    {% if closest.product.price_varies %}
      {{ 'content.price_from' | t: price: price }}
    {% else %}
      {{ price  }}
    {% endif %}
  </span>
</div>