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 four ways
- 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: upload your custom.css somewhere (i.e. "Settings" > "Media") and ask support to add it to your shop pages
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