Show 1st variant on collections page (rather than the cheapest) or choose which variant is displayed

Hayne
Visitor
1 0 0

Hello,

Some of our products have variants listed as $0.00 as they are a special order item (mostly the larger sizes). The collections page is automatically showing the product price as $0.00 because it is the cheapest.

I already have an app that changes this price to show P.O.A on the product page and an add to quote button but I'm trying to find a workaround for the collections page.

So far I have considered the following options:

1. Hide all prices on the collections page - I don't really want to do this as most products have a price for most variants

2. Remove the variants where we don't have a price and say that they are available in the description - again I don't want to do this because it won't clearly show the sizes we can sell and the add to quote functionality (app) won't work.

3. Find an app or code so that the price of the first variant shows on the collection page or manually choose which variant is displayed for that product. 

I have seen this thread where it shows you how the code can be edited to show the first variant price but I can't find it in my theme code. I have pasted the code from my theme that looks similar at the bottom of this post.  

As you can tell, I have no coding/shopify experience and the developer I am working with is telling me that he can't find documentation on a custom code that will work.

Can anyone help?

collection-product.liquid

<div class="products-grid">
{% for product in collectionBestseller.products limit: 2 %}
<div class="item">
<div class="item-area">
<div class="product-image-area">
<a href="{{ product.url | within: collection }}" class="product-image">
<img data-src="{{ product.featured_image.src | img_url: '100x100', crop: 'center' }}" alt="{{ product.featured_image.alt | escape }}" width="80" height="80">
</a>
</div>
<div class="details-area">
<h2 class="product-name">
<a href="{{ product.url | within: collection }}" title="{{ product.title }}">
{% if settings.language_enable %}
<span class="lang1">{{ product.title | split: '|' | first }}</span>
<span class="lang2">{{ product.title | split: '|' | last }}</span>
{% else %}
{{ product.title | split: '|' | first }}
{% endif %}
</a>
</h2>
<div class="ratings">
<div class="rating-box">
<span class="shopify-product-reviews-badge" data-id="{{ product.id }}"></span>
</div>
</div>
<div class="price-box">
<div class="price">
{% if on_sale %}
{% if product.price_varies %}
{% assign sale_price = product.price | money %}
<span class="money">
{{ 'products.product.on_sale_from_html' | t: price: sale_price }}
</span>
{% else %}
<div class="special-price">
<span class="money">{{ product.price | money }}</span>
</div>
{% endif %}
{% else %}
{% if product.price_varies %}
{% assign price = product.price | money %}
<span class="money">{{ 'products.general.from_text_html' | t: price: price }}</span>
{% else %}
<span class="money">
{{ product.price | money }}
</span>
{% endif %}
{% endif %}
{% if sold_out %}
<span class="money">{{ 'products.product.sold_out' | t }}</span>
{% endif %}
{% if on_sale %}
<div class="compare-price">
<span class="money">{{ product.compare_at_price | money }}</span>
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
{% endfor %}
</div>

Replies 3 (3)

marcoswata
Shopify Partner
122 10 34

Try this.

Replace this piece of code:

{% if product.price_varies %}
{% assign price = product.price | money %}


With:

{% if product.price_varies %}
{% assign price = product.price_max | money %}

 

If my answer was helpful then please Like and Accept Solution 🙂
If you need help with design, development or marketing your store, contact me!

IonPillowFight
Tourist
5 0 4

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.

Jahid-KlinKode
Excursionist
145 1 4

Hi @Hayne, want to display variant details on your Shopify collection pages? Watch the solution in this YouTube video: