Shopify theme editor — enable HK Pickup app embed
Turn on HK Pickup in your theme. This is the master switch for the storefront — when the embed is off, checkout works exactly as before.
Install HK Pickup on the Shopify App Store →
Enable the app embed
Section titled “Enable the app embed”- In Shopify Admin, go to Online Store → Themes.
- On your live theme (or the theme you are testing), click Customize.
- In the left sidebar, scroll to App embeds.
(This is not under “Sections” or “Add section”.) - Find HK Pickup and toggle it on.
- Click Save (top right).
The embed applies to both:
- Cart page — full cart with checkout button
- Cart drawer — slide-out mini cart (Dawn and similar themes)
You do not need to add a block or section to a template.
App embed settings
Section titled “App embed settings”With HK Pickup selected in App embeds, you may see Theme integration fields:
| Setting | Default | Purpose |
|---|---|---|
| Developer mode | off | Disable auto checkout intercept; use window.hkpickup API — see Developer mode |
| Pilot mode | off | Limit checkout intercept to allowlisted testers during migration — see Pilot mode |
| Allowed test emails | empty | One email per line; tester must log in as a customer and reload the cart |
| Checkout button selector | auto |
Which button opens the delivery dialog |
| Cart form selector | auto |
Cart form used for “Ship to my address” |
| Cart drawer selector | auto |
Drawer element for re-binding after cart updates |
Pilot mode vs Developer mode: Use Pilot mode for normal live checkout while migrating from another app. Use Developer mode when you write custom JavaScript (hkpickup.open()). Do not enable both for the same workflow — Developer mode ignores Pilot settings.
Leave as auto (recommended)
Section titled “Leave as auto (recommended)”HK Pickup auto-detects popular themes (Dawn, Horizon, and others) using your theme name and page structure.
Leave all three fields as auto unless checkout does not work after you save and test.
When to override
Section titled “When to override”Change a field only if checkout still fails after verifying checkout — see also symptom fixes.
| Symptom | Try first |
|---|---|
| Checkout click does nothing / no dialog | Checkout button selector → button[name="checkout"] |
| “Ship to my address” does not continue | Cart form selector → form#cart |
| Cart drawer checkout broken after add-to-cart | Cart drawer selector → cart-drawer |
Your theme name is shown in the embed settings. For custom themes, note the theme name when contacting support.
Debug auto-detection
Section titled “Debug auto-detection”- Enable the embed and save the theme.
- Open your storefront cart and open browser DevTools → Console.
- Click Checkout and look for a log line starting with
[hkpickup] theme integration.
This shows which theme profile and selectors were detected.
Publish vs draft theme
Section titled “Publish vs draft theme”- Enable the embed on the theme you publish to customers.
- If you use a duplicate theme for testing, enable the embed there too before previewing.
Next step
Section titled “Next step”👉 Admin settings — choose which SF pickup types to show and optional branding.