Debut Theme - Showing "From $xxx" prices for products on product collection pages ?

Tourist
5 0 1

Hi,

I am using the debut theme. The product collection pages does not show different prices for variants that are NOT IN SALE. For example, a product has two variants with two different prices ($27 and $29), yet on the collection product grid page, it only shows A SINGLE PRICE (the cheaper one) instead of saying "FROM $27" ... hence confusing the customer, especially if I have SALE items next to these normal items. Are there any code that can be modified/inserted to alter this? Please kindly advise.

I have used other free themes like Brooklyn or Venture before and they have this feature (I believe). I do not know why this simple yet critical feature is missing here!

Thanks a lot if you can help with this problem!

0 Likes
Shopify Staff
Shopify Staff
35 0 4

Hi Justin Lai,

I am Ryan from the Shopify Support team. Thanks for your post and welcome to the Shopify Forums. 

To get the "From $ Price"  to work on the debut theme for products with varying prices to show on the collection page you will have to go in to the code editor of the theme. To do this, in the Admin go to Online Store > Themes > [...] three dot button > Edit HTML/CSS > find the Snippets folder and under this look for the file product-price.liquid. At this point look on line 35 for the code: 

 <span class="product__price"> {{ money_price }}</span>

Change the code to look like this:  

<span class="product__price"> From {{ money_price }}</span> 

Place the word "From" between "product__price" >  {{money_price}}.  Any time a product has a varying price the "From" will appear before the price on the collection page just like the venture and Brooklyn theme.

I hope this helps.

Ryan 

Shopify Support

0 Likes
Tourist
5 0 1

Thanks Ryan it works perfectly.

Please also see my other post and help out if you can! :)

https://ecommerce.shopify.com/c/ecommerce-design/t/debut-theme-disable-automatic-collection-image-ov...

0 Likes
New Member
1 0 0

Hi Ryan,

Sorry for Hijacking this thread!

Is there anyway of displaying the Prices as a Range For example...£2.99 - £37.99

Im using the Debut Theme Also... The "From 2.99" is great but the range might benefit me. 

My Shop is www.brownspetrange.com

Thanks Very Much

 

Steve

0 Likes
Shopify Expert
2648 60 642

Hi S,

I would replace this line in product-price.liquid Snippet

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

with this code:

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

 

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
5 0 0

Hey

I have changed my snippet code to reflect this, but I have noticed in my store that most of the prices now are not bold in a different colour to the fixed priced products with not variables. Can someone tell me how to sort this please? It's driving me insane! My website is www.bigdayprint.co.uk

Cheers guys!

0 Likes
Shopify Expert
2648 60 642

Hi Mark,

this is because the class should be not "product__price" but "product-price__price" for you.

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
5 0 0

Hey

Thanks for your reply. I've tried that but it hasn't worked - am I editting the code in the right please?

<span class="product-price__price"> From {{ money_price }}</span>

and not

<span class="product__price">{{ money_price }}</span>

Currently I have it set up as this:

<!-- snippet/product-price.liquid -->
{% if product.title %}
  {%- assign compare_at_price = bold_compare_at_price -%}
  {%- assign price = bold_price -%}
  {%- assign from price = bold_price -%}
  {%- assign price_varies = bold_price_varies -%}
  {%- assign available = product.available -%}
{% else %}
  {%- assign compare_at_price = 1999 -%}
  {%- assign price = 1999 -%}
  {%- assign price_varies = false -%}
  {%- assign available = true -%}
{% endif %}

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

{% if compare_at_price > price %}
  {% if price_varies %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>
    <span class="product-price__price product-price__sale">
      <span class="product-price__price">{{ money_price }}</span>
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
  {% else %}
    <span class="visually-hidden">{{ 'products.product.regular_price' | t }}</span>
    <s class="product-price__price">{{ compare_at_price | money }}</s>
    <span class="product-price__price product-price__sale">
      {{ money_price }}
      <span class="product-price__sale-label">{{ 'products.product.on_sale' | t }}</span>
    </span>
  {% endif %}
{% else %}

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

{% unless available %}
  <span class="product-price__sold-out">{{ 'products.product.sold_out' | t }}</span>
{% endunless %}

I have one fixed price product on the store and it is in bold and in a grey colour. However, all the other products (due to them having variants) are in green and not bold. I'd like them to all be in grey and bold - can you tell me where I'm going wrong please?

Cheers

0 Likes
Shopify Expert
2648 60 642

This:

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

should be like this:

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

 

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com!
My post solved your problem? Like it!
0 Likes
New Member
3 0 0

Hi Ryan... would you please tell me how to do the exact same thing but for the Supply Theme?

There is no product-price.liquid

Thank you

0 Likes