If the built-in appearance settings don't go far enough, you can add your own custom CSS to the reorder page. This lets you control fonts, spacing, hover effects, animations — basically anything CSS can style.
You don't need to be a developer to use this, but knowing your way around CSS will help.
🛠️ How to add custom CSS
In the Easy Reorder app, go to Settings → Custom CSS
Paste your CSS into the editor
Click Save
Your CSS is added to the reorder page automatically — no theme code changes needed. The limit is 50,000 characters.
🎯 Available class names
To make styling easier, the Custom CSS tab lists the class names used on the reorder page. You can target:
.easy-reorder-app-button-primary — the primary action button
.easy-reorder-app-button-secondary — the secondary button
.easy-reorder-app-title and .easy-reorder-app-description — the page title and description
.easy-reorder-app-login-form and .easy-reorder-app-input-field — the login form and its inputs
.easy-reorder-app-product-card and .easy-reorder-app-product-title — product cards and names
.easy-reorder-price — product prices (note: no "app" in this one)
.easy-reorder-app-rating — the Judge.me stars under the product name
.easy-reorder-app-products-grid — the products grid
.easy-reorder-app-last-order — the previous order section
.easy-reorder-app-section-title — section headings
The same list is shown next to the CSS box in the app. For prices, use .easy-reorder-price from this article.
✨ Example: rounded product cards
.easy-reorder-app-product-card { border-radius: 16px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease;}.easy-reorder-app-product-card:hover { transform: translateY(-2px);}✨ Example: pill-shaped buttons
.easy-reorder-app-button-primary { border-radius: 999px;}✨ Example: custom font
.easy-reorder-app-title,.easy-reorder-app-product-title,.easy-reorder-app-button-primary { font-family: "Inter", sans-serif;}Make sure the font is loaded somewhere on your theme (most themes load custom fonts globally).
🧑💻 For theme developers
When a customer adds something to the cart from the reorder page, Easy Reorder refreshes your theme's cart icon and cart drawer, then fires a browser event named easyreorder:cart-updated on document. You can listen for it to run your own code, for example to open your cart drawer:
document.addEventListener('easyreorder:cart-updated', function () { // your code here});There is no box for custom JavaScript in the app any more; use this event instead.
⚠️ Note
Custom CSS changes your live storefront, and it takes effect as soon as you save, so test it carefully. It only affects the reorder page. It doesn't change reminder emails; for email styling, use the email editor's per-block controls.
It works wherever your reorder page lives: at Easy Reorder's own address, or on a theme page with the "Reorder page" block.
💡 Pro Tip
Try your CSS on a duplicate of your theme first, or keep a copy of your old CSS so you can paste it back. There's no preview screen in the app.
Still have questions? Get in touch and we'll help.