Shopify themes, liquid, logos, and UX
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.
#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
@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?
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
User | RANK |
---|---|
163 | |
139 | |
74 | |
69 | |
58 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023