Custom CSS

Note: Custom css is considered advanced editing and can easily break your shop — in ways you never imagined — if used wrong. This help article is therefor intentionally vague.

We suggest beginners stick with the inline / span option.

You can use custom css in five ways

<style>

.h1 {

color: red;

}

</style>

in html editing
element: inline span style tag in html editing
local (one page): style-tag in html-editing, via "Static Text" (almost everywhere) or "Custom Code" fields (landing page only)
global: style-tag in custom footer ("Admin" > "Settings" > "Template" -> "Menu & Footer")
global: add your stylesheet link in the custom footer

<link rel="stylesheet" href="url-to-your-stylesheet.css">

Example of inline span style tag:

<p><span style="font-size:3rem;color:red;background-color:goldenrod;">This is a text</span></p>

Where to find the html editor

Whenever you see this toolbar the <> on the right opens the html-editor

Tips

Copy/save your code often (in a different app). There is no undo-button or history, and lost edits/code can not be recovered
"Inspect", "Inspect element" etc. is your friend
If you decide to use "Custom footer", be aware all code is deleted if you deactivate the box