Skip to main content

Deposit widget customization

Learn how to customize the deposit widget on the Widget customization page

Written by Andrey Gadashevich

The deposit widget shows deposit payment options on your product page, for example Full payment or 50% deposit. You can change how it looks to match your store.

Go to: Split Payment → Widget customization → Deposit widget

You can also click Widget customization in the Preview of any partial payment option.

The page has four tabs: General, Widget, Badge and Discount label. The Preview on the right updates as you edit. Click Save to apply your changes to the store.

General tab

  • Templates: click Select template to start from a ready-made look. The options are Vertical or Horizontal, each in bordered, cards, minimal or no-radio style. A template changes only the design, not your texts.

  • Color theme: pick a preset (Dark, Blue, Purple, Green, Teal, Orange or Red) or choose Custom. The color is applied to the radio buttons, the selected option's border and background, the unselected options' border, and the discount label.

  • Layout: Vertical stacks the options. Horizontal puts them side by side.

  • Alignment: Left, Center or Right.

  • Vertical spacing / Horizontal spacing: the gap between options (0–40 px).

  • Corner radius: how rounded each option's corners are (0–40 px).

  • Padding: the space inside each option (0–40 px).

  • Text → Label 'days' / Label 'weeks': the words used for time periods, as in "charged in 30 days". Rename or translate them here.

Widget tab

  • Title: font color, size and style (bold, italic, underline) of the option name, e.g. "50% deposit".

  • Description: the same settings for the text under the option, e.g. "Initial payment: 50%…".

  • Radiobutton: show or hide the radio buttons with the toggle, and choose their style and color.

  • Active option: background color, border color and border width (0–10 px) of the selected option.

  • Inactive option: background color, border color and border width (0–10 px) of the unselected options.

  • Minimum cart amount notice: background color, font color, font size and font style of the message shown in the cart instead of the widget. This message appears when the cart total is below the minimum amount you set for partial payments in the cart.

Badge tab

Styles the badge shown on product images. See Customize the deposit badge.

Discount label tab

Styles the discount label (for example, "SAVE 10%") shown next to a payment option that has a discount. You can set:

  • Background color

  • Text color

  • Border radius (0–40 px)

  • Font style (bold, italic, underline)

  • Font size

Tip: transparent colors

Color fields accept 8-digit hex codes with transparency. For example, #00000000 is fully transparent and #00000040 is 25% black.

Where to edit the widget texts

This page controls the design only. Option titles, descriptions, the "Payment options" heading, and the badge and discount label texts are set in each option under Partial payments. To translate them into other storefront languages, add the languages in Settings → Languages.

Need Help?

If you have any questions, click Chat with us for help on the Widget customization page, or contact our support team.

📩 Contact Support: Reach out to us via live chat or send an email to [email protected]

Did this answer your question?