Shopify, displaying price of first in stock product variant on Collection page

Question

I have the product grid in my collection pages display product prices for variants. Currently, it's displaying the price of the first variant even if the product is out of stock. That's not good since it's misleading. I want it to display the price of the first variant that is in stock but I'm not sure what that liquid code should be. Here's how I'm currently displaying the price of a variant:

<span class="price{% if on_sale %} on-sale{% endif %} {{ settings.collection_text_alignment | default: 'text-center' }}">
  {% if bold_price_varies %}
    {{ 'products.general.from' | t }} 
  {% endif %}
  <span class="money {{ settings.collection_text_alignment | default: 'text-center' }}">
    {{ bold_price  | money }}
  </span>
</span>

I recognize the code is from one of the Bold apps, but we're not using this anymore. I can use standard Shopify Liquid to make this work. I'm just not sure how.

koosa koosa · Accepted Answer · 2020-10-21T07:23:17

I would use product.first_available_variant;

<span class="price{% if on_sale %} on-sale{% endif %} {{ settings.collection_text_alignment | default: 'text-center' }}">
  {% if bold_price_varies %}
    {{ 'products.general.from' | t }} 
  {% endif %}
  <span class="money {{ settings.collection_text_alignment | default: 'text-center' }}">
    {%- if product.first_available_variant -%}
        {%- assign price = product.first_available_variant.price -%}
    {%- else -%}
        {%- assign price = product.price -%}
    {%- endif -%}
    {{ price | money }}
  </span>
</span>

Shopify, displaying price of first in stock product variant on Collection page

1 Answers