website logo
SupportDashboardAbout SparkLayerSchedule Demo
📘Help Docs
⚙️Tech Docs
Navigate through spaces
⌘K
👋Introduction
How SparkLayer Works
Getting Started
📣Useful Links
What's New!
Roadmap
Support
Try our Demo
Troubleshooting
Policies & Data
🖥️Frontend
⭐Features
⚒️Backend
📊Dashboard
🌐Integrations
Docs powered by
Archbee
Features
Configurations

Stock Display

Show stock levels (inventory)

Stock levels are retrieved automatically from your eCommerce platform (or integration if you're using the SparkLayer API) and you can choose to display these to your customers as well as customise the status messages.

Document image


To enable this feature, you can apply a special setting to your website as shown below.

Updating the display You can update the default display by adding code to your Core Script. Learn more about how to update display settings on SparkLayer


JS
|
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
stock: {
  show: true,
  max: 50,
  last: 5,
  low: 15,
},
/* End of code */


You can adjust the rules of the status messages shown to customers by changing the variables in the configuration code above.

Status

Details

Behaviour

max

The maximum stock level you want to show to customers.

Stock displays as "XX+ available"

last

Let your customers know that the stock level is down to its last items

Message shows as red"Last stock"

low

Let your customers know that stock level is low

Message shows as orange"Low stock"

Setting a maximum stock level

If you're wanting to set a maximum stock level that your customers see, you can configure this via the SparkLayer Dashboard.

Document image


For example, if you set the limit to 100, it will display as 100+ to the customer if the stock level exceeds this.

Document image


Showing stock on product cards

Document image


You can also display live stock levels in the Product Card Interface. To enable this please read our guide.






Pre-order & back-order products

SparkLayer has full support for different stock status messages and it's possible to set up products as pre-order and back-order. This will allow products to be added to an order and concurrently show the pre-order / back-order messaging to the customer.

Document image

🛍️ Using Shopify
🌐 Other platforms
Document image


To enable this within Shopify

  • Set the product as 'Continue selling when out of stock'
  • Set a stock level of zero (or less)

By default, the pre-order messaging is hidden to the customer. To enable this, add the below CSS to your CSS overwrites.

Please refer to the SparkLayer Technical Docs

CSS
|
--spark-product-stockstatus-back-order-display: flex;


Updating language and text You can update the default text by adding code to your Core Script. Learn more about how to update text on SparkLayer.


JS
|
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
translations: {
  en: {
    "pdp.messaging.back-order": "Pre-order",
    "product-card.messaging.back-order": "Pre-order",
  }
},
/* End of code */


Setting pre-orders at a variant level

It's also possible to configure pre-ordering at a variant level, allowing you to set an exact amount of stock you want to allow customers to be able to pre-order.

To enable this, SparkLayer uses special settings (sometimes referred to as metafields or attributes) that allow additional data to be stored against products.


🛍️ Using Shopify
🌐 Other platforms

Setting up metafields on Shopify To learn more about how to configure metafields on Shopify for SparkLayer, please refer to our guide here

Item

Details

Custom data type

Variants

Metafield type

This must be set as an integer

Namespace

This must be set as sparklayer

Key

This must be set as min_stock_level

Value

This must be set as a negative integer, e.g. -6, -12, -20, etc

Item

Details

Custom data type

Variant-level (products)

Metafield type

This must be set as an integer

Namespace

This must be set as sparklayer

Key

This must be set as min_stock_level

Value

This must be set as a negative integer, e.g. -6, -12, -20, etc

For more information, please refer to the SparkLayer Technical Docs

Setting a custom date

"Custom dates" allow you to set an exact date when the product is expected to be available. It’s a great way to give the end customer better visibility of when to expect receipt of the products on order, and helps deliver an overall better customer experience.

Document image


Use-cases could include:

  • Setting a "due in" date of when you're expecting the product to be in stock
  • Setting an "estimated shipping" date of when you're expecting the product to ship

To enable this, SparkLayer uses special settings (sometimes referred to as metafields or attributes) that allow additional data to be stored against products.


🛍️ Using Shopify
🌐 Other platforms

Setting up metafields on Shopify To learn more about how to configure metafields on Shopify for SparkLayer, please refer to our guide here

Item

Details

Custom data type

Variants

Metafield type

This must be set as an date

Namespace

This must be set as sparklayer

Key

This must be set as restock_date

Value

This must be set in the appropriate date format, e.g. 17/11/2022 (for the UK)

Item

Details

Custom data type

Variant-level (products)

Metafield type

This must be set as an date

Namespace

This must be set as sparklayer

Key

This must be set as restock_date

Value

This must be set in the appropriate date format, e.g. 17/11/2022 (for the UK)

For more information, please refer to the SparkLayer Technical Docs

Updating language and text You can update the default text by adding code to your Core Script. Learn more about how to update text on SparkLayer.


JS
|
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
translations: {
  en: {
    "pdp.messaging.back-order-due": "Due {restockDate}",
    "product-card.messaging.back-order-due": "Due {restockDate}",
  }
},
/* End of code */







Reserving stock

If you're installing SparkLayer on a single website and you are looking to run both DTC and B2B at the same time, it will be necessary to use the same stock pool behind the scenes. From an inventory point of view, this essentially means that both DTC and B2B customers will be ordering from the same stock source which can pose challenges.

For example, your B2B customers could place large orders which inhibit DTC customers from being able to order. SparkLayer has a way to solve this using a special setting called "Reserve stock quantity". It works as follows:

  • A product is set up within your store with a Reserve Stock Quantity, e.g. 50
  • Both DTC and B2B customers can order this product via your store
  • When the total stock level reaches 50, B2B customers will be prevented from adding the item to their order
  • DTC customers can continue to order the item, thus reserving stock for them

To enable this, SparkLayer uses special settings (sometimes referred to as metafields or attributes) that allow additional data to be stored against products.


🛍️ Using Shopify
🌐 Other platforms

Setting up metafields on Shopify To learn more about how to configure metafields on Shopify for SparkLayer, please refer to our guide here

Item

Details

Custom data type

Variants

Metafield type

This must be set as an integer

Namespace

This must be set as sparklayer

Key

This must be set as reserve_stock_quantity

Value

This must be set as an integer, e.g. 50

Item

Details

Custom data type

Variant-level (products)

Metafield type

This must be set as an integer

Namespace

This must be set as sparklayer

Key

This must be set as reserve_stock_quantity

Value

This must be set as an integer, e.g. 50

For more information, please refer to the SparkLayer Technical Docs






Stock status messaging

Within the Frontend Interfaces, SparkLayer will display the "stock status" of a product (and its variants), allowing customers to easily see the inventory availability. Providing you have the "Show stock levels (inventory)" configuration enabled, you can then adjust the messaging that is shown by overwriting the default language settings.

Updating language and text You can update the default text by adding code to your Core Script. Learn more about how to update text on SparkLayer.


JS
|
/* Add the below code into the SparkLayer Core Script */
/* Please refer to our help guide on how to do this */
translations: {
  en: {
    "pdp.messaging.back-order": "Pre-order",
    "pdp.messaging.back-order-due": "Due {restockDate}",
    "pdp.messaging.out-of-stock": "Out of stock",
    "pdp.messaging.low-stock": "Low stock",
    "pdp.messaging.last-stock": "Last stock",
    "pdp.messaging.in-stock": "In stock",
    "pdp.messaging.un-sellable": "Unavailable",
    
    "product-card.messaging.back-order": "Pre-order",
    "product-card.messaging.back-order-due": "Due {restockDate}",
    "product-card.messaging.out-of-stock": "Out of stock",
    "product-card.messaging.low-stock": "Low stock",
    "product-card.messaging.last-stock": "Last stock",
    "product-card.messaging.in-stock": "In stock",
    "product-card.messaging.un-sellable": "Unavailable",
  }
},
/* End of code */




Updated 04 Sep 2023
Did this page help you?
PREVIOUS
Pricing Display
NEXT
Product Display
Docs powered by
Archbee
TABLE OF CONTENTS
Show stock levels (inventory)
Setting a maximum stock level
Showing stock on product cards
Pre-order & back-order products
Setting pre-orders at a variant level
Setting a custom date
Reserving stock
Stock status messaging
Docs powered by
Archbee