Custom HTML and CSS injection (advanced)

Two slots

Both live in one place, Cart Editor → Custom HTML & CSS, and both apply to the cart drawer only. There is no storefront-wide slot and no theme-editor setting for custom code (Frequently Bought Together offers and Product List Widgets have their own custom HTML settings in their own editors). Nothing is applied until you click Enable at the top of that screen (the badge changes from Off to On) and save.

• Custom HTML — One block of HTML per location. Choose the location in Select HTML Location, then write the code in Code Editor. The locations are Above announcements/rewards, Below header/announcements/rewards, Between each line item, Above footer/add-ons, Above checkout button, Below checkout button, Bottom of cart and On empty cart screen. Every location except On empty cart screen only shows when the cart has items.
• Custom CSS — Plain CSS in the Css Editor field.

For the click-by-click steps, see How to add custom CSS?.

Scope your CSS

Oxify adds your custom CSS to the page exactly as you write it, so it isn't limited to the drawer automatically. Start your selectors with #ia-upsell-cart-parent (the element that wraps everything inside the drawer) or with your widget's specific class, to avoid bleeding into other parts of the theme:

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

Some of Oxify's own class names are listed in the CSS selectors section of the Developer Documentation.

Dynamic values in custom HTML

Custom HTML can contain placeholders that Oxify replaces with live cart values. Write them with double curly braces and no spaces inside, for example {{cart_total}}:

• {{cart_total}} — Final cart total, formatted with your store's money format.
• {{cart_total_amount}} — Final cart total as a plain number, such as 49.00.
• {{original_price}} — Cart total before discounts and savings (empty when there are no savings).
• {{savings}} — Total amount saved (empty when nothing is saved).
• {{order_discount_savings}} — Amount saved through order-level discounts (empty when there are none).
• {{cart_item_count}} — Number of items in the cart.
• {{discount_codes}} — Applied discount codes, separated by commas (empty when there are none).

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 saving. Your CSS and HTML show in the preview as soon as the module is enabled, and saving makes them live on the storefront. 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.