# Adding custom JavaScript, CSS and head content
Source: https://support.storeconnect.com/articles/adding-custom-javascript-css-and-head-content · Last modified 21 August 2026
Quite often you will need to add custom CSS, JavaScript, or a head content tag such as
Google Tag Manager to your online store. StoreConnect provides several ways to insert
content into your site on a per store basis, most of them configured on the Store record
or on their own records in the
[Content Management (CMS)](content-management) area.
## On this page
1. [Which method to use](#which-method-to-use)
2. [Head content block](#head-content-block)
3. [JavaScript and script blocks](#javascript-and-script-blocks)
4. [External Javascripts field](#external-javascripts-field)
5. [CSS and custom styles](#css-and-custom-styles)
6. [Body content block](#body-content-block)
7. [Debugging custom JavaScript](#debugging-custom-javascript)
## Before you start
- You need edit access to the **Store** record for the store you are changing.
- To use script blocks, you need access to the **Script Blocks** tab. If you cannot see
it in the App Launcher, ask your Salesforce administrator to grant tab and object
access.
- Custom code is applied per store. If you run more than one store, repeat the steps for
each one.
## Which method to use
| Method | Use it for | Liquid | Where it renders |
| --- | --- | --- | --- |
| [Head content block](#head-content-block) | Head tags, font links, meta tags, and JavaScript that has to contain Liquid | Yes | End of `` |
| [Script blocks](#javascript-and-script-blocks) | JavaScript libraries and snippets you want to keep as separate, individually ordered records | No | ``, before the head content block |
| [External Javascripts field](#external-javascripts-field) | One block of global JavaScript held directly on the Store record | No | ``, before script blocks |
| [Body content block](#body-content-block) | Live chat widgets and other scripts that must load after the page content | Yes | Just before the closing `` tag |
For CSS, see [How to add custom CSS](adding-custom-css).
## Head content block
Use the head content block for global custom Liquid code, font links, and JavaScript
that contains Liquid code. For JavaScript libraries and snippets there are better
options, covered in the next section.
1. Go to the **Content Blocks** list and select **New** (`s_c__Content_Block__c`).
2. Set the **Template** to **No added styling**.
3. Provide a name such as "Head Content Block", or a name of your choice.
4. Use the **Content** field to paste the code, script, or tag you need in the head
section of your site.
5. Select **Save**.
6. Open your store's **Store** record and point it at the block:
1. Under the **Global Content** section, select the **HTML Head Content Block**
field (`s_c__Head_Content_Block_Id__c`).
2. Search for your head content block.
3. Select **Save**.
Your content now renders in the head of every page on that store.
:::warning
**HTML Head Content Block** is in the **Global Content** section of the Store record, not
the **Content Management System (CMS)** section. Do not confuse it with **Page Header
Content Block**, which sets the visible header of your store.
:::
For example, to add Google Tag Manager, paste its container snippet into **Content**:
```html
```
## JavaScript and script blocks
Script Blocks hold JavaScript that is included on your web store, and keep your scripts
organized and maintainable as a set of records rather than one long block of code. Each
one is an `s_c__Script_Block__c` record, so you can also create them through the API or
Data Loader. See the [Script Block object reference](script-block-object-reference) for
every field.
1. Go to the **Script Blocks** list and select **New**.
2. Give it a useful name.
3. Set the configuration:
- **Store** — the store this script block belongs to.
- **Active** — only active script blocks are included on the website.
- **Channels** — the surfaces the script runs on. Select **Web** for your online
store, **POS** for the point of sale app, or both. This field is required, and a
script block without **Web** never loads on your online store even when it is
active and global.
- **Global** — include the script automatically on every page. Leave it unchecked
and the script block is not included on your store at all.
- **Position** — the order script blocks load in. Lower numbers load first, and
this only applies when **Global** is checked.
4. Provide the script itself, using one of:
- **Script URL** — the URL of an external JavaScript file, for example
`https://example.com/script.js`. If you set this, any value in **Content** is
ignored.
- **Content** — the JavaScript itself, written **without** `