Showing "from..." Price in Horizon Theme

Hello,

I am looking for a way to display a “from…” price in my product tiles. I have already searched, but none of the solutions worked for me. I am using the Horizon theme. I have already found out that I probably need to adjust it in price.liquid in the snippets, but unfortunately I don’t know how :slight_smile: Can anyone help me?

Here is an example that I built in photoshop:

Thanks! Sascha

So basically you just need the price to be from..and then state the lowest price, right??

@Gazpod can you please share your website link where you hot this screenshot?

Do not meddle with the snippets/price.liquid as this file is also used on the product page and altering it may break your product page.

Instead, on collection page you can remove the “Price” block from the “Product card” block and add a “Custom liquid” block in its place to show whatever you want.

Thanks for the answers. The Screenshot ist build in Photohop. Meanwhile I have a solution.

I think this was the original code:

{% if show_compare_price %}

      <span role="group">

<span class="visually-hidden">{{ 'content.price_sale' | t }}&nbsp;</span>

<span class="price">{{ price | default: '&nbsp;' }}</span>

</span>

{% else %}

<span class="price">{{ price | default: '&nbsp;' }}</span>

{% endif %}

and I replace it with:

{% if is_product_card and price_min != price_max %}

  <span class="price price--from">

    Ab {{ price_min | default: '&nbsp;' }}

</span>

{% else %}

{% if show_compare_price %}

<span role="group">

<span class="visually-hidden">{{ 'content.price_sale' | t }}&nbsp;</span>

<span class="price">{{ price | default: '&nbsp;' }}</span>

</span>

{% else %}

<span class="price">{{ price | default: '&nbsp;' }}</span>

{% endif %}

{% endif %}

and it works.

So thank you all for being willing to help me.

And this solution did not break the product page. Thank you.

Hi, where do you replace this code?

I’d still re-iterate my suggestion above to rather use “Custom liquid” – at least, it would not prevent your theme from updating cleanly.

Of course, the code would need to be amended to something like:

  {% liquid
    assign price_min = closest.product.price
    assign price_max = closest.product.price_max
    assign price = price_min | money_with_currency

    if price_min < closest.product.compare_at_price
      assign show_compare_price = true
    endif
  %}

  {% if price_min != price_max %}
    <span class="price price--from">
      Ab {{ price | default: '&nbsp;' }}
    </span>
  {% else %}
    {% if show_compare_price %}
      <span role="group">
        <span class="visually-hidden">{{ 'content.price_sale' | t }}&nbsp;</span>
        <span class="price">{{ price | default: '&nbsp;' }}</span>
      </span>
    {% else %}
      <span class="price">{{ price | default: '&nbsp;' }}</span>
    {% endif %}
  {% endif %}