Follow this guide to fully customize the Dibs preorder and backorder widgets to suit your Shopify store.
To begin with,
1. Open the Dibs app on your Shopify admin.
2. From the side panel, click on the Customize tab.
3. Under Widget customization, click add near the Product page section and then click Edit.
- Click on Customize.
1. Widget Customization
You can customize the preorder badge, payment option selector, and the button under this section.
It also comes with three preset themes. Use the drop-down menu under Color theme to choose one.
i) Badge
Under the badge, you can customize the color and font settings. This includes,
- Fill color
- Border color
- Corner radius
- Font color
- Font size
- Font weight
A preview of the badge is displayed on the right-side panel. The changes made will be reflected in the preview.
ii) Payment option selector
Under the payment option selector, you can customize the primary and secondary background colors.
Apart from that, you can change the font color, font size, and font weight of the following settings,
- Payment widget title
- Payment option title
- Payment option description
- Discount information
- Shipping information
- Purchase terms
For the discount information, apart from font settings, you can also customize the fill color, border color, and corner radius.
A preview of the payment option selector is displayed on the right-side panel. The changes made will be reflected in the preview.
iii) Button
Under the button, you can customize the color and font settings. This includes,
- Fill color
- Border color
- Font color
- Font size
- Font weight
A preview of the button is displayed on the right-side panel. The changes made will be reflected in the preview.
Once the changes are made, click Save.
2. Text and translations
Under text and translations, you can edit and customize the text for the following,
- Badge label
- Payment widget title
- Discount information
- Plan details
- Call to action label
Once the changes are made, click Save.
If you have added more languages or markets to your store, then you can translate the text to those languages as well.
- Click on the dropdown menu to choose the language.
- Enter the translated text in the respective fields.
- Click Save to apply changes to your storefront.
3. CSS overrides
If you know your way around CSS, use the custom CSS for advanced widget customization and styling.
- Click on the CSS override option in the left panel.
- Enter your custom CSS in the designated area.
- Press Save to apply the changes.
If you need help styling with CSS, feel free to contact our support team. We’re happy to help you customize the widget to match your brand.
4. Widget custom position
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 any further clarifications, feel free to contact us via Chat or Zoom.