Checkout Widget

Overview

The Checkout widget tab on the Widget page lets you design the Shipping Protection widget that appears inside Shopify checkout. Pick a preset, customize it with a live preview, and click Save. Your checkout updates without any code.

Zoom

Presets

Start from one of four ready-made styles in the Preset card, then adjust it to fit your store:

Standard

Your icon, title and price, with a checkbox or toggle switch.

Insurance card

A bold heading, shield icon and roomy card that stands out.

Accent banner

A compact, shaded banner with a “Recommended” badge.

Minimal

Checkbox, title and price on one line, with a short description and a Learn more link underneath.

Show it in checkout

Checkout only shows the widget after you add the Navidium app block in Shopify's checkout editor. You only need to do this once:

1. On the Checkout widget tab, click Open checkout editor.
2. Click Add app block and choose the Navidium Shipping Protection block.
3. Drag the block to where you want it in checkout, then click Save.

You can move the block to any spot in checkout later. Changes you make in Navidium apply to the block wherever it sits.

Customize the widget

The editor in the middle column is split into collapsible sections:

Content

Title, subtitle, opted-in and opted-out messages, and an optional heading above the widget. Put {price} anywhere in the subtitle to show the protection price there, for example “Lost, stolen, or damaged for {price}”. Leave a field empty to fall back to the checkout app block’s own setting.

Logo

Upload your own image, or leave it empty to use the preset’s built-in icon.

Learn more

Show it as a text link or a small info icon. It can open a popup listing your own benefits, or link to a page on your store.

Badge

Add a badge next to the title, such as “Recommended”, and set its text, background, border and text weight.

Style

Background, border style and width, corner radius, padding and text sizes, plus a checkbox or one of four switch styles in your own color.

Fonts and colors follow your checkout branding settings in Shopify, so the widget matches the rest of your checkout.

Preview

The Preview column shows how the widget looks at checkout. The gray blocks stand in for other checkout sections; the widget's real position depends on where you placed the app block in the checkout editor. Click the widget in the preview to switch between its opted-in and opted-out states.

Revert

Changed your mind? Click Revert in the Revert card to go back to the checkout widget you had before presets.