Shopify themes, liquid, logos, and UX
I'd like to show a few different messages on my product page using the stock count but I'm afraid my current liquid loop isn't quite working. I'm sure it's probably something simple but I can't figure it out right now. Essentially I'd like to show the following:
More than 5 = Show normal stock count message
More than 1 and 5 or less = Show last few in stock!
Exactly 1 = Show Last one message
Zero = Show out of stock message
Can someone more capable with liquid statements help me sense check what I've done wrong here?
The loop I've got so far is:
<div style="outline:5px solid red;padding:10px;">
{% comment %} More than 5 in stock {% endcomment %}
{% if current_variant.inventory_quantity > 5 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color:pink">
{% if current_variant.available %}
{{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
{% endif %}
</p>
{% comment %} Greater than 1 and less than 5 in stock {% endcomment %}
{% elsif current_variant.inventory_quantity > 1 or current_variant.inventory_quantity < 5 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color:blue">
{% if current_variant.available %}
Only {{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }} - Don't miss out!
{% endif %}
</p>
{% comment %} If there's only 1 left {% endcomment %}
{% elsif current_variant.inventory_quantity == 1 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color: green;"><b>Last one in stock</b> – Act fast!</p>
{% comment %} Otherwise show as out of stock {% endcomment %}
{% else %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color: orange;">Currently out of stock</p>
{% endif %}
</div>
Many thanks
Solved! Go to the solution
This is an accepted solution.
Ok, there are a couple of problems in your script logic.
Here's the code reworked:
{% if current_variant.inventory_quantity >= 5 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color:pink">
{% if current_variant.available %}
{{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
{% endif %}
</p>
{% comment %} Greater than 1 and less than 5 in stock {% endcomment %}
{% elsif current_variant.inventory_quantity > 1 and current_variant.inventory_quantity < 5 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color:blue">
{% if current_variant.available %}
Only {{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }} - Don't miss out!
{% endif %}
</p>
{% comment %} If there's only 1 left {% endcomment %}
{% elsif current_variant.inventory_quantity == 1 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color: green;"><b>Last one in
stock</b> – Act fast!</p>
{% comment %} Otherwise show as out of stock {% endcomment %}
{% else %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color: orange;">Currently out
of stock</p>
{% endif %}
</div>
What's not working? Can you describe it?
Sorry, the bit that's not working is the last two.
When I have a product with 1 item left in stock, it's still rendering the text from the second statement ("Only 1 in stock - don't miss out") instead of saying "Last one in stock - act fast"
When there is 0 stock, it's not rendering that text out at all.
This is an accepted solution.
Ok, there are a couple of problems in your script logic.
Here's the code reworked:
{% if current_variant.inventory_quantity >= 5 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color:pink">
{% if current_variant.available %}
{{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }}
{% endif %}
</p>
{% comment %} Greater than 1 and less than 5 in stock {% endcomment %}
{% elsif current_variant.inventory_quantity > 1 and current_variant.inventory_quantity < 5 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color:blue">
{% if current_variant.available %}
Only {{ 'products.product.stock_label' | t: count: current_variant.inventory_quantity }} - Don't miss out!
{% endif %}
</p>
{% comment %} If there's only 1 left {% endcomment %}
{% elsif current_variant.inventory_quantity == 1 %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color: green;"><b>Last one in
stock</b> – Act fast!</p>
{% comment %} Otherwise show as out of stock {% endcomment %}
{% else %}
<p id="ProductInventory-{{ section_id }}" class="container-product-lead-inventory" style="color: orange;">Currently out
of stock</p>
{% endif %}
</div>
Nice, happy to help.
Are you ready to take your business to the next level? Look no further than the latest ...
By SarahF_Shopify Apr 15, 2024We’re keeping the ball rolling to make sure you’re always ahead of the game. So buckle ...
By JasonH Apr 8, 2024Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024