Code to show first variant price in collection

Technical Q&A
1

HI!

I know this has been asked, but I can’t get previous answers to make sense for my theme—Providence.

I need code so I can show the price of the first variant instead of the cheapest variant.

I really appreciate any help at all!!

Thank you!!

2

Do you mean this?

product.first_available_variant

To actually use it, you’ll need to find the variable that your theme is using and replace it with this.

3

That’s what I mean but I don’t know where it fits in this code. I want to replace the code about the cheapest variant with what you sent.

I really appreciate your help!!!

{% comment %}
Use selected or first available variant pricing when on the product detail page and general product pricing on the collection pages
{% endcomment %}
{% if pricing == ‘variant’ %}
{% assign price = variant.price %}
{% assign price_varies = variant.price_varies %}
{% assign compare_at_price = variant.compare_at_price %}
{% assign unit_price = variant.unit_price %}
{% assign unit_price_measurement = variant.unit_price_measurement %}
{% else %}

{% assign price = product.price %}
{% assign price_varies = product.price_varies %}
{% assign compare_at_price = product.compare_at_price %}
{% assign cheapest_variant = product.variants | sort: ‘price’ | first %}
{% assign unit_price = cheapest_variant.unit_price %}
{% assign unit_price_measurement = cheapest_variant.unit_price_measurement %}
{% endif %}

4

I assume it’s the variable named cheapest_variant so change it to the first available variant like this

{% assign cheapest_variant = product.first_available_variant %}
5

I replaced that line of code and it still pulls the cheapest. Not sure…

{% assign price = product.price %}
{% assign price_varies = product.price_varies %}
{% assign compare_at_price = product.compare_at_price %}
{% assign cheapest_variant = product.first_available_variant %}
{% assign unit_price = cheapest_variant.unit_price %}
{% assign unit_price_measurement = cheapest_variant.unit_price_measurement %}
{% endif %}

6

So there are a few explanations for this:

  1. Your first variant might be the cheapest variant, in which case it will still be the same.
  2. That’s not the correct variable for the variant, so there might be another variable somewhere in the code that is getting the cheapest variant, that’s the one you would want to change.
  3. That’s not the right template, you might have opened a wrong template file so it didn’t change anything.

I would suggest you to get someone to take a look at your theme and change it for you since it will take forever to try and figure out which one of those.

7

You can also follow these steps:

  • Step 1: Go to Online store > Themes > Actions > Edit code.

  • Step 2: Go to snippets > card-product.liquid and look for
    Code: {% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}

  • Step 3: Replace this code with

Code: {{ card_product.variants.first.price | money }}

** In case you want to include the currency code in your code replacement, you can modify it like this:

Code: {{ card_product.variants.first.price | money_with_currency }}

Thank you and good luck.