Price Ranges & 'From' Min. Price to Max. Price - Debut Theme

New Member
7 0 0

Hi Everyone, I know similar posts have been written in the past but for some reason i can't make it work eithe because the code provided isn't the same as it appears in today's Debut Theme or because functionalities are not what i need. 

If you know how to do this i would REALLY appreciate the help. Thank you very much!

In order to be short and straight to the point, here's what i'm looking for:

1- I want to feature the word "From" before the product price. (Would be Cool if I can make this word appear ONLY on item's that have different prices for variants) and not show the "from" word for item with single price.

Ex: "From $5.00 to $9.00"   

I tested some line of code i found to be replaced in the product-grid.liquid but the word "from" appeared right above the price range and not in the same line so it wasnt working as expected.

 

2-  I'd like to show the Minimum price and Maximum price for the products that have different variant prices on my store. 

Ex.  "From $5.00 - $9.99"  or   "From $5.00 to $9.99

 

Thanks everyone!

0 Likes
Explorer
83 0 25

Hi Sergio,

You can do this by assigning new values with price_min and price_max. In your "product-price.liquid" snippet find "{%- assign price = product.price -%}" and paste the code below underneath that:

{%- assign min_price = product.price_min -%}
{%- assign max_price = product.price_max -%}

Then find this code "{%- assign money_price = price | money -%}" and paste the code below underneath that:

{%- assign money_price_min = min_price | money -%}
{%- assign money_price_max = max_price | money -%}

Find the code below and replace it with the code underneath this:

{% if price_varies %}
  <span class="product-price__price">{{ money_price }}</span>
{% else %}
  <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <span class="product-price__price">{{ money_price }}</span>
{% endif %}

Replace with:

{% if price_varies %}
  <span class="product-price__price">From: {{ money_price_min }} To: {{ money_price_max }}</span>
{% else %}
  <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
  <span class="product-price__price">{{ money_price }}</span>
{% endif %}

In the screenshot you can see the product on the left with a single variant doesn't show the "From" and "To" text

I hope this helps!

1 Like
New Member
7 0 0

Hey Nick! First of all, Thanks a lot for the detailed explanation. I like the way I can in theory edit the words "from" and "to" in case i want to specify something else in there.

Unfortunately, Only 1 of the 3 "line of codes" worked.

When doing the "find"  part, I could only find this Section below which is the 2nd thing you explained to me to do. So I could add the code you quoted below this one.

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

But for the First and Last part, I couldn't find on that Product-price.liquid the examples you mention above.  

 

I Dont want to make this post long enough but i'll copy you the product-price.liquid code for you to please give it a look and let me know if it's missing something or what lol.

I really appreciate the help. thanks.

 

<!-- 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 compare_at_price > price %} price--on-sale{% 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>
      <span class="price-item price-item--regular" data-regular-price>
        {% if available %}
          {% if compare_at_price > price %}
            {{ compare_at_price | money }}
          {% else %}
            {{ money_price }}
          {% endif %}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}
      </span>
    </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>
</dl>

 

0 Likes
New Member
7 0 0

Hi Nick!

 

Could you please check out why is it i cant find all of the lines of code you mention? could it be the theme got some updates?

 

Thanks again!

0 Likes
New Member
1 0 0

Hi Nick,

I had the same problem as Sergio where I could only located the 2nd part and not the 1st or 3rd sections. Could we please get an updated version of these instructions?

Cheers

Ash

0 Likes
New Member
1 0 2

Hi guys, I was looking for the same thing, went through the older code from Nick and tried to adapt his solution to the current Theme version (so not sure for how long it'll work).

 

First part is the almost as he said, under

 

{%- assign price = variant.price -%}

 

add 

 

{%- assign min_price = variant.price_min -%}
{%- assign max_price = variant.price_max -%}

 

 

Then same as he said, under

 

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

 

add

{%- assign money_price_min = min_price | money -%}
{%- assign money_price_max = max_price | money -%}

Finally, for the display of the prices, I can't say my solution is perfect cause I'm no pro at coding, but I tried to have something that will display From XX To XX when there is a price range, and just the normal price when there is just one price per product. So under

<span class="price-item price-item--regular" data-regular-price>

 

I changed

{% if available %}
          {% if compare_at_price > price %}
            {{ compare_at_price | money }}
          {% else %}
            {{ money_price }}
          {% endif %}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}

to

{% if available %}
          {% if compare_at_price > price %}
            {{ compare_at_price | money }}
          {% else %}
        	{% if money_price_min < money_price_max %}
        		From {{ money_price_min }} To {{ money_price_max }}
        	{% else %}
        		{{ money_price_min }}
        	{% endif %}
          {% endif %}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}

 

Now please note that it's not perfect:

- if a variant is on sale with the same 'compare price' as the max price, price will show as a product on sale

- if a variant is on sale with the  'compare price' lower than the max price of other variants, it'll show as a price range, not a sale

 

Anyway I hope it'll help you guys.

 

 

2 Likes
Shopify Partner
2 0 1

I was having the same issues...I'm not a coder, but followed above instructions and it worked.  Thanks

1 Like
Tourist
22 0 1

Hello,

if you want to show price range for each product with differents prices for variants, you can try this APP.

This app show price range for each product in all collections.

In app configuration, you can set also format for displaying price range, for example like From $5.00 to $9.99 or $5.00 - $9.99

1 Like
New Member
6 0 0

Hey Nick, great code.  Thank you for posting...  any suggestions on implementing this into other themes like Parallax?  they use a Scheme.org I'm not familiar with.

0 Likes
Highlighted
New Member
6 0 0

Update: 

 

After working with a developer I was able to add a product variant price range to my Parallax product details page, it requires a few lines of code in the app.js, style, and product detail templates.   The range is displayed until the user clicks/focuses on a form field, at which point the variant price is displayed instead. 

0 Likes