Adding a price range to Debut theme

Highlighted
New Member
2 0 0

Hello! 

 

I'm trying to add a price range to a product with variants in the debut theme. For example, my product has three different volumes. Currently the price is being shown as the lowest priced variant only. I have tried suggestions on quite a few forums but nothing seems to be working. I would really appreciate any help to fix this. My code for the product-price-liquid file is below: 

 

<!-- 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 %}

{% if product.price_varies %}
  {%- capture money_price -%}{{- product.price_min | money -}}..{{- product.price_max | money -}}{%- endcapture %}
{% else %}
  {%- assign money_price = price | money -%}
{% endif %}

<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 %}
            From {{ 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>

Thanks again!

 

-Sarah 

0 Likes
Shopify Partner
1838 173 560

Hi,

 

You could change the first part of variable assignments to be like

 

 

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

{%- assign money_price = price | money -%}
{% if product.price_varies %}
  {%- assign money_price_min = price_min | money -%}
  {%- assign money_price_max = price_max | money -%}
{% endif %}

 

And later in the code change the price display to be

 

 

        {% if available %}
          {% if compare_at_price > price %}
            {{ compare_at_price | money }}
          {% elsif product.price_varies %}
            {{ money_price_min }} - {{ money_price_max }}
          {% else %}
            {{ money_price }}
          {% endif %}
        {% else %}
          {{ 'products.product.sold_out' | t }}
        {% endif %}

 

However, this may not always achieve the desired effect

 

  1. When a variant is on sale, the sale price will show i.e. not a range. Of course, this could be taken in to consideration as well.
  2. When arriving on the product detail page, by default the default selected variant price is shown. However now, if there are varying prices between variants, the range is shown even though there's a default variant selected. Confusing and not nice. You could work around that by checking in what template the price snippet is being shown e.g.

            {% if available %}
              {% if compare_at_price > price %}
                {{ compare_at_price | money }}
              {% elsif product.price_varies and template != 'product' %}
                {{ money_price_min }} - {{ money_price_max }}
              {% else %}
                {{ money_price }}
              {% endif %}
            {% else %}
              {{ 'products.product.sold_out' | t }}
            {% endif %}
  3. Doesn't take variant availability in to account i.e. if the cheapest variant is sold out, it would still show the price range with the cheapest variants' price even though that one is already sold out.
  4. Maybe something else I forgot ;-)

 

Hope this helps!

I turn coffee in to code - since 1998
2 Likes
New Member
2 0 0

Thanks so much for your help! 

 

This should work but for some reason it's not running the code in the snippet.

 

When referring to the price in the collection-template I am including:

<div class="price_product">
<p class="price text-center"><strong>{{ product.price | money }}</strong></p>

 

Should I be calling the price as something else in order to display the range?

 

Sorry for the basic questions- I am a Shopify/liquid newbie! Really appreciate any help! 

 

0 Likes
Shopify Partner
1838 173 560

Hi Sarah,

 

No probs, everyone had to or has to begin somewhere. So in your collection-template.liquid you would want to include the snippet we mention before rather than print the product.price as is.

 

So instead of

<div class="price_product">
<p class="price text-center"><strong>{{ product.price | money }}</strong></p>

 

That you mention above, you'd not be making any change in that file because the collection-template.liquid is mostly the container for product grids. The actual product items are rendered by Snippets / product-card-grid.liquid. The actual snippet for rendering the price is included like

 

{% include 'product-price', variant: product %}

Though you do not have to adjust either because collection-template.liquid includes product-card-grid.liquid which in turn includes product-price.liquid as is in Debut theme.

 

So in your case, it should be sufficient to apply the changes discussed earlier to Snippets / product-price.liquid.

 

Hope this helps. If you still find yourself being stuck on this one, give me a shout and we can work something out that's more effective than the to-and-fro on the forum.

 

Best wishes!

I turn coffee in to code - since 1998
1 Like