How can I display the first variant's price on the collection page (Spotlight Theme)?

Technical Q&A

Topic summary

A Shopify store owner selling lightsabers needed collection pages to display the first variant’s price instead of the cheapest variant. The issue: products offered both complete sabers ($100) and hilts-only ($60), but collection pages defaulted to showing the lower hilt price rather than the full product price.

Solution for Spotlight Theme:

  • Navigate to theme code editor → snippets folder
  • Locate the price rendering file (around line 206)
  • Replace existing code with: {% render 'price', product: card_product, price_class: '', show_compare_at_price: true, use_variant: true %}
  • The use_variant: true parameter forces display of the first variant’s price

Additional findings:

  • Solution confirmed working on CRAFT theme (line 202)
  • For users wanting the opposite behavior (showing lowest price), suggestion was to reorder variants in Shopify admin to place the cheapest variant first
  • One user inquired about Stiletto theme compatibility but received no response

The original poster confirmed the fix worked perfectly. The solution involves a simple code modification to the theme’s price rendering logic.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
1

I want to display the first variants price on my website for all product prices. The problem I have is its displaying the cheapest price for the variant. My problem is the lowest priced variant is not the price I need to display. I need to display the 1st variants price and not the last one.

For reference I sell lightsabers, and an option for each model is to just buy the hilt which is cheaper than buying the whole saber. I need the price displayed for the whole saber and not just the hilt.

For example the whole sabers price is $100 but the Hilt itself is $60 so my collections display the lower price as the price of the item and not the price for the whole product.

2

Hey @ConstantineLV

Welcome to shopify community.

Your requirement sounds reasonable. And it is possible to fix it.

To fix your issue efficiently, tell me what theme are you using?

3

I am using the Spotlight Theme

4

Hey @ConstantineLV

Pls follow below steps to fix your issue.

  1. Open your theme code editor

  2. Open the file ‘’ in the snippets folder.

  3. Replace your code in line 206 with below.

{% render 'price', product: card_product, price_class: '', show_compare_at_price: true, use_variant: true %}

Sonya_2025_0-1715744326019.png
Sonya_2025_0-1715744326019.png1847×1088 200 KB

Hope this helps. Feel free to reach out if you need any further assistance.

5

That worked Perfectly!!

Thank you!

6

Hello dear, I have the same problem, do you think could work also for the CRAFT theme?

7

Hi @Angel1Web1

Yes, it should work on your theme too. Please have a try.

8

It works perfectly thanks, it was at the line 202

9

Hi there

Can you please suggest a fix for Stiletto theme?

10

I have the opposite of this problem. I WANT to show the lowest priced variant but it currently shows the first variant (which is also out of stock), what should the code be in line 206?

11

Hi @TheSpudwesier

I think you can adjust the lowest price variant to the first place in shopify admin