Can spotlight theme display inventory levels on product pages?

[Belgloin]

Hello. Is it possible to display inventory levels on the product page using the spotlight theme?

Regards

[Belgloin]

I have found and added the Inventory status block - however this is hidden/suppressed? 

I have also found the following in the code, however the line "dc22094b-cebd-411a-9b9f-03a7569bdbdd" does not look right?

Thank you

product.json

},
"dc22094b-cebd-411a-9b9f-03a7569bdbdd": {
"type": "inventory",
"settings": {
"text_style": "body",
"inventory_threshold": 4,
"show_inventory_quantity": true
}
},
------------------------------------------
"block_order": [
"title",
"price",
"variant_picker",
"dc22094b-cebd-411a-9b9f-03a7569bdbdd",
"quantity_selector",
"buy_buttons",
"description",
"share"
],

main-product,liquid

{%- when 'inventory' -%}
<p
class="product__inventory no-js-hidden{% 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 %}"
{{ block.shopify_attributes }}
id="Inventory-{{ section.id }}"
role="status"
>
{%- 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>

[Dan-From-Ryviu]

Hi @Belgloin 

Go to your Online store > Themes > Customize > Products > Default product, Product information, click + Add block  > Inventory status 

[Belgloin]

Thank you for the response. I have already added this block, however it is hidden/suppressed? All I have is a gap were it should be. 

Could it be due to having 3 inventory locations?

[Dan-From-Ryviu]

Could you show me setting of that block after you added? 

And could you share your page link to check?

[Belgloin]

Block setting has low threshold set to 4 and show inventory count is ticked.

I have added the JSON and liquid codes above. I'm not sure if the JSON is showing correctly?

The block is currently sat under the share button...

https://salopiatempus.co.uk/products/lorus-mens-black-date-dial-brown-leather-strap-watch-rh980nx9

[Dan-From-Ryviu]

Hi @Belgloin 

I have check and saw html of inventory added. Could you go to your Online store > Themes > Edit default theme content, search "low stock" and check if text for low stock available 

[Belgloin]

Text for low stock is showing the same as in  your image

[Belgloin]

Choose product options

Choose options for {{ product_name }}

Description

Description

Inventory in stock

In stock

Inventory in stock show count

{{ quantity }} in stock

Inventory low stock

Low stock

Inventory low stock show count

Low stock: {{ quantity }} left

Inventory out of stock

Out of stock

Inventory out of stock continue selling

In stock

Sku

SKU

[Dan-From-Ryviu]

Have you edited main-product.liquid file? 

[Belgloin]

Not edited. I have copied the above information 

[Dan-From-Ryviu]

Please revert those file to original version and then check if it works 

[Belgloin]

Unfortunately that has not worked.

I have seen the following in the JSON file ? Related

},

"dc22094b-cebd-411a-9b9f-03a7569bdbdd": {

"type": "inventory",

"settings": {

"text_style": "body",

"inventory_threshold": 4,

"show_inventory_quantity": true

}

},

[Dan-From-Ryviu]

The code look good. Could you check inventory of your product in Products?

[Belgloin]

The products have inventory, on mobile device it is showing for example 'app 5'.

When I go onto the mobile device inventory it is empty. However on desktop the main page is empty,but when I change to an app inventory page all products are showing

[Belgloin]

An update.

I have two inventory locations. One default with no products, and one via an app with all products.

How can I point the script in the inventory status block to look for the alternative inventory?

I am not sure if this information is relevant: current location is: location_id=87342580041, inventory needed: location_id=87527031113 

Thank you