Own stylesheet (Custom CSS)

With the "Custom Stylesheet" feature, you can add your own CSS to both your online store and your admin panel. This is ideal for design adjustments such as changing colors, fonts, margins, or hiding elements, without having to modify the theme files. The two areas are managed separately: the online store’s CSS is located under Design → Stylesheet, and the admin panel’s under Account → Company → Admin Appearance.

How to add CSS

1. Go to Design in the menu
2. Click on Stylesheet
3. Enter your CSS code in the text field
4. Click Save

Your CSS will be loaded after the theme’s own stylesheets, so your rules will override the default styles. It applies to the entire online store, not just the homepage. If you want to style the admin panel itself, that’s done in a different place, as described under “Admin Customizations” further down.

Stylesheet Variants: Multiple CSS Versions for the Same Theme

The field containing your CSS is your main stylesheet. Just below it is the “Stylesheet Variants” section, where you can save alternative versions of the same CSS. A variant is a complete CSS version with its own name, visibility, and schedule. You can have as many variants as you want, but only one is displayed at a time.

As long as no variant is active, the store uses the main stylesheet. If a variant becomes active, it takes over, and when it’s deactivated again, the main stylesheet returns exactly as it was before.

How to create a variant

There are two ways to do this, and they each serve a different purpose:

• Create a variant of this (the button next to Save): saves your main stylesheet and copies the contents of the field into a new variant, which opens immediately. Use this when you want to build on the design you already have.
• "New Variant " (the button in the "Stylesheet Variants" section): starts from scratch. You give the variant a name and can insert CSS right away, or leave the field blank and fill it in later.

Whichever option you choose, the variant is created offline. It won’t affect the store until you enable it yourself or set a date range for it.

The fields on a variant

Click Save if you want to stay on the page, or Save and Close if you want to return to the overview. Delete variant removes the variant completely.

When is a variant better than just editing the CSS?

• Campaigns that turn themselves off. Put your Black Friday styling in a variant with a start and end date. That way, it turns on and off by itself, and no one has to remember to clean up on Monday morning.
• Seasons and holidays. Save your Christmas, Easter, and sale styling as separate variants, and reuse them year after year instead of building them from scratch.
• Risk-free experimentation. Try a major redesign in a variant. If it doesn’t work out as hoped, just turn the variant off again.
• Quick reversal. One click takes the variant offline, and the store reverts to the main stylesheet, which remains completely untouched. You don’t have to figure out what you changed first.
• A/B testing. Compare two designs on real visitors instead of guessing which one sells best.

The statuses in the variant list

The status column shows at a glance what’s happening with each variant:

Actions on the far right

A clone has "(copy)" added to its name, is always created offline, and is assigned a priority one level below the original. This means the original continues to win until you decide otherwise, and the clone is a safe place to try something new. It also makes it the obvious starting point for a split test.

Deletion cannot be undone. The variant is also removed from any split tests in which it was included.

How the system chooses which variant to display

For each page view, the store automatically determines which stylesheet to use. The order is always the same:

1. First, all variants that are currently active are gathered—that is, those that are either live or within their date range.
2. If there is a split test covering at least two of them, visitors are distributed among the variants.
3. Otherwise, the variant with the highest priority wins.
4. If several have the same priority, the newest one wins.
5. If no variants are active, the main stylesheet is used.

The “Online” field and the dates are linked

It is the combination of the “Online” field and the two date fields that determines when a variant is live:

Priority

Priority is only used when multiple variants are active at the same time. The highest number takes precedence. The default is 0, and you may use negative numbers. If two variants are active with the same priority, the newest one—that is, the one you created last—takes precedence.

Variants apply only to the online store

• Variants only change what your customers see. The admin panel is not affected.
• The field at the top of the Stylesheet page always displays the main stylesheet, even while a variant is live. This prevents you from accidentally editing a variant when you open the page.
• If you need to style the admin panel itself, you’ll find it under Account → Company → Admin Appearance. That CSS file exists in only one version, has no variants, and applies to all users on the account.

