adding a from to price

Solved
New Member
15 0 0

Thanks bo! that worked perfect :)

0 Likes
New Member
5 0 0

Hi, I'm trying to do the same thing but when I added this code it did show "from" the lowest price variant but it also left the highest price beside it - is there any way to only show "from" the lowest variant?

0 Likes
Shopify Staff
Shopify Staff
768 75 150

 

Hey there, @suzya 

 

I took a look into this and found how to get rid of this regular price that appears alongside the lowest price. The code I had shared shows the range of prices. Instead of adding that code, add this. 

  • Go to Online Store > Actions > Edit Code > Snippets > product-price.liquid. 
  • Go to line 27 and find <div class="price__regular">
  • Add the following under: 
 {% if product.price_varies %}
  From {{ money_price }}
{% else %} 
 {{ money_price }}
{% endif %}
  • You will then want to scroll down and find:
{% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span> 
  • You will need to add {% comment %} to the start and {% endcomment %} to the end of this - it will then look like this:

 

{% comment %} {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span> {% endcomment %} 
  • If you are not comfortable making all these individual changes yourself, you can replace the entire code in the file with 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">
    {% if product.price_varies %}
  From {{ money_price }} 
{% else %} 
 {{ money_price }}
{% endif %}
    <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>
{% comment %}        {% else %}
          <span class="price-item price-item--regular" data-regular-price>
            {{ money_price }}
          </span> {% endcomment%}
        {% 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 

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
5 0 0

Hi, thank you for your reply. I added the code and although it does exactly what I wanted ie. put "from' in front of the lowest price variant there is a problem in the actual product listing now. When any other variant is selected it only shows the lowest price and does not change for each variant. So for example when I select a larger and more expensive size of the item it still shows "from" the lowest price but if I add that item to the cart, the correct price shows in the cart.

0 Likes
Shopify Staff
Shopify Staff
768 75 150

 

Ah, of course, apologies for that unforeseen effect. Removing the full price from under the collection page tile of the product removed it from the product page also. Replace the file with this instead: 

<!-- 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">
    {% if product.price_varies %}
  From {{ money_price }} 
{% else %} 
 {{ money_price }}
{% endif %}
    <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

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
5 0 0

Hi, that didn't work, unfortunately. Now on the collection page, it says "from" then the price and then below it the price is repeated. Then on the product detail page the correct price for the variant is showing but above it still says "from"  and then the lowest price.  I have attached 2 screenshots in case that doesn't make sense.

Screen Shot 2019-11-06 at 3.56.50 PM.pngScreen Shot 2019-11-06 at 3.57.03 PM.png

0 Likes
Shopify Staff
Shopify Staff
768 75 150

 

I would like to get a more hands-on look at this. Would it be ok if I emailed you so that I can take a look at your account from our side and figure out how to resolve this for you? 

 

All the Best,

Bo

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
5 0 0

Hi, please get in touch as I would really like to sort this out asap.

cheers

linenmillnz@gmail.com

0 Likes
Shopify Staff
Shopify Staff
768 75 150

Thank you for that. I have responded to you via email. We will continue this conversation there. 

 

All the Best,

Bo 

 

Bo | Social Care @ Shopify
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
New Member
5 0 0

Hi, I never received an email and I still have been unable to sort out this issue. Are you able to offer any further solutions that work?

0 Likes