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

Still need help? Contact Us Contact Us