Code to show first variant price in collection

Technical Q&A

Topic summary

Goal: display the first variant’s price on collection pages (Providence theme) instead of the cheapest variant.

Initial approach: replace the variable selecting the cheapest variant with product.first_available_variant. Suggested edit: {% assign cheapest_variant = product.first_available_variant %}.

Result: still shows the cheapest price. Possible reasons noted: the first variant may actually be the cheapest; another part of the theme may be overriding the price; the edit may have been made in the wrong template.

Alternative, concrete steps (collection card):

  • Edit Online store > Themes > Actions > Edit code.
  • In snippets > card-product.liquid, find: {% render ‘price’, product: card_product, price_class: ‘’, show_compare_at_price: true %}.
  • Replace with: {{ card_product.variants.first.price | money }} (or | money_with_currency to include the currency code).

Context: “variant” = a specific option of a product; Liquid = Shopify’s templating language.

Status: no confirmed resolution; action items are to edit the card-product snippet and ensure the correct template/variables are changed for the Providence theme.

Summarized with AI on January 13. AI used: gpt-5.
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.