Widget

Widget Templates

TackOn ships with ready-made widget presets so you can match a fee to its purpose and your store's look. No code required. You'll find these under Settings → Cart Widget.

Widget types

Pick the type that matches what you're offering. Each comes with its own icon, default copy, and styling:

  • Shipping Protection offers package protection against loss or damage.
  • Gift Wrap lets customers add gift wrapping to their order.
  • Plant a Tree adds an optional environmental contribution.
  • Carbon Neutral offers a carbon-offset add-on for the order.
  • Festival gives you seasonal and holiday-themed styling for limited-time add-ons.
  • Custom starts from a blank base so you can build your own add-on.

Template styles

Every type comes in two styles:

  • Simple is a clean, icon-based layout. Lightweight and works everywhere.
  • With Image is a premium layout that shows a custom image you upload. Great for branded or product-style add-ons.

Choosing a template

  1. Go to Settings → Cart Widget.
  2. Choose a Widget Type.
  3. Choose a Template Style (Simple or With Image).
  4. Watch the preview update live as you edit.
  5. Save.

Customizing your widget

Each template can be tailored without touching code:

  • Title & description: the heading and supporting text customers see.
  • Feature bullets: short reassurance points (e.g. "Fast claims", "No receipt needed").
  • Colors: Primary Color, Background Color, and Text Color, plus one-click Quick Presets (Blue, Green, Orange, Purple, Red, Gray).
  • Corner Radius: from square to fully rounded.
  • Image: upload your own for the "With Image" style.
  • Checkbox behavior: let customers opt in/out, or keep the add-on always on.
  • Default state: start checked or unchecked. If you default to checked, TackOn automatically turns on a checkout confirmation popup to stay within Shopify's optional-charge guidelines. See Required & Default-On Fees for when a pre-checked or always-on fee is allowed.

Want full control?

For complete markup control, use the raw HTML/CSS editor. See Custom HTML & CSS.

Going deeper

For the full customiser walkthrough with screenshots (colours, Dynamic Content opt-in/opt-out copy, behaviour settings and the template gallery), see Designing the Cart Widget.