If you wish to position widgets such as the Badge, Payment option selector, or Button for your preorders or backorders, custom CSS positioning has to be done.
For the Payment option selector, widget positioning can also be done through the theme editor.
Widget positioning using CSS and HTML selectors is technical, and if you need any help, please get in touch with our customer support team for a free setup and assistance.
However, if you wish to do it yourself, follow the steps given below.
1. Open Developer Tools
- Go to your store and open the product page listed for preorder or backorder.
- Right-click anywhere on the page and select Inspect.
- Or go to your browser menu, click on More tools, and choose Developer tools.
2. Find the Placement Spot
- Click on the Element selector tool.
- Now, find the HTML selector for the section before or after which you wish to place your widget.
- To identify the HTML selector, hover over the chosen section on the product page until you see the corresponding class highlighted in the developer tools.
3. Copy the Class Name or ID Name
- Following that, copy the class name of the highlighted section
4. Verify the Class Name
To ensure you have chosen a valid placement point, you have to verify the class name.
- Under the developer tools, navigate to the console section
- Enter: document.querySelectorAll(‘.CLASS’) (replace .CLASS with the class name copied earlier.
- Example: document.querySelectorAll(‘.product-form__buttons’)
- Press Enter, and if the response is 1, then it's a valid placement point.
- If you get a different response, then you have to choose a different placement.
5. Update the Widget Position in the App
a) Badge and Payment option selector
- Open the Dibs app on your store and choose the Customize section from the side panel.
- Click Edit under the Widget position option.
- Turn on the toggle to enable widget position for the widget of your choice (Badge or Payment option selector)
- Under desktop and mobile, enter the verified class name and choose where you wish to place it using the drop-down menu (Before, After, At start, or At end)
- While entering the class name, ensure it starts with a “.” If there are any spaces within the class name, replace them with a “.”
- If you are using an ID name, then it should start with a “#”
- Click Save to complete the changes.
b) Button
Dibs by default converts the Buy Now label on the button to Preorder Now.
However, if you wish to replace the 'Add to cart' label with 'Preorder Now', you can customize it. To do that,
- Go to the Customize window and click Edit under Widget appearance.
- Open the CSS overrides tab and enter the CSS code to remove the Buy Now button.
shopify-buy-it-now-button{
display: none;
}- Press Save.
- Now, open the Customize tab and click Edit under Widget position.
- Enable the toggle under Button and enter the class name associated with the ‘Add to Cart’ button in the given space.
- While entering the class name, ensure it starts with a “.” If there are any spaces within the class name, replace them with a “.”
- If you are using an ID name, then it should start with a “#”
- Click Save to complete the changes.
6. Verify Placement
- Navigate to the product page to verify if the widget placement appears correctly.
Widget Positioning through Theme Editor
For the Payment option selector widget, you can directly change the position using the theme editor. (Available for 2.0 themes and newer versions)
- Go to the Customize section in the app.
- Click Edit under the Widget position option.
- In the Payment option selector section, click on the Go to theme editor button.
• Add the Payment option selector widget under Product information and place it in a suitable position. (Recommended placement: Above the Buy button)
• Press Save to complete the process.