adding a from to price

[Luc7]

Hi all

I am trying to add a "from" price on my theme, I am using the debut theme, i have tried editing the code but its seems to still not be working.

any help will be appreciated.

thanks :)

[oscprofessional · Accepted solution]

Hello Luc7,
Add this code to display from price where you want to display:

{% if product.price_varies %}
   From {{ product.price_min | money }}
{% else %}
<!-- your existing price code here -->
{% endif %}

[Bo]

Hey there, @Luc7 

Bo here from Shopify Support! 

That is a really great question, as this is a Shopify Supported theme I would love to take a look into this for you. I would, first, like to get some more context from you regarding this! Where would you like the From price to display exactly? On the product tile in a collection page when the product has more than one priced variant or do you have another application for this? I just want to be certain before checking in with our themes team! If you could send me an example of where you have seen this in another store that would be fantastic! 

I look forward to hearing from you,

Bo

[Luc7]

And where do I actually post that in the code ?

[oscprofessional]

On which page you want to display from price?
Please let me know so that i will provide you exact path.

[Luc7]

I would like to add it to my products page if that helps ?
Sorry new to all this :)

[oscprofessional]

Open file Online Store-> Themes -> Edit code->Snippets->product-price.liquid
Search this code

<div class="price__regular">

Add below code after this line

 {% if product.price_varies %}
   From {{ product.price_min | money }}
{% else %}
<!-- your existing price code here -->
{% endif %}

Note: This code will work for variant product only because from price is available for varient product only.

[Luc7]

okay cool thanks!

what do you mean by "your existing price code here"

what would that look like?

thanks heaps :)

[Luc7]

Hi @Bo
Yes In a Collection page when the product has more than one priced variant!

[Bo · Accepted solution]

Hey there,

• Go to Online Store > Current Theme > Actions > Edit Code.
• Open the product-price.liquid. 
• Look for :  <div class="price__regular">. It should be on line 27. 
• Paste the following code right under it: 

{% if product.price_varies %}
  From {{ money_price }} - {{ product.price_max | money }}
{% else %} 
 {{ money_price }}
{% endif %}

The finished code will look like this:

  <div class="price__regular">

{% if product.price_varies %}
  From {{ money_price }} - {{ product.price_max | money }}
{% else %} 
 {{ money_price }}
{% endif %}

The entire file would look like this: 

<!-- snippet/product-price.liquid -->
{% if variant.title %}
  {%- assign compare_at_price = variant.compare_at_price -%}
  {%- assign price = variant.price -%}
  {%- assign available = variant.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign available = true -%}
{% endif %}

{%- assign money_price = price | money -%}

<dl class="price{% if available and compare_at_price > price %} price--on-sale{% endif %}{% if available and variant.unit_price_measurement %} price--unit-available{% endif %}" data-price>

  {% if section.settings.show_vendor %}
    <div class="price__vendor">
      <dt>
        <span class="visually-hidden">{{ 'products.product.vendor' | t }}</span>
      </dt>
      <dd>
        {{ product.vendor }}
      </dd>
    </div>
  {% endif %}

  <div class="price__regular">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.regular_price' | t }}</span>
    </dt>
    <dd>
      {% if available %}
        {% if compare_at_price > price %}
          <s class="price-item price-item--regular" data-regular-price>
            {{ compare_at_price | money }}
          </s>
        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span>
        {% endif %}
      {% else %}
        <span class="price-item price-item--regular" data-regular-price>
          {{ 'products.product.sold_out' | t }}
        </span>
      {% endif %}
    </dd>
  </div>
  <div class="price__sale">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.sale_price' | t }}</span>
    </dt>
    <dd>
      <span class="price-item price-item--sale" data-sale-price>
        {{ money_price }}
      </span>
      <span class="price-item__label" aria-hidden="true">{{ 'products.product.on_sale' | t }}</span>
    </dd>
  </div>
  <div class="price__unit">
    <dt>
      <span class="visually-hidden visually-hidden--inline">{{ 'products.product.unit_price_label' | t }}</span>
    </dt>
    <dd class="price-unit-price">
      {%- capture unit_price_separator -%}
        <span aria-hidden="true">/</span><span class="visually-hidden">{{ 'general.accessibility.unit_price_separator' | t }}&nbsp;</span>
      {%- endcapture -%}
      {%- capture unit_price_base_unit -%}
        <span data-unit-price-base-unit>
          {%- if available and variant.unit_price_measurement -%}
            {%- if variant.unit_price_measurement.reference_value != 1 -%}
              {{- variant.unit_price_measurement.reference_value -}}
            {%- endif -%}
            {{ variant.unit_price_measurement.reference_unit }}
          {%- endif -%}
        </span>
      {%- endcapture -%}

      <span data-unit-price>{{ variant.unit_price | money }}</span>{{- unit_price_separator -}}{{- unit_price_base_unit -}}
    </dd>
  </div>
</dl>

Let me know how this goes and if there is anything else I can assist you with, I'm happy to help!

All the Best,

Bo