How to display price of the first variant in product page.

Technical Q&A

Topic summary

Issue: In Shopify’s Supply theme, the catalog page shows the lowest product price; the goal is to display the price of the first variant instead.

Key terms: Liquid is Shopify’s templating language. A variant is a specific version of a product (e.g., size/color).

Proposed solutions:

  • Use Liquid to output the first available variant price: product.selected_or_first_available_variant.price | money.
  • Alternatively, in the catalog card, output the first variant price: card_product.variants.first.price.

Implementation (catalog cards):

  • Go to Online Store > Themes > Actions > Edit code.
  • Open snippets/card-product.liquid.
  • Replace the price render line ({% render ‘price’, product: card_product, … %}) with {{ card_product.variants.first.price | money }}.
  • To include currency code, use money_with_currency.

Clarifications: The requester has limited Liquid knowledge; detailed file path and replacement were provided.

Outcome: Actionable steps and exact code replacements were given; no disagreements. The thread appears resolved, showing the first variant price on catalog product cards.

Summarized with AI on January 13. AI used: gpt-5.
1

Hello,

Im using supply theme. Currently the catalog page is displaying the lowest price of the products. I want to display the price of the first variant.

Can anyone please help me with this.

Thanks in Advance.

2

you will need to add below code to show first variant’s price.

{{ product.selected_or_first_available_variant.price | money }}

1 Like
3
Show More

Thank you, Where should i add this code?

4

@MinuSak are you familiar with liquid programming in shopify?

1 Like
5

little

6

can you please help

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.