Block: Stock status

Med blokken for lagerstatus kan du tilpasse hvordan et produkts lagerbeholdning vises.

With the stock status block, you can customize how customers view a product's inventory. You can adapt the display based on size, color, and placement. In addition to standard status messages, you can also show custom messages and icons.

To add the block:

  1. Open the design builder.
  2. Go to the product page template.
  3. In the "Product Purchase" section, click the plus sign (+).
  4. Add the "Stock Status" block.

General Block Settings

You can adjust the font size, font weight, and color under the block's general settings. You can also change the margins to adjust the spacing from other blocks.

If your store uses "Advanced Inventory Management", custom text from the inventory rule will be displayed. These settings (font, color, etc.) will then affect the advanced text instead of the regular quantity.

Icon Display

You have several options for displaying icons before the stock text or quantity. Icon settings can be found under the tabs "Show icons on stock", "In-stock icon" and "Out-of-stock icon".

Show icons on stock

  • Activate this function to show icons in front of the stock text. You will immediately see how it looks in the preview in the design builder.
  • Use **"Icon size"** to adjust the size of the stock icon.

In-stock icon / Out-of-stock icon

  • Here you choose which icon should be displayed in front of the stock text, depending on whether the product is in stock or not.
  • It is also possible to override the text that is displayed for products that are in stock or out of stock.

Custom text

If you choose to add custom text, this will override the standard display of stock quantity or text. For example, if you have chosen to display the actual quantity in stock, using custom text will only show the text and not the quantity.

Global Stock Message

With the global stock message, you can display a message to end customers about whether products are in or out of stock. 
The settings include the following options:

  • Font size of the message
  • In-stock message: Text that is displayed if the product is in stock
  • In-stock icon: If you want an icon in front of the message, you can choose it here.
  • Out-of-stock message: Text that is displayed if the product is out of stock
  • Out-of-stock icon: If you want an icon in front of the message, you can choose it here.

Global Stock Message

This message will be displayed on all products and **cannot** be customized per product.
That is, if you choose to display the message "Available for immediate delivery" for products in stock, this will be displayed for all products that are in stock.

Customize Appearance

The global stock message is designed to support accessibility requirements, i.e., correct colors for contrast. The message has no adjustment options for colors, etc.

If you want to customize the appearance, this **can** be done by using custom CSS
The global stock message has the following CSS classes that can be used for customization:

  • __global_stock_message
  • __global_in_stock_message
  • __global_not_in_stock_message
  • __global_msg_in_stock_icon

Example of customization 
For example, if you want to change the "In-stock" message from green to blue, it can be done as follows.

.__global_stock_message.__global_in_stock_message {
              background: #c7ddf8;
              color: #031c3a;
              border-color: #031c3a;
            }
          .__global_stock_message.__global_in_stock_message svg {
              fill: #031c3a;
            }

Was this article helpful?