Webshop design

Modified on Wed, 13 Sep 2023 at 11:19 AM

The aim of this article is to give a brief introduction to how you can change the design of your webshop by yourself.

Access

For customers who wish to change their own design, FTP access to the customer's own template folder will be provided. Contact our customer service to get such access.

This folder contains a file called headeradd.tpl and a CSS folder that contains a customer-specific CSS file.

For example, if you have a shop called MCButikken, the structure will be like this:

/headeradd.tpl

/css/MCShop.css

The files

The contents of headeradd.tpl are loaded into the <head> tag of the webshop. Here it is possible to enter references to your own JavaScript and CSS files.

headeradd.tpl already includes the client-specific CSS file.

In the CSS file, you can enter your own CSS rules to get your own expression on the webshop.

It is not possible to change the markup (HTML), only CSS.

Change in design

There are already some variables ready in the CSS file to control the colors of predefined elements.

The most important one here is main-override-color. This sets the main color for the webshop.

--main-override-color: #d11; will, for example, give a red theme color to the entire webshop since #d11 is a red color.

This will affect the colors of the header, footer, buttons and various other elements.

There are several variables to be able to control this at a slightly lower level. The available variables are documented in the CSS file. Read the comments above the various variables in the file to understand what they do.

In addition to controlling basic colors with the predefined variables, it is also possible to add your own CSS rules.

We have tried to make our CSS rules as general as possible, so that it should be easy to override.

Here, a designer must look at the existing rules in the webshop and override what is needed.

The structure of the webshop

All pages in the webshop consist of header, pageContent and footer.

Header and footer are the same on all pages, while pageContent changes.

Most pages have an h1 or h2 heading.

All buttons are an a tag, with the class "button".

All inputs are a label with class "qField". This includes text input, select boxes, checkboxes, etc.

These are general things that are used throughout the solution.

If, for example, you want rounded corners on the buttons instead of square, you can enter the following rule:

a.button {
  border-radius: 5em;
}

This will then affect all buttons in the solution.

There are similar options for most other elements that are reused in the webshop, such as qFields.

Otherwise, each page (e.g. shopping cart or checkout) has rules that govern the display there. These are often more specific and aim directly at this page, as opposed to being a general class that is reused throughout the solution.

This also applies to things like header, footer and menu.

Note! Quick3 and the Quick3 webshop are under continuous development. This means that both markup and css can be changed. It is therefore recommended that as general rules as possible are written when making changes to reduce potential problems with backwards compatibility.

If you want to make major changes, it is recommended that you get in touch to discuss ways to solve it that safeguard the integrity of the solution. As a rule, we consider good suggestions for improvement to be built into future versions of the standard solution.