Adding custom JavaScript and CSS

If you want to add small snippets of CSS and JavaScript to your store, you can do so in:
Settings > Store > Advanced
Here you can add third party libraries or plugins such as SumoMe. The code is added to all pages excluding the checkout for security reasons.

CSS

CSS is not processed in any way and is used as-is.

JavaScript

To load a JavaScript library you’ll need to inject the script like this:

(function() { 
    // Create a <script> element
    var script = document.createElement('script');

    // Make the script load asynchronously to prevent blocking (optional, but recommended)
    script.async = true;

    // Set the path to the script
    script.src = 'https://example.com/script.js';

    // Add any extra attributes you need (optional)
    script.setAttribute('some-attribute', 'example-value');

    // Inject to the body
    document.querySelector('body').appendChild(script);
})();

Specifically for SumoMe:

(function() { 
    var script = document.createElement('script');
    script.async = true;
    script.src = 'https://load.sumome.com/';
    script.setAttribute('data-sumo-site-id', '## your-unique-id ##');
    document.querySelector('body').appendChild(script);
})();

Compression

Both CSS and JavaScript are minified when they are rendered to help with performance so don’t worry about using compressed versions of code.

Please note

You are responsible for maintaining and testing code you add in these fields. HTML selectors such as classnames and DOM ordering may also change so try to avoid anything too complex in this area.

Was this helpful?

3 0