Custom HTML & CSS for Oxify Cart Drawer • Oxify Cart Drawer Cart Upsell

Custom HTML and CSS (Advanced)

What this feature is for

Custom HTML blocks and Custom CSS let you add your own small content areas (like messages, icons, or links) and style them to match your brand.

This is an advanced feature. Small CSS changes can affect spacing, buttons, and mobile layout, so follow the safety tips below.

Use this when the built-in design settings are not enough (for example: a special message, extra links, or custom spacing).

Supported locations for custom HTML blocks

You can add HTML only in the places the app supports. The exact names can vary by template, but you will usually see options like:

Top area (near the cart title/header)
Above cart items
Below cart items
Checkout/footer area (near the checkout buttons)
Empty cart area (when the cart is empty)

If you don’t see a location in the editor, that location is not supported in your current cart layout/template.

Add a custom HTML block

In the app, go to Cart Editor and open the section for Custom HTML (sometimes called Custom block or Custom content).

Select a Location (for example: Above cart items or Footer).

Paste your HTML into the input field. Keep it simple: text, links, and small layout wrappers work best.

Check both desktop and mobile sizes. Make sure the checkout button is still easy to see and tap.

When you’re happy with the result, publish your changes.

Safe HTML examples you can copy

<div class="oxify-custom-block">
  <p><strong>Fast shipping:</strong> Orders ship in 1–2 business days.</p>
</div>

<div class="oxify-custom-block">
  <ul class="oxify-custom-list">
    <li>Secure checkout</li>
    <li>Easy returns</li>
    <li>Support 7 days a week</li>
  </ul>
</div>

<div class="oxify-custom-block">
  <p>
    <a href="/policies/shipping-policy">Shipping</a>
     • 
    <a href="/policies/refund-policy">Returns</a>
     • 
    <a href="/pages/contact">Contact us</a>
  </p>
</div>

Avoid adding large blocks of HTML (big tables, long forms, or huge images). These often break the cart layout on mobile.

Add custom CSS (deeper styling)

Custom CSS lets you style your custom HTML block (and sometimes other cart elements). The safest way is to style only your own wrapper class.

In the app, go to Cart Editor and find Custom CSS (sometimes under an Advanced area).

Make sure your HTML block has a unique class name (example: oxify-custom-block). This keeps your CSS changes small and safe.

Add spacing, font size, and colors first. Avoid big layout changes until you know it’s stable.

Test with a full cart, long product titles, and different devices. This is where layout issues usually show up.

Safe CSS examples you can copy

/* Styles only your custom block */
.oxify-custom-block {
  padding: 12px;
  margin: 10px 0;
  background: #f7f7f8;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 10px;
}

.oxify-custom-block p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}

.oxify-custom-list {
  margin: 0;
  padding-left: 18px;
}

.oxify-custom-block a {
  text-decoration: underline;
}

Safety rules (read before you style)

Do not hide, move, or cover the checkout button. If customers can’t check out, you will lose sales.

Scope your CSS: style your own class (like .oxify-custom-block) instead of broad rules like div, button, or *.
Avoid “layout heavy” CSS unless you really need it: position: fixed, large negative margins, and big z-index values often cause overlap issues.
Don’t force sizes: avoid setting fixed heights on cart areas. The cart needs to grow for long titles, discounts, and multiple items.
Use readable text: keep font size and contrast clear, especially on mobile.
Be careful with images: if you add images, keep them small and responsive (don’t overflow the cart width).

Best practice: add one change at a time. If something looks wrong, you’ll know exactly which line caused it.

Common mistakes (and how to avoid them)

Remove any broad rules like button { ... } or div { ... }.
Remove position: fixed, big z-index, and negative margins.
Keep your CSS limited to your wrapper class (example: .oxify-custom-block).

Shorten the text.
Reduce padding and font size a little.
Avoid large images or long lists.

Add a simple link style inside your block:

.oxify-custom-block a {
  text-decoration: underline;
}

Recommended pattern: HTML + CSS that stays safe

This pattern is easy to manage and less likely to break other cart parts:

Add a single wrapper class to your HTML (example: oxify-custom-block).
Write CSS that targets only that wrapper and its children.
Keep changes focused on spacing, color, and typography.