Admin Theme: Customize Your Admin Panel

Shoporama's admin interface looks the same for everyone by default. But you can customize the appearance yourself if you want to use your own colors, add your own logo at the top, or simply highlight the orders that require a quick response. You can do this under " Admin Appearance."

In practice, it’s a single text field where you enter a few lines, and then the admin interface will look different for everyone on the account.

How to Find “Admin Appearance”

Open the menu on the left, scroll down to the Account section, click on Company, and select Admin Appearance.

The page consists of a single box labeled Custom CSS. It says: “Here you can customize the appearance of your admin page with CSS. The changes apply to all users on your account.” Below that is a large text field, and at the bottom is a Save button.

1. Type or paste your CSS into the text field.
2. Click Save, or use Cmd+S on Mac and Ctrl+S on Windows.
3. The page will reload, and you’ll see the results immediately throughout the admin panel.

If you want to undo everything, clear the field and click Save. This will restore the default appearance. Nothing will break in the process.

What is CSS, and what can it do?

CSS is the language that controls how a page looks: colors, font sizes, spacing, and whether an element is displayed at all. You select the element you want to change and then write what should happen:

.top-app-bar {
  background: #14532d !important;
}

This rule says: “Everything named top-app-bar should have a dark green background,” and top-app-bar is the bar at the very top of the admin panel. !important means “this takes precedence over what Shoporama has specified,” and you’ll usually need to use it. You can change colors, adjust fonts and font sizes, make numbers more visible, rearrange elements, and hide elements you don’t use. However, you cannot add new features or insert JavaScript. The field only changes how the admin panel looks, never what it can do.

Who and what do the changes apply to?

• All users on the account. This is not a personal setting. Your colleagues will see the change the next time they load a page.
• All online stores under the same company. Further down, you can see how to target a single store.
• Only the admin panel, not your store. Your customers won’t see any of this. If you want to change the store’s appearance, do so in the theme under Design.
• Only when logged in. The login page is not affected.
• All users associated with the company can edit this field. There is no separate permission for this, so agree internally on who is authorized to make changes.

Three examples you can copy directly

1. Give the top bar your own color

The easiest and most noticeable change. Replace the color code with your own:

.top-app-bar {
  background: #14532d !important;
}

2. Color-code orders with a specific shipping method

Each order line in the order overview is automatically assigned a series of names that describe the order. One of these is the shipping method’s name in lowercase letters, where everything except the letters a through z is replaced with underscores. "Pickup" becomes pickup, and "Post Nord" becomes post_nord. If pickup orders should be yellow so the packing department can spot them:

tr.pickup {
  background: #fff3cd !important;
}

If you’re unsure of the exact name, you can right-click on the order line and select “Inspect” or “View Source.” There’s a step-by-step guide in Change the background color of orders with specific delivery.

3. Make the order number larger

If you’re holding your phone in one hand and need to find an order number in a long list:

.shoporama-order-id-link {
  font-size: 16px;
  font-weight: 700;
}

Add your own logo at the top

If you’re an agency managing a store for a client, or if you just want to see your own brand, you can replace the Shoporama logo in the top-left corner. The logo must be located at an address accessible via HTTPS, and the address must be written without quotation marks:

