Cart Page Widget Setup
The cart page widget is how customers select their delivery method, date, and time slot before checkout. It embeds directly into your Shopify cart page.
Adding the widget to your cart page
Automatic installation
- Go to Widgets in the Scrollengine dashboard
- Click Install Widget
- Select Cart Page
- Scrollengine will automatically add the widget to your Shopify theme's cart page
Manual installation
If automatic installation doesn't work with your theme:
- Go to your Shopify Admin > Online Store > Themes
- Click Customize on your active theme
- Navigate to the Cart page template
- Add the Scrollengine app block (or section) where you want the widget to appear
- Save
подсказка
Position the widget above the checkout button so customers select their delivery preferences before proceeding to payment.
Widget behavior
Once installed, the widget:
- Detects the customer's delivery address (if entered)
- Shows available delivery methods based on your rules
- Displays a calendar for date selection
- Shows available time slots for the selected date
- Attaches the selected delivery preference to the order at checkout
Widget components
| Component | Description |
|---|---|
| Method selector | Tabs or buttons for Local Delivery, Pickup, Shipping |
| Address input | For delivery — validates against your delivery zones |
| Calendar | Date picker showing available dates |
| Time slots | Available delivery windows for the selected date |
| Delivery fee | Displays the applicable fee (if any) |
Testing the widget
After installation:
- Open your store's cart page in a browser
- Add a product to cart
- Verify the widget loads with your delivery methods
- Select each method and confirm the calendar and time slots appear
- Enter test addresses inside and outside your delivery zone to verify zone logic
Troubleshooting
| Issue | Solution |
|---|---|
| Widget doesn't appear | Check that the app block is added in your theme editor |
| No delivery methods shown | Verify you have at least one delivery method enabled with active delivery rules |
| Calendar shows no dates | Check your time slots and working hours configuration |
| Widget loads slowly | Ensure your delivery rules aren't overly complex; contact support if the issue persists |