RP ProPickup Help Series
Updating Cart / AJAX Drawer Selectors
Author: Rose Perl Technology
Last Updated: March 2026
Product: RP ProPickup
Scope: Shopify Cart Drawer / AJAX Cart Compatibility
Overview
Some Shopify themes use a Cart Drawer (AJAX Cart) instead of a traditional cart page. In these themes, cart contents load dynamically without refreshing the page.
To ensure RP ProPickup displays the pickup selection block correctly inside the Cart Drawer, the app may require configuration of drawer selectors.
For most stores, this only requires updating the Pickup Block Position Selector.
Quick Fix (Works for Most Stores)
More than 90% of stores using Cart Drawer can resolve compatibility by updating a single setting.
Update the Pickup Block Position Selector
Go to:
Local Pickup and Delivery - RP→ Settings --> For Developers - Choose Enable Development Mode and Click on the Advanced for Developer Tab.
Update the following field:
Position of Pickup Block Selector
Set the value to:
.cart__ctas
What this selector represents
.cart__ctas is typically the parent container of the Checkout button inside the cart drawer.
This ensures the Pickup block appears above the Checkout button.
When Manual Drawer Configuration Is Required
Some stores use custom drawer implementations that require manual configuration.
If the pickup block still does not appear correctly, configure the Drawer Selector settings.
Go to: Local Pickup and Delivery - RP→ Settings --> For Developers - Choose Enable Development Mode and Click on the Advanced for Developer Tab.
App Settings → Developer → Drawer Selector
Then enter the required selectors using the JSON configuration described below.
Example Drawer Configuration
Example configuration used for a typical Shopify cart drawer:
[
{
"selector": ".drawer",
"openClass": "active",
"removeButtonSelector": ".drawer__close-bt",
"plusButtonSelector": ".quantity-up",
"minusButtonSelector": ".quantity-down"
}
]
After saving the configuration:
Save settings
Refresh your storefront
Open the cart drawer again
How to Identify the Required Selectors
Below is a step-by-step guide to identify each required selector from your store’s HTML.
1️⃣ selector — Cart Drawer Container
This value represents the main wrapper of the cart drawer.
How to find it
Open your storefront
Click the Cart icon
Open the cart drawer
Right-click inside the drawer
Click Inspect
Look for the outermost drawer element.
Example HTML
<cart-drawer class="drawer animate active">
Correct value
.drawer
2️⃣ openClass — Drawer Open State
This is the class added when the drawer becomes visible.
How to find it
Inspect the drawer container
Close the drawer
Open it again
Observe which class appears when the drawer opens
Example
<cart-drawer class="drawer animate active">
When the drawer opens, the class active is added.
Correct value
active
3️⃣ removeButtonSelector — Drawer Close Button
This selector identifies the close (X) button inside the cart drawer.
How to find it
Inspect the close button inside the drawer
Copy its class name
Example HTML
<button class="drawer__close-bt"></button>
Correct value
.drawer__close-bt
4️⃣ plusButtonSelector — Increase Quantity Button
This selector identifies the “+” quantity button used to increase cart quantities.
How to find it
Locate the quantity controls
Inspect the + button
Copy its class name
Example HTML
<button class="quantity-up"></button>
Correct value
.quantity-up
5️⃣ minusButtonSelector — Decrease Quantity Button
This selector identifies the “−” quantity button used to decrease cart quantities.
How to find it
Locate the quantity controls
Inspect the − button
Copy its class name
Example HTML
<button class="quantity-down"></button>
Correct value
.quantity-down
Final Configuration Example
Below is the complete configuration ready to paste into RP ProPickup.
[
{
"selector": ".drawer",
"openClass": "active",
"removeButtonSelector": ".drawer__close-bt",
"plusButtonSelector": ".quantity-up",
"minusButtonSelector": ".quantity-down"
}
]
Important Notes
Do not use the Checkout button selector directly
Instead, use the parent container of the Checkout button for the Pickup Block Position Selector.
Correct example:
.cart__ctas
Cart drawers load via AJAX
Cart drawer content is loaded dynamically, so RP ProPickup requires the correct selectors to detect:
Drawer opening
Quantity updates
Cart changes
Drawer closing
Incorrect selectors may prevent the pickup block from appearing or updating correctly.
Troubleshooting
If the pickup block still does not appear:
Confirm the Pickup Block Position Selector is set correctly
Verify the Drawer Selector configuration
Clear your browser cache
Refresh the storefront
Reopen the cart drawer
Internal Reference
Product: RP ProPickup
Maintained by: Rose Perl Technology
Documentation Series: RP ProPickup Help Series