The Preorder Badge is a visual overlay that appears directly on product images across your Collection and Home pages. This badge serves as a high-visibility cue to let customers know an item is available for preorder before they even click on the product.
1. Enabling the Preorder Badge
By default, the preorder badge is set to "Hide." To enable it:
Navigate to the Widget section in the app sidebar.
Select the specific page type you want to edit: Collection pages or Home page.
Master Toggle: Ensure the main toggle at the top of the page (e.g., "Collection pages") is set to On.
The Hide/Show Toggle: Locate the Badge title element. Click the Show button next to it.
Hide (Default): The element is inactive and invisible.
Show: The element is active. The badge will now appear on your product images in the Live Preview and on your store.
2. Displaying Discounts
You can now motivate customers by showing the savings they get for preordering directly on the badge.
How to add: In the Badge title input field, use the placeholder {{discount}}.
Example: If you type Pre-order {{discount}}, the badge will display as Pre-order -20%
Smart Discount Logic: If a product has multiple variants with different discount rates, the badge will automatically display the lowest available discount. This ensures transparency and manages customer expectations.
2. Configuring Badge Content & Position
You can customize what the badge says and where it sits to ensure it doesn't block important product details.
Badge Title: Enter the text you want to display (e.g., "Pre-order", "Limited", or "Coming Soon").
Badge Position: Use the dropdown menu to anchor the badge to one of four corners of the product thumbnail:
Top left
Top right
Bottom left
Bottom right
3. Styling Your Badge
To make the badge match your brand, click the Style arrow to access the design configuration:
Badge Text Color: Select a color that provides high contrast against the badge background.
Discount Text Color: You can choose a specific color for the {{discount}} portion of the text (e.g., setting the discount to bright red to make it pop).
Badge Background Color: Choose a brand-specific color (e.g., a bright red or a sleek black) to grab attention.
Badge Border Radius: Use the slider to change the shape of the badge.
0px: Sharp, square corners.
35px: Fully rounded, "pill-style" edges.
Troubleshooting FAQ
I turned the feature "On," but I don't see the badge on my images. Why?
Check the Eye Icon next to the "Badge title" field. Because the badge is off by default, you must manually click the eye icon to make it visible.
Can I have the badge in the "Top Left" on my Home Page but "Top Right" on Collection Pages?
Yes. Settings for the Home Page and Collection Pages are independent. Simply click the respective tab in the sidebar to set different positions for each page type.
What happens if I turn the global toggle "Off"?
If the master toggle is switched to Off, the badge will disappear from all products on that page, even if the Eye Icon is set to visible.