Shopify themes, liquid, logos, and UX
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>
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 %}
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.
Hi @Hayne, want to display variant details on your Shopify collection pages? Watch the solution in this YouTube video:
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024