If you want to place the in cart upsell widget in the cart drawer, custom positioning is the only way to do it. Follow these steps to place the widget in the cart drawer.
Placing the In cart upsell widget on the Cart Drawer
Note
We recommend using the chrome browser
- Open Developer Tools
- Open the cart drawer
- Right-click anywhere on the cart drawer and select Inspect, or go to the browser menu → More tools → Developer tools.
- Find the Placement Spot
- Click on the Element Selector Tool.
- For the Incart Upsell widget, hover over the footer of the cart drawer until the section is highlighted.
- Copy the Class or ID Name
- Copy the class or ID of the highlighted cart drawer footer section.
- Here, I copy the class name
- 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('.drawer__footer’)
- 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 the Customize section in the app.
- Click Edit Widget under Incart Upsell.
- Enable “Position in cart drawer”
- Enter the class name for both mobile and desktop. If you are using a class name, it should start with “.” and all spaces should be replaced with “.”. If you are using an ID name it should start with “#”
- Save the settings.
- Verify Placement
- Open the cart drawer to check if the widget appears in the desired location.