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.
User | RANK |
---|---|
206 | |
170 | |
77 | |
56 | |
52 |
Make the shift from discounts to donations, and witness your business not only thrive fina...
By Holly Dec 4, 2023On our Shopify Expert Marketplace, you can find many trusted third party developers and fr...
By Arno Nov 27, 2023You've downloaded the Search & Discovery app from the Shopify App store, and as you're ...
By Skye Nov 8, 2023