If you can't add an app block in the desired position or your theme isn't 2.0, follow these steps to place the widget where needed.
Placing the widget on the product page
Note
We recommend using the chrome browser.
- Open Developer Tools
- Navigate to the product page.
- Right-click anywhere on the page and select Inspect, or go to the browser menu → More tools → Developer tools.
- Find the Placement Spot
- Click on the Element selector tool
- For example, if you want to place the FBT list widget, below the product description, hover below the product description (or your desired location) until you see a highlighted section in the developer tools.
- Copy the Class Name or ID name
- Here, I copy the class of the highlighted section.
- Verify the Element
- In the developer tools, go to the console section.
- Enter: document.querySelectorAll('.CLASS') (replace .CLASS with the copied class name).
- Example: document.querySelectorAll('.product__description').
- Press Enter. If the response length is 1, it's a valid placement spot.
- If you do not get that response, you can try selecting another element.
- If you still have issues, contact customer support for free setup assistance.
- Update the Widget in the App
- Navigate to customize section in the app.
- Click “Edit widget” under “FBT list”
- Enable “Use CSS selectors”, and enter the class name for both desktop and mobile view. The class name should start with a “.” and any spaces within the class name should be replaced with “.” If you are using an ID name. It should start with “#”
- From the drop down, select “After” to place the widget below the product description.
- Save the settings
- Verify Placement
- Visit the product page to check if the widget appears in the desired location.