Adding custom JavaScript, CSS and head content

This article requires advanced skills to implement.
CSSJavascript

Quite often you will need to add some custom CSS[^css], Javascript or add a[^head_tag] content tag such as the Google Tag Manager into your online store. StoreConnect provides 3 different ways to insert data into your site on a per store basis in the Content Management (CMS) section of the Store record.

Head content block

  1. Create a content block and use the “No added styling” template

  2. Provide a name such as “Head Content Block” or a name of your choice

  3. Use the content field of this new content block to insert or paste any block of code, script, tag, etc. you need to insert into the head section of your site

  4. Click Save

  5. Now, go to your store’s Store record and tell it to insert your content into the sites head

    1. Under the CMS section click on the head content field
    2. Search for your head content block
    3. Click Save

We recommend using this head content block when you need to insert global and custom liquid code, font links, and Javascript with liquid code. There are more efficient ways to insert Javascript libraries and snippets in the section below.

JavaScript & script blocks

Uploading your JS and any script block can be done using the Script Block object. This will allow you to have scripts well organised and maintainable. Any script block will be inserted into the ... tag of your store.

Instructions

  1. Click on the app launcher Style blocks

  2. Search for Script Blocks and open that tab

  3. On the right hand, click on New

  4. Give it a useful name and assign it to your store

  5. Define the configuration for your Script Block

    • Store: Select the store you want to assign it to
    • Active: Activate or deactivate this script block
    • Global: Does this script apply to the entire site and so should load automatically when rendering each page?
    • Position: If you have multiple style blocks, you can set the order they load

  6. Define the style content: You must use one of these options:

    • Script URL: Use an external link to bring in your Javascript
    • Content: Define your Javascript here

You can also add things like Facebook pixel code, or domain name validation meta tags, etc. as long as they are not wrapped with </code> tag as all content in Script Blocks will automatically be wrapped with this HTML tag.</p> <p><strong>Important:</strong> You won’t be able to use liquid code within Script Blocks. Instead use the Head Content Block per the instructions above.</p> <p><strong>Related help documents</strong></p> <ul><li><a href="https://support.getstoreconnect.com/s/article/add-a-favicon-to-your-website">Add a Favicon to Your Website</a></li><li><a href="https://support.getstoreconnect.com/s/article/storeconnect-config-app/add-your-google-analytics-code">Add Your Google Analytics Code</a></li><li><a href="https://support.getstoreconnect.com/s/article/storeconnect-config-app/add-your-facebook-pixel-code">Add Your Facebook Pixel Code</a></li></ul> <h2>CSS and Custom Styles</h2> <p>This section is now available at:</p> <blockquote> <p><a href="https://support.getstoreconnect.com/s/article/adding-custom-css">How to Add Custom CSS</a></p> </blockquote> <h2>Body Content Block</h2> <p>The Body Content field is a link to a CMS Content Block that contains anything you wish to insert at the end of the <code><body>...</body></code> of your store.</p> <p>Common uses for the Body Content block are Live Chat scripts, or other custom javascript that needs to be loaded after the store page has been loaded.</p> <p><strong>Instructions:</strong></p> <ol><li> <p>Create a content block and use the “No added styling” template</p> </li><li> <p>Provide a name such as “Body Content” or a name of your choice</p> </li><li> <p>Use the content field of this new content block to insert or paste any block of code, script, tag, etc. you need to insert into the body section of your site</p> </li><li> <p>Click <strong>Save</strong></p> </li><li> <p>Now, go to your store’s Store record and tell it to insert your content into the sites body</p> <ol><li>Under the CMS section click on the body content field</li><li>Search for your body content block</li><li>Click <strong>Save</strong></li></ol> </li></ol> <p><strong>Related help documents</strong></p> <ul><li><a href="https://support.getstoreconnect.com/s/article/storeconnect-config-app/add-your-live-chat-code">Add Your Live Chat Code</a></li></ul> <h3>Debugging Solutions</h3> <p>Implementing custom scripts can have drawbacks, especially when injecting custom JS. One of the most common issues is when your JS doesn’t trigger despite having correct syntax and no errors.</p> <p>The most straightforward solution is to always wrap your code within a DOMContentLoaded or onload event listener. Here’s an example of how to do it using DOMContentLoaded:</p> <pre><code><script type="text/javascript"> // Example 1 document.addEventListener('DOMContentLoaded', () => { console.log('Hello!'); }); // Example 2 document.addEventListener('DOMContentLoaded', init); const init = () => { // logic here }

Feel free to structure your code in a way that meets your specific needs, while also taking into consideration the approaches mentioned above.

Last updated July 20, 2024

Related Articles

DocumentationAdding custom CSSDocumentationAdding branding to a storeDocumentationAdd a favicon to your website