How to Access Style Customization
Open the App
Go to Shopify Admin > Apps
Select Notify! Back in Stock | Pre-order
Click on the Pre-order tab
Open Style Settings
Scroll to the Pre-order Functionality section
Click Customize Appearance
Select the Style tab
Conditions for Button Visibility
For the preorder button to function and appear on your product pages, ensure the following conditions are met:
The “Tracking quantity” setting is enabled for the product.
The “Allow out-of-stock purchases” option is selected. Note: This setting may also appear as “Continue selling when out of stock.”
The product inventory level is set to 0 or less. To configure these settings:
Navigate to the Products section of your Shopify Admin Panel.
Open the product or variant for which you want to enable preorders.
Update the inventory settings to match the conditions outlined above. These steps ensure that the preorder button displays accurately for products that are out of stock.
Customizing the Widget Style
You can choose between:
1. Smart Matched with Your Theme (Recommended)
Automatically matches your store’s theme
Add extra CSS for further tweaks
Extra CSS Code field: Input any custom styles
2. Custom Style
Manually configure button and badge styles:
Badge Text Color – Color of text in the badge
Badge Background Color – Badge background color
Badge Border Radius – Rounded corner settings
Button Text Color – Button label color
Button Background Color – Button fill color
Button Border Color – Border color
Button Border Radius – Roundness of button corners
Button Border Size – Border thickness
Extra CSS Code – Add advanced styles (e.g. animations)
Font Style – Customize font style to align with your store's typography
Button Size – Adjust the button size for better visibility or alignment
FAQs
Can I choose where the button appears?
Yes, toggle the button on/off for product, collection, or home pages in the settings.
If the button still doesn’t appear, verify visibility conditions such as tracking quantity, allowing out-of-stock purchases, and inventory level set to 0 or less.
Can I change the button text?
Yes, you can edit the label in the customization settings.
How do I match the button with my theme?
Select Smart Matched with Your Theme for automatic styling.
How do I request custom styling help?
The support team can help add animations, hover effects, and more.
If you need assistance configuring the visibility settings, please contact customer support.
Best Practices
Update regularly: Keep styles aligned with promotions and seasonal changes
Prioritize UX: Use consistent and appealing visuals to guide users
Use advanced styling: Stand out with animations and branding-specific tweaks