Skip to main content
Skip table of contents

Can I change the style sheet of my WebShop template?

Purpose

To explain how to change the style sheet of your WebShop template.

Recommendation

Please note that we do not offer support for any issues caused by adding custom CSS.

We recommend that you only extend your style sheets if you are experienced using CSS. Adding custom CSS can affect your WebShop in unexpected ways.

Introducing terms and concepts used in this article

Term

Definition

Cascading style sheets

(CSS), describes how HTML elements are displayed on screen and can control the layout of multiple webpages at once.

More information

Each WebShop is based on a theme, which defines the layout and look and feel of different elements displayed on each screen. The theme consists of a number of CSS files, which define what each screen looks like. Two CSS file types exist:

  • Core CSS files, which you can never edit

  • Optional CSS file (called main.css), which you can add to your WebShop implementation to extend the core look and feel of your WebShop

When you inject optional CSS into your WebShop, they override the core default CSS. This means that you can return to the default WebShop template by deleting the optional CSS files you have injected.

Step by step

Step 1: Log into Management Interface

Log in

Log into Management Interface using your username and password. This opens the dashboard of your Management Interface.

LogIntoManagementInterface.jpg

Step 2: Open File Manager

Open

Click File Library. This opens the file manager.

Quick recap

The File Manager, which may also be referred to as Global Asset Manager or elFinder, is software that supports standard file management operations through an intuitive graphical user interface. Files are stored in our cloud-hosted environment, meaning that the files are secure and accessible when and where you need them.

As standard, the file manager contains a file tree with two folders:

  • Public files - contain resources that are visible to your customers on your WebShop, such as images, PDFs and style changes that you may have injected into your WebShop.

  • Private files - contains resources such as product images, product specifications, pricing and other documents which are shared regularly and automatically via a FTP connection.

Read Managing files in Management Interfacefor more information.

Step 3: Update your styles

Update
  • Open the CSS folder under Public Files in the File Manager.

  • Open and edit main.css. The main.css file is the file that you edit to update the core look and feel of your WebShop.

  • Click Save. Changes are visible immediately on your WebShop.

Key points

  • It is assumed that you have advanced knowledge of how to inject CSS into a webpage.

  • When you inject optional CSS into your WebShop, they override the core default CSS files. This means that you can return to the default WebShop template by deleting the optional CSS files you have injected.

  • Updates to our platform may potentially conflict with your custom CSS. If conflicts occur, you are responsible for managing your style changes.

Key points

  • We do not offer support for any issues caused by adding custom CSS.

  • Updates to our platform could potentially conflict with your custom CSS. If conflicts occur, you are responsible for managing your style changes.

  • Adding custom CSS changes the look and feel of your WebShop. Changes are visible immediately.

  • To add custom CSS, open File Manager in Management Interface, locate main.css and make changes there.

  • You can always revert to the default WebShop theme by deleting what you have added to the main.css file.

JavaScript errors detected

Please note, these errors can depend on your browser setup.

If this problem persists, please contact our support.