Why don’t changes always take effect immediately?

Your store stores cached pages so they load quickly. If you enable or disable a variant, it may take up to four hours before all visitors see the new CSS on the cached pages. If a split test is running, the cache is automatically disabled during that time, so each visitor always sees the variant they’ve been assigned to.

A/B test two stylesheet variants against each other

If you have two variants, you don’t have to guess which one works best. You can let your visitors decide:

1. Create at least two variants and publish them both.
2. As soon as two variants are active at the same time, the shortcut “Create a split test of your stylesheet variants” appears below the variant list. You can also go directly to Design → Split Test.
3. Give the test a name and create it.
4. Add the variants you want to include, distribute traffic between them, and start the test.

A stylesheet test applies to the entire store, not just a single page. This makes it the right choice when you want to test something that appears consistently throughout the site, such as button colors, font sizes, or spacing around the “Buy” button.

If you check the box for “Use the winner as the new default when the test ends,” Shoporama will handle the rest: the winner will go live and receive a higher priority than the others, and the losing variants will be disabled. You can always change this manually afterward from the variant list.

The entire process, the statistics, and how the winner is determined are described in “How to Create and Run a Split Test in Shoporama.” If you’d like to understand the concept first, you can read more about split testing as a feature.

Online Store Customizations

Here are examples of typical online store customizations:

Change the header’s background color:

header {
    background-color: #1a1a2e;
}

Change the font:

body {
    font-family: 'Georgia', serif;
}

Hide an element:

.element-class {
    display: none;
}

Admin Customizations

You can also customize the appearance of the admin panel with your own CSS. However, this is entered in a different location than the store’s stylesheet—specifically under Account → Company → Admin Appearance—and it applies to all users on the account. Below you’ll find a complete overview of the CSS classes and IDs you can use.

Order List — CSS Classes on Order Rows

Each order row in the order list has a number of dynamic CSS classes that you can use to style orders based on their status, payment, and shipping method.

Payment Status

Example — Red background for unpaid orders:

.unpaid {
    background-color: #ffe0e0 !important;
}

Order Status

The order row’s status is added directly as a class:

Example — Green background for sent and paid orders:

.paid.sent {
    background-color: #ddffeb !important;
}

Example — Dulled display of canceled orders:

.cancelled {
    background-color: #eee !important;
    opacity: 0.7;
}

Shipping Method

The delivery method name is automatically converted to a CSS class. All letters are converted to lowercase, and special characters are replaced with underscores. For example, "Home Address with GLS" becomes the class .home_address_with_gls.

Example — Color-code orders by delivery method:

/* GLS orders with an orange background */
.home-address_with_gls {
    background-color: #fff3e0 !important;
}

/* PostNord orders with a blue background */
.postdanmark_til_privatadresse {
    background-color: #e3f2fd !important;
}

Payment Gateway

Each order row is assigned a class based on the payment gateway’s ID in the format .payment-{ID}. You can find the ID by going to Integrations → Payment Gateways and viewing the URL when you click “Edit.”

Example — Green background for orders paid with a specific gateway:

/* Replace 12 with your gateway’s ID */
.payment-12 {
    background-color: #c8e6c9 !important;
}

Other order row classes

Example — Highlight EAN orders:

.ean {
    background-color: #c2caff !important;
}

Order Details — Classes in the Expanded View

When you expand an order in the list, the order details are displayed with these classes:

Order contents

Stock Status

Example — Red text on out-of-stock items:

.itemsnotinstock {
    color: #ff0000 !important;
    font-weight: bold;
}

Buttons in the order list

The buttons in the order list have fixed IDs that you can style:

Primary buttons

Shipping buttons

Example — Highlight the print button:

#btn-print {
    background-color: green !important;
    color: white !important;
}

