Can spotlight theme display inventory levels on product pages?

Can spotlight theme display inventory levels on product pages?

Belgloin
Tourist
11 0 1

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

Regards

Replies 15 (15)

Belgloin
Tourist
11 0 1

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
Shopify Partner
9611 1929 1963

Hi @Belgloin 

Go to your Online store > Themes > Customize > Products > Default product, Product information, click + Add block  > Inventory status Screenshot 2023-11-20 at 14.09.41.png

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Belgloin
Tourist
11 0 1

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
Shopify Partner
9611 1929 1963

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

Screenshot 2023-11-20 at 14.19.17.png

And could you share your page link to check?

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Belgloin
Tourist
11 0 1

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
Shopify Partner
9611 1929 1963

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 

Screenshot 2023-11-20 at 14.43.52.png

 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Belgloin
Tourist
11 0 1

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

Belgloin
Tourist
11 0 1

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
Shopify Partner
9611 1929 1963

Have you edited main-product.liquid file? 

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Belgloin
Tourist
11 0 1

Not edited. I have copied the above information 

Dan-From-Ryviu
Shopify Partner
9611 1929 1963

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

Screenshot 2023-11-20 at 15.03.16.png

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Belgloin
Tourist
11 0 1

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
Shopify Partner
9611 1929 1963

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

- Helpful? Like and Accept solution! or Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Belgloin
Tourist
11 0 1

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
Tourist
11 0 1

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