Skip to main content

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​

  1. Go to Widgets > Layout in the Scrollengine dashboard
  2. 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:

  1. Date first, then time β€” Standard flow
  2. 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:

  1. Go to Widgets > Layout > Custom CSS
  2. Add your CSS rules
  3. Preview changes before saving
caution

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.