Pre-order

🤔 How to enable pre-order functionality across your store?

Want to allow customers to pre-order products that are out of stock or coming soon? Here's how:

STEP 1: Navigate to Theme Settings > Products > Pre-order.

STEP 2: Enable Pre-order Settings

Enable the Pre-order option by selecting from the following logic:

• Yes: All products will display a "Pre-order" button on the product card, product page, quick view, featured product, cart, cart page, and in the product property.
• No: No product will display the "Pre-order" button in any location.
• When product is Out of Stock: Products that are i) out of stock and ii) have the "Track Quantity" and "Continue Selling When Out of Stock" options enabled will display the "Pre-order" button.

STEP 3: Apply Pre-order to Specific Products or Collections

You can choose to apply the pre-order settings to specific Products or Collections:

• If neither is selected, the pre-order setting applies to all products meeting the above criteria.
• If both are selected, the pre-order setting applies only to the selected products and collections as long as they meet the above criteria.

STEP 4: Customize Card button label & Pre-order message

• Add a Card button label configuration to customize the label of the pre-order button on product cards, etc. The default label is "Pre-order".
• Add a Pre-order message configuration to display a message in the cart or mini-cart for pre-ordered products. The default message is "Ships in 2 weeks". The message will appear in the product property section in the format: Preorder: [message].

STEP 5:
Click “Save”.

🤔 How to add a prominent pre-order label to product cards?

Want to make pre-order items stand out in your product listings with a clear badge? Here's how:

STEP 1:

• Go to the Overlay group settings and search for Product Labels & Badges (this section is added by default).
• Under the Product Labels & Badges section, add the Pre-order label block.

STEP 2: Configure the Pre-order label

• Toggle ON both Show on product card and Show on product page options.
• In the Content field, custom text or use default label’s content. If needed for dynamic content, please use these codes:

• (Optional) Add an Icon or Custom icon image for visual emphasis.

⚠️ Note: For Quick view and Product information sections, remember to add the Labels and badges block separately.

STEP 3: Customize label display settings

• Select Label style for animated presentation (Default, Rounded corner, Top scrolling, Bottom scrolling).
• Set Time per scroll (2 to 20 seconds) for scroll speed control.
• Choose to use an Image instead of text by uploading via “Select”.
• Set Label opacity (100 for full opacity, lower for transparency).
• For static labels, choose from Label position (Top left, Top right, Bottom left, Bottom Right). Label position doesn't apply with scrolling styles.

STEP 4:
Click “Save”.

💡 Pro tip: Use the scrolling label style for time-sensitive pre-orders to create urgency. For permanent pre-order items, consider static positioning with higher opacity for consistent visibility. Always test scrolling speed to ensure readability without being distracting.