Widget Layout Customization
Customize how the delivery widget looks and feels on your storefront to match your brand and optimize the customer experience.
Accessing layout settings
- Go to Widgets > Layout in the Scrollengine dashboard
- Choose the widget to customize (Cart Page or Cart Drawer)
Layout options
Delivery method display
Choose how delivery methods are presented:
- Tabs — Horizontal tabs at the top (best for 2–3 methods)
- Radio buttons — Vertical list with radio selection
- Dropdown — Compact dropdown selector (best for space-constrained layouts)
Calendar style
- Inline calendar — Full month view embedded in the widget
- Compact calendar — Scrollable date strip showing the next 7–14 days
- Dropdown calendar — Date picker that opens on click
Time slot display
- Grid — Time slots displayed as clickable cards in a grid
- List — Vertical list of slots
- Dropdown — Slots in a dropdown selector
Day and time selection order
Configure whether customers select:
- Date first, then time — Standard flow
- Delivery method first, then date and time — Guided flow for stores with method-specific scheduling
Styling
Colors
- Primary color — Applied to selected states, buttons, and active tabs
- Text color — For labels and descriptions
- Background — Widget container background
Borders and spacing
- Border radius — Round or sharp corners
- Padding — Inner spacing of the widget container
- Spacing — Gap between widget components
Font
The widget inherits your Shopify theme's font by default. You can override this in the custom CSS field if needed.
Custom CSS
For advanced styling beyond the built-in options:
- Go to Widgets > Layout > Custom CSS
- Add your CSS rules
- Preview changes before saving
警告
Custom CSS may break if Scrollengine updates widget markup. Use class-based selectors and test after app updates.
Preview
Use the live preview in the dashboard to see your changes before publishing. Toggle between desktop and mobile views to ensure the widget looks good on all devices.