Example — Hide shipping buttons you don't use:

#btn-swipbox,
#btn-gls {
    display: none !important;
}

Webshop-Specific Styling

If you manage multiple online stores for the same company, you can style the admin panel differently for each online store. The `body` element has the class `webshop{ID}`, where `ID` is the online store’s ID number.

Example — Different header colors for each online store:

/* Online store with ID 123: red header */
body.webshop123 nav.top-app-bar {
    background-color: #ad3c3c !important;
}

/* Online store with ID 456: blue header */
body.webshop456 nav.top-app-bar {
    background-color: #2a50a6 !important;
}

Layout and Navigation

Example — Change the color of the left-hand menu:

.drawer-light .drawer-menu .nav-link {
    color: #333 !important;
}

.drawer-light .drawer-menu .nav-link:hover {
    background-color: #f0f0f0 !important;
}

Other useful elements

Popular use cases

Color-coding the order list

A popular setup is to color-code the order list so you can quickly distinguish between paid and unpaid orders and different statuses:

/* Unpaid orders in light red */
.unpaid {
    background-color: #fff0f0 !important;
}

/* Paid and shipped orders in light green */
.paid.sent {
    background-color: #f0fff0 !important;
}

/* Canceled orders dimmed */
.cancelled {
    background-color: #f5f5f5 !important;
    opacity: 0.6;
}

/* EAN orders in light blue */
.ean {
    background-color: #f0f4ff !important;
}

Highlight important action buttons

/* Green print button */
#btn-print {
    background-color: #28a745 !important;
    color: white !important;
}

/* Orange GLS button */
#btn-gls-api {
    background-color: #ff9800 !important;
    color: white !important;
}

Give the order list more space

/* Less space on the sides = more space for the columns */
.container-fluid {
    padding-left: 8px !important;
    padding-right: 8px !important;
}

Clearly mark out-of-stock items

.itemsnotinstock {
    color: #ff0000 !important;
    font-weight: bold;
    font-size: 1.1em;
}

How to Find the Right CSS Selector

To find the exact class or ID of an element:

1. Right-click on the element in your browser
2. Select "Inspect Element "
3. Find the element’s class (e.g., class="unpaid sent") or ID
4. Use the class or ID as a CSS selector in your stylesheet

Major design changes

Your Own Stylesheet is well-suited for minor customizations. For major design changes, we recommend editing the theme files directly via SFTP. See the article " Log In with SFTP " to get started.

CSS Cheat Sheet

Here’s a quick overview of the most commonly used CSS properties so you can get started without having to look them up.

Colors

Colors can be specified as names, hex codes, or RGB:

/* Hex code (most commonly used) */
color: #ff0000;              /* Red text */
background-color: #f0f0f0;  /* Light gray background */

/* Color names */
color: red;
background-color: white;

/* RGB with transparency */
background-color: rgba(0, 0, 0, 0.1);  /* Black, 10% visible */

Useful color codes:

Font family

/* Change font */
font-family: 'Georgia', serif;
font-family: 'Arial', sans-serif;
font-family: 'Courier New', monospace;

/* Google Fonts (add the import at the top of your stylesheet) */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
font-family: 'Open Sans', sans-serif;

Text

font-size: 14px;            /* Text size */
font-weight: bold;          /* Bold text (or 400, 600, 700) */
font-style: italic;         /* Italic */
text-align: center;         /* Centered (left, right, center) */
text-decoration: underline; /* Underline */
text-transform: uppercase;  /* Uppercase (lowercase, capitalize) */
line-height: 1.5;           /* Line spacing */
letter-spacing: 1px;        /* Letter spacing */

Background

background-color: #f0f0f0;
background-image: url('https://example.com/bg.png');
background-size: cover;     /* Fill the entire area */
background-repeat: no-repeat;

Borders

