Liquid for Stock count -> Language & Color (Dawn)

jesick
Excursionist
13 0 14

Hello community, 

I have to admit that I am a huge beginner in Shopify and coding there. 

After several hours of searching I put together this code for showing the stock of a product depending on the stock level. I am using a custom liquid (I hope that's the right word in english)

It works good so far for my products.

 

 

<DIV>
{% comment %} More than 5 in stock {% endcomment %}
{% if product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity > 5 %}
Auf Lager.


{% comment %} Greater than 1 and less than 5 in stock {% endcomment %}
{% elsif product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity <= 5 %}
Nur noch {{ product.variants.first.inventory_quantity }} auf Lager.

{% comment %} Outofstock {% endcomment %}
{% elsif product.variants.first.inventory_management == "shopify" and product.variants.first.inventory_quantity < 1 %}
Ausverkauft.

{% endif %}
</DIV>

 

 

 

I have two questions now:

- Is it possible to build in an option for the language? For example: If Language is not german, use english? 

- Is it possible to style the text depending on the if? Maybe red when the product is out of stock?

 

I hope someone can help me. 

 

Replies 3 (3)
PaulNewton
Shopify Partner
5516 500 1131

 

#1 - Is it possible to build in an option for the language? For example: If Language is not german, use english? 

Translations https://shopify.dev/themes/architecture/locales , https://shopify.dev/themes/architecture/locales/storefront-locale-files 

and the lang editor https://help.shopify.com/manual/online-store/themes/language/change-wording#overview-of-the-language... 

- Is it possible to style the text depending on the if? Maybe red when the product is out of stock?

Yes wrap the text in spans or paragraph tags with either the appropriate styles in the style attribute or through CSS classes

Unless you'll be using more inventory management systems you can also be more concise like so:

<div class="inventory-count">
    {% if product.variants.first.inventory_management == "shopify" %}
        {% comment %} More than 5 in stock {% endcomment %}
        {% if product.variants.first.inventory_quantity > 5 %}
        <span style="color:green;">Auf Lager.</span>

        {% comment %} Greater than 1 and less than 5 in stock {% endcomment %}
        {% elsif product.variants.first.inventory_quantity <= 5 %}
        <span>Nur noch {{ product.variants.first.inventory_quantity }} auf Lager.</span>

        {% comment %} Outofstock {% endcomment %}
        {% elsif product.variants.first.inventory_quantity < 1 %}
            <span class="low-inventory">Ausverkauft.</span>
        {% endif %}

    {% endif %}
</div>
<style type="text/css">
    .inventory-count span {
        font-weight: bold;
    }
    .low-inventory {
        color: red;
    }
</style>

 

New Feature: Automatic free shipping discounts


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Defeat problems ,Learn To Ask Questions The Smart Way

SHIBdev
Shopify Partner
334 24 92

@PaulNewton I added this funcionality to my page, but i found some issue, how can it change with variants in each product? i mean, if i got some product with sizes S, M, L, XL

but M - L with more than 5 products, and S - XL with less than 5 products, the stock status doesnt change.. so how can we add this to that snippet?

PaulNewton
Shopify Partner
5516 500 1131

Either make the page fully reload when a variant is selected, rough examples available on the forums through search.

Or you need an advanced customization to integrate it with your themes javascript for when options are changed by users.

 Note shopify has a tutorial for some vintage themes here: https://help.shopify.com/en/manual/online-store/themes/os/customize/show-remaining-quantity 

Part the complication here is shopify don't put inventory data the frontend rest axja api so third parties cannot bulk scrape that from merchants stores.

So this means reloading the page for that 1 specific variants inventory, or purposefully putting the inventory counts in javascript or the html to be referenced by your javascript.

 

To get the dynamic version of this customization contact me at paull.newton+shopifyforums@gmail.com with this topic url, store url ,and theme name.

 

New Feature: Automatic free shipping discounts


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Defeat problems ,Learn To Ask Questions The Smart Way