Help center
Add the delivery and pickup widget to your theme
To add the widget, turn on the ScrollEngine app embed in your theme editor, choose where it appears in the app's Widgets settings, then check it on your cart page.
Steps
Step 1: Open the widget settings
In ScrollEngine, open Widgets. Choose which delivery methods shoppers see (local delivery, store pickup, standard shipping), their titles and icons, and the widget's colors, text and layout.
Step 2: Turn on the app embed in your live theme
In Shopify admin, go to Online Store > Edit theme on your live theme. Select App embeds in the sidebar, turn on the ScrollEngine embed, then select Save.
Step 3: Choose where the widget appears
Show the widget on the cart page, the cart drawer, the product page or a combination. On supported themes the widget places itself, with no theme code edits.
Step 4: Decide how strict checkout is
Turn on the checkout gate to keep the checkout button disabled until the shopper has chosen a method, a location and, where required, a date and slot. You can also hide express and dynamic checkout buttons in the cart so shoppers can't skip scheduling.
Step 5: On Shopify Plus, add the picker to checkout (optional)
On Shopify Plus you can also add the date and time picker to checkout in the checkout editor. It blocks checkout until a date and slot are chosen. Stores not on Plus use the cart widget only.
Step 6: Test it on your storefront
Open your storefront in a private window, add a product to the cart and check that the widget shows your methods, locations, dates and slots.
Features in this article
- Delivery-method chooser in cart, cart drawer and product pageLive
- No-code widget configuratorLive
- Cart checkout gate and hiding of express buttonsLive
- Checkout date and time picker (Shopify Plus)Live
What this is for:
See the setup for ShopifyBefore you start
Set up at least one location with a method and slots first, so there is something to show: see the setup checklist.
Good to know
- The widget lets shoppers choose a method, a location, a date and a slot, and checks their address for delivery by ZIP code, full address or a pin on the map.
- The checkout date and time picker needs Shopify Plus. On other plans shoppers choose everything in the cart, and the checkout gate keeps them from checking out without it.
Related articles
Troubleshooting
If it doesn't work.
Check that the app embed is on and saved in your live (published) theme, not a copy. If you recently switched or duplicated your theme, turn the embed on again in the new theme. Then follow Troubleshoot slots not showing in cart.
The widget's position is set per theme. Contact us through the in-app chat with your theme's name and a screenshot, and we'll adjust where it appears.
Those buttons go straight to checkout, so the cart widget never runs. Hide express and dynamic checkout buttons in the widget's checkout settings, and turn off dynamic checkout buttons on product pages in your theme editor if your theme shows them there.
Yes. Edit every label in Widgets in the language your shoppers use. A one-click translate option fills in a draft for you to check before you save.