Skip to main content

💅 Add Custom CSS to the Reorder Page

Written by Miles

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

  1. In the Easy Reorder app, go to Settings → Custom CSS

  2. Paste your CSS into the editor

  3. Click Save

Your CSS is injected into the Reorder Page automatically — no theme code changes needed.

🎯 Available class names

To make styling easier, the Custom CSS settings page includes a reference of the main class names used on the Reorder Page. You can target:

  • The login card and its inputs

  • The "Reorder Previous Order" button

  • Product cards in the grid

  • Variant and quantity selectors

  • Add-to-cart buttons

  • Section headings and empty states

Check the reference in the app for the exact class names to use.

✨ Example: rounded product cards

.er-product-card {
  border-radius: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}.er-product-card:hover {
  transform: translateY(-2px);
}

✨ Example: custom font

.er-reorder-page * {
  font-family: "Inter", sans-serif;
}

Make sure the font is loaded somewhere on your theme (most themes load custom fonts globally).

⚠️ Note

Custom CSS only affects the Reorder Page — it doesn't change reminder emails or the Recent Order Widget. For email styling, use the email editor's per-block controls.

💡 Pro Tip

Test changes on a staging or development theme before applying them to your live store. CSS changes take effect instantly once saved, so you won't get a preview screen in the app.

Still have questions? Send us your goal and we'll suggest the right selectors.

Did this answer your question?