Custom CSS

Custom CSS

Custom CSS allows you to customize the design of the store down to the smallest detail. Through the tool, you can make special adjustments that are otherwise not possible in the design builder.

Using Custom CSS

To use custom CSS, you must first open "Brand" in the top menu. From here, go to "Custom CSS". Make sure advanced mode is active.

The first time you click on the menu item "Custom CSS", the text editor will automatically open and you can enter the desired code.

When you are finished, click "Update". The preview will then be updated, but you must click "Save and update" in the sidebar menu for the changes to take effect in the online store.

Custom Classes

Think of a "class" as a label or tag you attach to an element on your website. This label gives you an opportunity to tell the browser: "Hey, all elements with this label should look like this."

Example:

Let's say you have a button on your website. Without a class, it may look quite standard. You want this button to be red, have a larger font and rounded corners.

Adding a class:

You add a "label" to the button, for example "special-button". Now the button knows that it belongs to the "special-button" group.

Writing CSS: In custom CSS (theme settings), you tell the browser how elements with the "special-button" label should look. You write Css code that says: "All elements with the class 'special-button' should have a red background, large font and rounded corners."

More about custom CSS classes

Design flexibility:

By allowing custom CSS classes, users can customize the look of their website exactly as they want.

This makes it possible to create unique designs that stand out from the crowd.

Detailed control:

Css gives detailed control over the appearance of elements, including colors, fonts, spacing and layout.

Custom Css classes make it possible to target specific elements and apply styles only to them.

Maintenance and organization:

By using custom classes, design changes can be made in one place (in the Css file) instead of changing each individual page or element.

This simplifies maintenance and makes it easier to keep the design consistent.

CSS Variables

A CSS variable, also called a CSS property, is a value that is defined by a developer and can be reused in a CSS document.

In the design builder, all colors that are set up in theme settings would be defined as variables.

Example In theme settings, you choose to set the text color to color code #181818 Text color has variable —text-color and can then be reused in several places, and everything that uses the variable will get the color that is set in theme settings. If you later change the color code in theme settings, everything that uses this variable will also be updated.

Example of using variables

In the example below, a variable is used to set the background color of the product box.

The variable that is used is the primary color that is set in theme settings. The product box will therefore have the primary color as the background. If this is changed at a later time, the background color of the product box will also change.

.product-thumb-info {
  background-color: var(--primary-color);
}

Create Your Own Variables

You don't just have to use the predefined variables from the theme settings. It is also possible to create your own variables and then reuse these in the design builder.

Create Variable

Own variables must be created, and possibly changed, in custom CSS.

Open theme settings

Open custom CSS

Css variables are defined with two hyphens (--) followed by a variable name. For example, you can define a variable for a color like this:

:root {
  --my-new-variable: #007bff;
}

Make sure the variable is placed in :root { * } to make it available for all Css.

You can then use this variable in your Css code using the var() function:

button {
  background-color: var(--my-new-variable);
}

Use Own Variable in Design Builder

You don't just have to use your own variables in custom CSS, you can also use them directly in the design builder.

Find the block/section where you want to use a custom variable

Navigate to setting for background color/text color

Paste the variable name into the field where you would normally have a HEX code

For the example above, you would enter var(--my-new-variable) in the field

The color setting will now use the color defined in the variable that was set up in custom CSS.

Finished CSS Rules

To make it a little easier for you, we have collected some popular Css rules that are often asked for here.

Remove Stock Status - Product Box V7

Product Box V7 comes with a field for stock status. If you want to remove this, the following Css rule can be used:

.product-thumb-info .__pb-info-7 .pb_stock_info {
  display: none;
}

Change Color of Button - Product Box V7

Product Box V7 has a fixed color on the purchase button. This can be changed with the following Css rule:

Colors support normal Css standards such as RGBA, HEX, HSL etc.

.product-thumb-info .__pb-info-7 .__pb-button .button-default{
  background-color: red; /* Background color */
  color: white; /* Text color */
  fill: white; /* Icon color */
}