Add custom CSS, head code or scripts
In the theme editor, click the gear icon to open Global Settings → Custom Code: paste CSS under Store CSS (all pages) or Page CSS (this page only), tags for the head under Custom code within head tag, and scripts under Custom Javascript code. For markup inside a page, use the Code Html block.
Steps
- Open Online Store → Theme Settings and select the page in Select Page. Click the gear icon for Global Settings and expand Custom Code.
- Custom CSS: choose the Store CSS tab ("Store CSS applies to all store pages.") or Page CSS ("Page CSS affects only this page."). Paste your CSS code only, without
<style>tags. - Custom code within head tag: paste the code with its complete tags (for example a full
<script>or<meta>tag). This box is per page. - Custom Javascript code: paste the full code without
<script>tags; these scripts run after the page content loads. Also per page. - Click Save. Custom code is saved together with the page, per language.
- To place HTML inside the page layout, open Add Blocks, drag a Code Html block into position and edit its Content.
- On a landing page the same Custom Code panel exists, but CSS applies to that page only (there is no Store CSS tab).
Common problems
- CSS has no effectremove any
<style>tags, then check you pasted it in Store CSS if it should apply everywhere, and Save. - Script runs on one page onlythe head and JavaScript boxes are per page; add the code to every page that needs it.
- Script doesn't run at allremove the
<script>tags in Custom Javascript code; they belong only in the head box. - Code Html block shows less than you pastedsome markup is cleaned before display; keep to standard HTML.
- Code works in one store language but not anothercustom code is saved per language; switch the editor language and save again.