.navbar-brand img {
  content: url(https://dit-domaene.dk/logo.svg);
  width: 160px;
}

If you’d rather just hide the logo, you can simply use ` display: none`.

Remember Dark Mode

The admin panel is available in both light and dark modes. Dark mode is a personal setting that each user enables themselves, so you can’t assume your colleagues are using the same mode as you. Your CSS must work in both modes.

The pitfall is light colors. A pastel background that looks nice in light mode turns into a garish mess with unreadable text in dark mode. The solution is to write the rule twice and place ` body.dark-mode ` before the last one:

tr.pickup {
  background: #fff3cd !important;
}

body.dark-mode tr.pickup {
  background: #3a3320 !important;
}

And test it: turn on dark mode in your own account, browse through the page, and turn it off again.

Multiple stores? Give each store its own color

The classic mistake when running multiple online stores from the same account is adjusting a price or shipping an order from the wrong store. A colored top bar for each store eliminates this problem. Each shop has its own number, which appears in the browser’s address bar. If it says /admin/da/7/, you’re in shop number 7, and you can target it by adding body.webshop7 before the rule:

body.webshop1 .top-app-bar {
  background: #14532d !important;
}

body.webshop7 .top-app-bar {
  background: #7c2d12 !important;
}

There’s no cheaper way to avoid making changes to the wrong shop. Read more in “How do I create another online store?”

When is it worth the money?

• Agencies and web developers. Add your own logo and colors so customers see your brand when they log in.
• Multiple stores on one account. Color-code each store so no one edits the wrong one.
• Packing and warehouse. Color-code orders that require special handling, such as in-store pickup. Fewer packing errors mean money saved.
• Training. Hide the parts of the menu that a new colleague won’t need during their first few weeks.
• Accessibility. Increase the font size in one place for everyone if the numbers are hard to read.

Good to know before you get started

• These are cosmetic changes, not restrictions. If you hide a menu item, the feature still exists and can still be accessed. If you need to actually restrict an employee’s access, this is managed at the user level. See How to Create Multiple Users in Your Store.
• The field only accepts CSS. It does not accept JavaScript, tracking codes, or HTML. If you need to add code to the store, use “Insert Code” in the head and body sections of your Shoporama store.
• Some characters cannot be used. Quotation marks, apostrophes, the greater-than sign, and the ampersand do not work in this field. See the technical section below.
• The names are subject to change. We’re constantly developing the admin panel, so a rule may stop working after an update. Nothing else happens—the change simply loses its effect.
• Don’t see the change? Force a refresh using Cmd+Shift+R or Ctrl+F5.
• Save a copy of your CSS in a document so you can always reinsert it.

For those with a technical background

The field’s content is placed in a ` style` element in the header of all admin pages for logged-in users at the company, following the platform’s own stylesheets. So you gain an advantage in terms of priority, but both utility classes and dark mode use !important in several places, so expect to have to use it yourself.

Characters You Can’t Use

The content is HTML-escaped, and since a ` style` element doesn’t decode HTML entities, quotation marks, apostrophes, `>`, `<`, and `&` won’t make it through. In practice, this means:

• Use descendant selectors, such as `.card .card-header`, instead of the child selector.
• Write url(https://...) without quotation marks.
• Avoid using `content ` with text values, as they require quotation marks. Images loaded via ` url()` work fine.
• Use ` max-width ` and ` min-width ` in media queries, not the newer `range` syntax.
• CSS nesting with the ampersand (&) does not work. Write out the selectors in full.

However, @media, calc(), CSS variables, pseudo-classes, and attribute selectors with values without quotation marks do work.

Hooks you can use to attach your CSS

On the `body`, you’ll find, among other things, ` webshop<number> ` (the shop’s number from the URL), `dark-mode`, and `layout-topmenu`. Each order line in the order overview includes, among other things:

• paid or unpaid.
• The order’s status, such as new, process, sent, pending, ready, canceled, ready_for_pickup, or picked_up.
• The shipping method name in lowercase, where everything other than the letters a through z is replaced with an underscore. Numbers, spaces, and the characters æ, ø, and å are also replaced with underscores.
• "ean" for orders with an EAN number, "credit_note " for credit notes, and " has_pickup_address " or "no_pickup_address" depending on whether the order is going to a package pickup location.

The older guide in “Custom CSS” includes a few additional examples of selectors in the menu.

Frequently Asked Questions

I don’t know how to code. Can I still use it?

Yes. Copy the examples above into the field and just edit the color code. If something goes wrong, clear the field and click Save, and everything will be back to normal. If you want something more advanced, your web developer can handle it in a few minutes, or you can email support@shoporama.dk.

Will this affect my customers on the online store itself?

No. The field applies exclusively to the admin panel—that is, what you see when you’re logged in. Your customers won’t notice a thing. If you want to change the store’s appearance, do so in the theme under Design.

Does my CSS also apply to my colleagues?

Yes, and it’s also stated on the page: the changes apply to all users on the account, across all online stores under the same company. So please let your colleagues know before making any significant changes.

How do I undo the changes if the admin interface looks strange?

Go to Account, Company, Admin Appearance, select everything in the field, delete it, and click Save. This will restore the default appearance. If you still see the old layout, perform a hard refresh using Cmd+Shift+R or Ctrl+F5.

Can I use different colors for my different shops?

Yes. Type body.webshop followed by the shop’s number before the rule. The number is in the browser’s address bar right after the language code. This way, each shop has its own color, making it harder to edit the wrong one.

Does this work in dark mode?

Your CSS loads in both modes but isn’t automatically adjusted. A light background color will also appear light for a colleague in dark mode. Therefore, add an extra rule with “body.dark-mode” at the beginning, and test the page in both modes.

Why isn’t my rule working?

The three most common reasons: you’re missing `!important`, so the platform’s own styling takes precedence; the selector is misspelled; or the rule contains quotation marks or a greater-than sign, which cannot be used in the field. Also check that the page has reloaded completely.

Can I insert JavaScript or a tracking script here?

No. The content is inserted as pure CSS, and characters such as the less-than and greater-than signs are re-encoded during the process, so a script tag can never be executed. If you need to add a script to the store itself, there’s a separate place for that, which is described in the article on inserting code into the head and body.

Can I hide menu items so that new employees don’t mess with prices and settings?

You can hide them visually, which is a great way to simplify day-to-day operations. However, this isn’t a lockout: the feature still exists and can still be accessed. If a user is not supposed to have access at all, this is controlled under Account, Company, Users.

Can I replace the Shoporama logo with my own?

Yes. Click on the logo image at the top and replace it with the URL of your own logo. The logo must be accessible via HTTPS, and the URL should be entered without quotation marks. This is particularly useful for agencies that want to showcase their own brand to clients.

If you need help with a specific change, feel free to email support@shoporama.dk. Please describe exactly what you want to look different and include a screenshot.