Use this article to see which branding and display options you can customize in each Ingrid widget, and where each customization is set up.
This article is for retailers' e-commerce, brand and design teams who want Ingrid widgets to match their storefront. Ingrid widgets are part of Ingrid Promise and are designed to blend into your storefront, so they feel like a native part of your brand rather than a third-party module.
What you can customize in Ingrid widgets
Across the product page (PDP, product detail page) widget, the Checkout widget, the delivery upsell widget and the FAQ (frequently asked questions) widget, you can customize two kinds of things:
🎨 Branding: fonts, colors, background, borders, and the styling of labels and text
🖼️ Display options: what each Ingrid widget shows and how, such as logos, carrier icons, price and currency format, and delivery-time wording
Customizing an Ingrid widget changes only how the widget looks and presents information. Widget customization never changes delivery logic, pricing or availability.
Customizing the product page (PDP) widget
In the Ingrid product page (PDP) widget, you can customize the following branding:
Custom font: your own font family and font URL
Font weights and sizes: separate control for the category name and price, and for the ETA (estimated time of arrival) and tags
Text colors: a primary text color (category name, price) and a secondary text color (ETA, tags)
Accent color: the button color shown when the PDP widget asks for a postal code
In the Ingrid product page (PDP) widget, you can set the following display options:
Show or hide the Ingrid logo in the footer
Shorter delivery times, for example "2–3 business days" instead of "Delivered in 2–3 business days"
Show delivery times as estimates, which adds "(estimated)"
Ask for a postal code or not before showing delivery options
How many delivery options to show when the list is folded
Customizing the Checkout widget
In the Ingrid Checkout widget, you can customize the following branding:
Custom font: your own font family, font URL, weights and sizes
Widget accent color: buttons, radio elements, checkboxes and pins
Widget effects color: color overrides for additional widget elements
Upsell bar color
Transparent background: when on, the Checkout widget inherits your website's background color (otherwise the background is white)
Widget border: show or hide
In the Ingrid Checkout widget, you can set the following display options:
Show or hide the Ingrid logo, and optionally the "Powered by" slogan
Show carrier icons
Free shipping indicator: turn on or off, with an optional carrier logo and message style
Country selector in the top-right corner
"Delivery options" header: show or hide
Pickup location type, for example "Parcel locker" or "Pickup point"
Price and currency: ISO code or currency sign (for example "10 USD" or "10 $"), currency position, "Free" or "0", and a crossed-out original price for reductions
Delivery-time wording: shorter text and/or "(estimated)"
Customizing the delivery upsell widget
In the Ingrid delivery upsell widget, you can customize the following branding:
Custom font: font family, font URL, size and weight
Bar colors: one color before free shipping is reached, another once it is
Spacing and shape: remove padding around the widget, widen the bar and add inner spacing
In the Ingrid delivery upsell widget, you can set the following display options:
Show or hide the progress bar
Animate the progress bar
Show a success icon when free shipping is reached
Uppercase text
Hide the "Free" text once free delivery is reached
Choose the free-shipping message
Currency format: ISO code (for example "12 SEK") or symbol ("12 kr")
Show carrier logos and/or the Ingrid logo
Customizing the FAQ widget
The Ingrid FAQ widget offers display options only. It does not offer custom fonts or the color and transparency controls the other Ingrid widgets have. In the FAQ widget, you can set the following display options:
Show carrier icons or logos
Country selector: show or hide
Currency format: ISO code or sign, currency position, and "Free" or "0"
Widget border: show or hide
Show delivery times as estimates
Hide specific delivery categories from the FAQ widget
Customizing labels and custom text
Beyond the per-widget styling above, you can also brand the labels and custom text shown on your delivery options.
Delivery labels (for example sustainability, priority or your own custom labels) are shown on the Checkout, PDP and FAQ widgets. For delivery labels, you can set:
A custom color (HEX) for each label
An optional icon for each label, chosen from an icon library
All labels are managed under a single, flexible "Custom" label type
Custom text and custom info text are set on delivery categories and shown in the Checkout and FAQ widgets. For custom text, you can:
Format the text with bold, italic, paragraphs, links and line breaks
Apply a custom text color (HEX), including inline color
Use your brand font (inherited from your global font setting)
Give custom info text its own background color
Labels and custom text are configured per delivery category in the Ingrid Merchant Platform.
Where each Ingrid widget is customized
Where you customize an Ingrid widget depends on the widget and the setting. The table below shows where each Ingrid widget and setting is customized:
Widget | Where it is customized |
Product page (PDP) | Self-serve in the Ingrid Merchant Platform (Product Page → Features) |
Checkout | Core branding (accent color, effects color, upsell color, border, transparent background) is available directly in the Ingrid Merchant Platform; more advanced styling is applied through the widget configuration |
Delivery upsell widget | Configured in the Ingrid Merchant Platform |
FAQ widget | Applied through the widget configuration |
Labels and custom text | Per delivery category in the Ingrid Merchant Platform |
In practice, a lot of Ingrid widget branding is self-serve in the Ingrid Merchant Platform. More advanced widget configuration is typically handled together with your Ingrid implementation specialist during onboarding (or with Ingrid support afterwards), so your widgets match your brand from day one.
Good to know about customizing Ingrid widgets
Much of Ingrid widget customization is self-serve in the Ingrid Merchant Platform; more advanced options are set up with your Ingrid implementation specialist during onboarding.
Widget customization settings are visual only: they do not affect delivery options, pricing or availability.
Widget customization options can be adapted per market or storefront where needed.
Related
Multi-language support: which languages each Ingrid widget supports