Block: Stock status
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:
- Open the design builder.
- Go to the product page template.
- In the "Product Purchase" section, click the plus sign (+).
- 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.
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.
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;
}