Custom HTML and CSS injection (advanced)

Two slots

• Cart-level — Inject HTML / CSS scoped to the cart drawer.
• Storefront-wide — Inject across the entire storefront via Theme settings.

Scope your CSS

Always scope your CSS to .ia-cart-root or to your widget's specific class to avoid bleeding into other parts of the theme:

• Good: .ia-cart-root .my-banner { color: red; }
• Bad: div { color: red; } (affects every div on the storefront)

Specificity over !important

Use specific selectors instead of !important. !important often hides bugs — when you can't override a style, the better fix is a more specific selector.

Test in preview

Always test in the cart preview before publishing. Broken CSS can hide the entire drawer or misalign critical elements.

Help

If your custom CSS works in preview but not on the live storefront, the issue is usually theme CSS specificity. Reach out to support with the snippet.