---
title: "How to place the cart widget in the cart drawer with a CSS selector"
description: "Use the placement helper in the theme editor to put the cart widget into your cart drawer, or into a cart page that takes no app blocks."
url: https://help.shipdockapp.com/en/articles/11764761-how-to-place-the-cart-widget-in-the-cart-drawer-with-a-css-selector
collection: "Pickup points"
updated: 2026-11-05
language: en
---

# How to place the cart widget in the cart drawer with a CSS selector

Use the placement helper in the theme editor to put the cart widget into your cart drawer, or into a cart page that takes no app blocks.

On the cart page you add the widget as an app block. A cart drawer takes no app blocks, so there the widget needs a placement by CSS selector: the element in your theme it should sit next to. The placement helper in the theme editor finds that selector for you, you just click the spot.

## Before you start

-   Set up the cart widget and turn on its app embed, see [How to let customers choose a pickup point in the cart](how-to-let-customers-choose-a-pickup-point-in-the-cart.md).
    
-   Use the desktop preview in the theme editor. The helper works only in a preview at least 800 px wide.
    

## Turn on the placement helper

1.  In ShipDock, open **Settings → Widget → Cart widget settings**. Under **Placement in the cart**, click **Pick element** next to **CSS selector**. The theme editor opens on **App embeds**.
    
2.  Under **Cart widget**, turn on **Placement helper (theme editor only)**. The **Cart widget placement** panel appears in the editor preview.
    

![](https://files.gleap.io/pf/gattachments/68949ce73cfde7b987f63c30-SqEsR9SOcXj9v7wmWWO6SjhVFVhqZSxf587Qm12cSonK7jDaoOWmhu7vk8ok63liyOERxnmHQrP.png?v=1&k=a&s=api&e=1794355200&sig=ZcsVVwNR4N4gSL5lGKmaFS8EJK07hMnZwV0uwNAzTNg)

## Pick the spot

3.  In the preview, add a product to the cart and open the cart drawer.
    
4.  In the panel, click **Pick a spot**, hover an element in the drawer and click it. A blue line shows where the widget goes. **Esc** stops picking.
    
5.  Under **Where to insert**, choose **Above**, **Below**, **Inside, start** or **Inside, end**. The live widget appears in the drawer as a preview. Not right? Click **Pick another spot** or **Remove preview**.
    

> **Tip:** Pick an element that is always in the drawer, for example the subtotal, the tax note or the area around the checkout button. A product line changes with the cart.

## Hand it over to ShipDock

6.  Click **Use in Shipdock**. The cart widget settings open with the new placement filled in, set to **Show on: All pages**, so the widget also appears in a drawer opened from a product page.
    
7.  Click **Save**. Nothing is saved until you do.
    

If the link does not open, the selector is already copied: in ShipDock click **Add placement** under **Placement in the cart**, paste it, choose the **Position** and **Save**.

## Turn the helper off

8.  Back in the theme editor, open **App embeds → Cart widget**, untick **Placement helper (theme editor only)** and save the theme.
    

> **Note:** The helper exists only in the theme editor preview. Customers never see it on your store, even when it is on. Turning it off just keeps it out of your way in the editor.

## Check it

9.  Open your store as a tester (**Open as tester** in the cart widget settings), add a product and open the drawer. The widget should be there. Check the cart page too.
    

## Troubleshooting

-   **The widget is missing after a theme update:** the theme may have changed its code and the selector no longer matches. Pick the spot again.
    
-   **The helper does not react:** switch the editor preview to desktop, and pick an element inside the cart. The helper picks only elements in your theme's sections.
    
-   **Need help?** Write to us in the chat and we are happy to help you set up the placement for your theme.
    

## Related articles

-   [How to let customers choose a pickup point in the cart](how-to-let-customers-choose-a-pickup-point-in-the-cart.md)

## Related

- [How to choose the pickup point widget display mode](https://help.shipdockapp.com/en/articles/11530648-how-to-choose-the-pickup-point-widget-display-mode.md)
- [How to get a Google Maps API key for the pickup point map](https://help.shipdockapp.com/en/articles/10591817-how-to-get-a-google-maps-api-key-for-the-pickup-point-map.md)
- [How to add the pickup point widget to checkout (Shopify Plus)](https://help.shipdockapp.com/en/articles/10695859-how-to-add-the-pickup-point-widget-to-checkout-shopify-plus.md)
- [How to add the pickup point widget to the Thank you and Order status pages](https://help.shipdockapp.com/en/articles/9448644-how-to-add-the-pickup-point-widget-to-the-thank-you-and-order-status-pages.md)
- [How to let customers change their pickup point after ordering](https://help.shipdockapp.com/en/articles/11764759-how-to-let-customers-change-their-pickup-point-after-ordering.md)