border: 1px solid #ccc;           /* Border around the entire element */
border-bottom: 2px solid #333;    /* Bottom border only */
border-left: 4px solid #28a745;   /* Green left border */
border-radius: 8px;               /* Rounded corners */
border: none;                     /* Remove border */

Spacing (margin and padding)

/* Padding = inner spacing */
padding: 10px;              /* All sides */
padding: 10px 20px;         /* Top/bottom, left/right */
padding-left: 15px;         /* Left only */

/* Margin = outer spacing */
margin: 10px;               /* All sides */
margin-bottom: 20px;        /* Bottom only */
margin: 0 auto;             /* Center an element */

Show/hide

display: none;       /* Hide completely (does not take up space) */
visibility: hidden;  /* Invisible (still takes up space) */
opacity: 0.5;        /* Half-transparent (0 = invisible, 1 = fully visible) */

Size

width: 100%;         /* Full width */
max-width: 800px;    /* Maximum width */
height: 50px;        /* Fixed height */
min-height: 200px;   /* Minimum height */

Shadows

box-shadow: 0 2px 4px rgba(0,0,0,0.1);    /* Soft shadow */
box-shadow: 0 4px 12px rgba(0,0,0,0.15);  /* Stronger shadow */
box-shadow: none;                          /* Remove shadow */

Frequently Asked Questions

I’ve created a variant, but the store looks exactly the same as before. What did I forget?

A new variant is always created offline so it can’t go live by accident. Go to the Stylesheet page, find the variant in the list, and click the toggle icon on the right side of the row. If it says “Active now” in the Status column, it’s live. If you still see the old design on the store, wait a moment and try again, as finished pages are cached for up to four hours.

Is the variant’s CSS applied on top of my regular stylesheet?

No. As long as the variant is active, only the variant’s CSS is used. The main stylesheet is paused, not deleted. That’s why there’s a “Create a variant of this” button: it copies your entire current stylesheet into the new variant. If you start with “New Variant” instead and write only a single rule, all your other rules will be hidden as long as the variant is active.

Can I make my Christmas styling turn itself off?

Yes, and that’s one of the best reasons to use variants. Put your Christmas CSS in a variant, set “Show from” to the day it should go live, and “Show through” to the last day. Both days are included, and the period ends at midnight. So the campaign turns on and off by itself, even if the “Online” field isn’t enabled.

I’ve been messing around with a variant, and now the store looks wrong. What should I do?

Click the on/off icon next to the variant in the list to take it offline. The store will revert to the main stylesheet, which hasn’t been changed, so you don’t need to figure out what went wrong in the CSS first. If the variant has dates set, they must be cleared at the same time; otherwise, it will go live again within its time period.

Can I create variants of the color coding in the order list?

No. Variants only apply to what customers see in the online store. The CSS for the admin panel itself—that is, the color coding of orders, buttons, and menus—is located under Account → Company → Admin Appearance, and it’s available in only one version. However, it applies to all users on the account, so the entire team sees the same colors on the same orders.

I have multiple online stores. Does one variant apply to all of them?

No. Both the main stylesheet and the variants are specific to each individual online store, so they must be created separately for each store. If you want multiple stores to have the same campaign styling, you’ll need to copy the CSS over manually. However, you can color-code your stores differently in the admin panel, as described in the section on store-specific styling above.

What happens if I leave the CSS field blank in an active variant?

In that case, the store will run entirely without your own CSS, and only the theme’s default design will remain. This may sound like a bug, but it can be used intentionally: if you suspect that one of your own rules is causing a problem, you can launch an empty variant for a moment and see if the issue goes away. It’s also a way to A/B test “with my CSS” versus “without my CSS.”

How many variants can be active at the same time?

As many as you want, but only one is displayed at a time. If multiple variants are active, the one with the highest priority wins, and if they have the same priority, the newest one wins. The exception is a running split test, where visitors are intentionally distributed among two or more variants.

Need help? Contact us at support@shoporama.dk.