Minimal Theme: Display First Variant Price on Collection Page

Technical Q&A
1

Hi !

I am quite new at shopify and have minimal coding experience. The issue im facing is that I want the price displayed in the collections page to be the first variant. At the moment it shows the cheapest variant price. For example it shows “From 45.99” but I would like it to display a more expensive variant. I have seen different solutions to this problem, but I don’t know how to apply them to the Minimal theme! Please let me know how i can apply this to the minimal theme.

Store link: https://tdg-inc.ca/

Im guessing the answer is somewhere over here:

{% if featured.title != ‘’ %}

{%- assign price = featured.price | money -%}

{% if on_sale %}
{{ ‘products.product.regular_price’ | t }}
{{ featured.compare_at_price | money }}
{% endif %}
{% if featured.price_varies %}
{{ ‘products.general.from_html’ | t: price: price }}
{% else %}
{% if on_sale %}
{{ ‘products.product.sale_price’ | t }}
{% else %}
{{ ‘products.product.regular_price’ | t }}
{% endif %}
{{ price }}

{%- assign variant = featured.selected_or_first_available_variant -%}
{%- if variant.available and variant.unit_price_measurement -%}
{% include ‘product-unit-price’, variant: variant, wrapper_class: ‘grid-link__unit-price’ %}
{%- endif -%}
{% endif %}

{% endif %}
2

Hello , @WisamTDG

Try to replace this :- {%- assign price = featured.price | money -%}

With this :- {%- assign price = product.first_available_variant.price | money -%}

3

Hi @WisamTDG ,

Please follow these steps:

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

  • Step 2: Go to snippets > product-grid-item.liquid and add code in line 1. https://i.imgur.com/jucD25M.png
    Code: {%- assign variant = featured.selected_or_first_available_variant -%}

  • Step 3: Replace ‘featured.price’ => ‘variant.price’ and ‘featured.compare_at_price’ => ‘variant.compare_at_price’
    https://i.imgur.com/wTW1rRV.png

Hope it is clear to you.

If my answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

4

Thank you for your solution!! Worked like a charm!

One more question…the price now says “from (price)”. How can I remove the word “from” ?

Best,

Wisam

5

Please find ‘products.general.from_html’, change {{ ‘products.general.from_html’ | t: price: price }} => {{ price }}

Refer: https://i.imgur.com/GXEbzlX.png

Hope it is clear to you.

If this answer can help you solve your issue, please mark it as a solution. Thank you and good luck.

6

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.

7

Hello! You wouldn’t happen to know how to adjust the default product/variant price displayed to the lowest value, would you? As of right now, all products on the store are displaying the highest costing variant as the default. Thank you for your time.

8

For anyone trying to showcase all product variants and their prices in Shopify collections, here’s a video that could help.

9

Hello! I see you know what to do with this stuff!

I’m having the same issue as well but I’m on the Dawn theme. I don’t have the same snippets as Minimal, so how could I go about doing this on my theme? Thank you!