Product Stock

Design Controls

Notices

The Notices section lets you customize the appearance of stock status notifications like ‘Out of Stock’ and ‘Backorder.’ Style these notices with background colors, borders, typography, and icons to make them stand out or blend seamlessly with your site’s design.

• Out Of Stock – Personalize the ‘Out of Stock’ notice with various design options.
  • Background – Set a background color for the ‘Out of Stock’ notice for visibility and style.
  • Borders – Customize the border of the notice, including radius for rounded corners, styling for lines, and shadow effects.
  • Typography – Adjust the typography for the ‘Out of Stock’ text to ensure it’s easily readable.
  • Padding – Set the internal spacing within the notice to keep the text proportionally balanced.
  • Disable Icon – Choose whether to display an icon with the notice.
  • Icon Color – If the icon is enabled, select its color (available when the icon is not disabled).
  • Custom Icon – Opt for a custom icon for the notice (available when the icon is not disabled).
• Backorder – Customize the ‘Backorder’ notice with a variety of styling options.

  • Background – Choose a background color for the ‘Backorder’ notice.
  • Borders – Style the borders with custom radius, styling, and shadow effects.
  • Typography – Adjust the typography settings for the ‘Backorder’ text.
  • Padding – Control the internal padding of the notice.
  • Disable Icon – Decide whether to show an icon with the ‘Backorder’ notice.
  • Icon Color – Select the color for the icon (available when the icon is not disabled).
  • Custom Icon – Use a custom icon if desired (available when the icon is not disabled).

In Stock

Design the appearance of the ‘In Stock’ notification. Customize it to make it noticeable or maintain consistency with the overall design of your product pages.

Spacing

Adjust the spacing around the stock status notifications to ensure they fit neatly into your page layout. Proper spacing helps in making these notices clearly visible without overwhelming other elements.

• Margin Top – Set the space above the stock status notifications for a balanced layout.
• Margin Bottom – Adjust the space below the notifications to prevent them from overlapping with other page elements.