How can I add a stock count feature on Kalles theme product cards?

[emilbrandon]

Hello,

We are currently planning to switch our Shopify store's theme to Kalles. I'm wondering if anyone knows how to add a stock count feature on the product cards?

This specific functionality doesn't seem to be a built-in option within the Kalles theme.

For reference, here's a link to our store preview using Kalles:

https://1nlad43txkdd6xrs-24276923.shopifypreview.com.

We're aiming for a stock count display that looks similar to what we have in our current theme.

Does anyone have suggestions or guidance on how to implement this?

[DigiDecoded]

Hello @emilbrandon ,

Hope so you are doing great, the query you have mentioned would be achieved only by coding custom liquid code. for which if you have developer, he will do it or else you can hired someone who knows how to code.

[emilbrandon]

I can do abit coding myself, do you have the solution on what code i need to add and where?

[DigiDecoded]

what do you mean by stock count? what  i get, how much stock are left in that product right now?

[emilbrandon]

Yes, how much we have in stock of that product

[DigiDecoded]

https://help.shopify.com/en/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-...

https://www.youtube.com/watch?v=X5bKSJPiS7E&ab_channel=TechExpress
you can follow this url and it has mentioned ways to do it

[emilbrandon]

Hello again and thx for the answer.

We need this on the product-cards on front page, and on the collection page not on the product page itself, thats already solved.

[DigiDecoded]

the same code would be used as grid-item.liquid not sure about the exact name of the file. you can paste that code there, it will show it. if not then let me know, i will further look on it,

[Blank_Canvas]

Aloha,

I was wondering how you were able to solve having this on the product page?

[BrainStation23]

hi @emilbrandon ,
You are going to need some custom liquid code for this functionality. You can directly edit the theme code to add a snippet that shows the inventory status for that product variant.

Each product variant object has an inventory_quantity property that represents the stock count for that variant of a product.
Documentation Link: Verint Inventory Quantity 

You can implement an inventory status snippet using this property and add this to the product card. We already have a similar type of snippet that we use on the product page. I'm sharing the code for the snippet below.

{% comment %}
  Renders a list of product's price (regular, sale)

  Accepts:
  - product: {Object} Product Liquid object 
  - block: {Object} Block object 
  - section: {Object} section object

  Usage:
  {% render 'product-inventory', product: product, block: block, section: section %}
{% endcomment %}

<p
    class="product__inventory font-body product__text {% if block.settings.text_style == 'uppercase' %} caption-with-letter-spacing{% elsif block.settings.text_style == 'subtitle' %} subtitle{% endif %} {% if product.selected_or_first_available_variant.inventory_management != 'shopify' %} visibility-hidden{% endif %}"
    id="Inventory-{{ section.id }}"
    role="status"
    {{ block.shopify_attributes }}
     
  >
    {%- if product.selected_or_first_available_variant.inventory_management
        == 'shopify'
    -%}
      {%- if product.selected_or_first_available_variant.inventory_quantity
          > 0
      -%}
        {%- if product.selected_or_first_available_variant.inventory_quantity
            <= block.settings.inventory_threshold
        -%}
          <svg width="15" height="15" aria-hidden="true">
            <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(238,148,65, 0.3)"/>
            <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(238,148,65)"/>
          </svg>
          {%- if block.settings.show_inventory_quantity -%}
            {{-
              'products.product.inventory_low_stock_show_count'
              | t:
                quantity: product.selected_or_first_available_variant.inventory_quantity
            -}}
          {%- else -%}
            {{- 'products.product.inventory_low_stock' | t -}}
          {%- endif -%}
        {%- else -%}
          <svg width="15" height="15" aria-hidden="true">
            <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(62,214,96, 0.3)"/>
            <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(62,214,96)"/>
          </svg>
          {%- if block.settings.show_inventory_quantity -%}
            {{-
              'products.product.inventory_in_stock_show_count'
              | t:
                quantity: product.selected_or_first_available_variant.inventory_quantity
            -}}
          {%- else -%}
            {{- 'products.product.inventory_in_stock' | t -}}
          {%- endif -%}
        {%- endif -%}
      {%- else -%}
        {%- if product.selected_or_first_available_variant.inventory_policy
            == 'continue'
        -%}
          <svg width="15" height="15" aria-hidden="true">
            <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(62,214,96, 0.3)"/>
            <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(62,214,96)"/>
          </svg>
          {{-
            'products.product.inventory_out_of_stock_continue_selling'
            | t
          -}}
        {%- else -%}
          <svg width="15" height="15" aria-hidden="true">
            <circle cx="7.5" cy="7.5" r="7.5" fill="rgb(200,200,200, 0.3)"/>
            <circle cx="7.5" cy="7.5" r="5" stroke="rgb(255, 255, 255)" stroke-width="1" fill="rgb(200,200,200)"/>
          </svg>
          {{- 'products.product.inventory_out_of_stock' | t -}}
        {%- endif -%}
      {%- endif -%}
    {%- endif -%}
  </p>

The output for the product looks like this.
 

Settings to change this also includes a settings section in the theme editor

this is just an example of how we solved this problem. You can take the code and implement your own solution.
Contact us if you need any help with this.

Kazi Muktadir Ahmed | Brain Station 23
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution