The Design Settings tab allows you to customize how pre-order elements appear throughout your store. Each section includes a Preview for button at the top of its panel, so you can instantly see how your changes will look before saving them.
Pre-Order Button
Customize the appearance of the pre-order button displayed on product and shop pages.
- Enable change text: Allow editing of the default pre-order button label
- Enable change style: Enable customization of button design.
- Label: Set the button text shown to customers.
- Color: Choose the button color.
- Font: Select font style and size for the button text.
- Padding (px): Define spacing inside the button for text placement.
- Border Radius (px): Adjust the button’s corner roundness.
- Border Style: Adjust border color and border size, choose the border style for the button (solid, dashed, dotted, double).
Cart Notice
Add a customizable notice in the cart when it contains pre-order products.
- Enable change text: Allow editing of the default cart notice
- With date text: Text displayed when the pre-order availability date is known
- Without date text: Text displayed when no availability date is set
- Color: Choose the text color.
- Font: Select font style and size for the notice text.
- Padding (px): Adjust spacing around the notice box.
- Border Radius (px): Set the roundness of the notice box corners.
- Border Style: Adjust border color and border size, choose the border style for the button (solid, dashed, dotted, double).
Product Page Notice
Display a pre-order notice on product detail pages.
- Enable change text: Allow editing of the default product page notice.
- With date text: Text displayed when a pre-order availability date is set
- Without date text: Text shown when the product has no availability date.
- Color: Choose the text color.
- Font: Select font style and size for the notice text.
- Padding (px): Adjust spacing around the notice box.
- Border Radius (px): Set the roundness of the notice box corners.
- Border Style: Adjust border color and border size, choose the border style for the button (solid, dashed, dotted, double).
Shop Page Notice
Show a pre-order notice on product listings in the shop/archive pages.
- Enable change text: Allow editing of the default shop page notice
- With date text: Text shown when a product has a pre-order availability date.
- Without date text: Text shown when the product has no availability date.
- Color: Choose the notice text color.
- Font: Select font style and size.
- Padding (px): Adjust spacing within the notice box.
- Border Radius (px): Customize corner roundness of the notice box.
- Border Style: Adjust border color and border size, choose the border style for the button (solid, dashed, dotted, double)..
Badge
Add a badge to highlight pre-order products in the shop or product pages.
- Enable: Toggle the badge on or off.
- Badge Text: Customize the text displayed inside the badge.
- Enable Icon: Enable or disable an icon alongside the badge text.
- Icon: Choose an icon to display in the badge.
- Display Position: Select the badge placement (e.g., top-left, top-right).
- Spacing: Adjust the distance between the badge icon and the badge text.
- Page To Display: Define where the badge will appear (product page, shop page, both).
- Color: Choose badge background or text color.
- Font: Select font style and size for badge text.
- Padding (px): Adjust spacing inside the badge.
- Border Radius (px): Set roundness of the badge corners.
- Border Style: Choose the badge border style.