In this guide, I’ll show you how to customize the widget appearance across different areas of your store, including the collection page, search page, quick buy modal, and home page.
Instead of showing preorder information only on the product page, you can display it in multiple places across your store. This improves transparency and helps customers clearly understand that the product is available for preorder.
Steps to Enable/Customize the Widgets
Go to Customize, then click Add under the required widget.
The widget is active now. You will now find an Edit option where you can perform two actions:
- Update the status whether you want to enable or disable the widget
- Customize the widget
1. Widget Status
All these widgets are optional. If you want to remove the widget, uncheck the Enable Widget option.
2. Widget Customization
For customization, click Customize under Widget Appearance.
Now, let’s see how to customize each of the widgets.
i. Collection Page
You can add a preorder label on the collection page so customers know it’s a preorder even before viewing the product page.
Here, you can:
- Modify the appearance of the badge (font size, font style, fill color, etc.)
- Update the badge text under Text and Translations.
- Adjust the position under Widget Custom Position using HTML/CSS.
You have to copy the class/ID of the widget and then replace (.CLASS) with the copied class and update the position.
Example:
Class- .card-gallery
ID- #product-media
For more detailed positioning, refer to this guide.
For advanced changes, you can also add custom code in the CSS Overrides section. Use this section if you’re a developer familiar with CSS, or contact our support team for styling help.
ii. Search Page
When you search for a product, a list of products is displayed. This is where the preorder badge will appear.
Follow the same steps as the collection page:
Add the widget → Click Edit → Click Customize → Update appearance, text, and position.
iii. Quick Buy Modal
Customers can purchase products directly from the product grid using the Quick Buy option, without visiting the product page.
If the product has only one variant, the Quick Buy button will appear as “Add to Cart.”
If the product has multiple variants, the button will display “Choose Options.”
Clicking “Choose Options” opens a Quick Buy modal, allowing customers to select their preferred options and complete the purchase quickly.
Here’s how you can edit this Quick Buy Modal.
After adding the widget, you can edit the badge, payment option selector, and the preorder button.
You can also update the text and adjust the placement of each element.
For detailed steps, refer to the guide on customizing the product page, as the process is the same for the Quick Buy modal and the featured product section.
iv. Featured Product (Home Page)
On the home page, you can add featured products that allow customers to preorder directly.
Similar to the Quick Buy modal and product page, you can customize widgets for featured products by following these steps:
Add → Edit → Customize → Update appearance and position
That’s it! You can customize your preorder widgets in just a few minutes using the Dibs app.
For further assistance, we also offer free setup support via chat or Zoom.