Adding Custom Javascript CSS and Head Content

This article is intended for advanced users and our partners as it requires advanced web development or Salesforce admin or programming knowledge. While the functionality is part of StoreConnect, we do not provide end user assistance to implement it beyond our help documentation. If you need help or are unsure on how to do this, you can hire one of our StoreConnect partners.

Quite often you will need to add some custom CSS[^css], Javascript or add a<head>[^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.

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 <head>...</head> 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 <script> tag as all content in Script Blocks will automatically be wrapped with this HTML tag.

Related help documents

CSS and Custom Styles

This section is now available at:

How to Add Custom CSS

Body Content Block

The Body Content field is a link to a CMS Content Block that contains anything you wish to insert at the end of the <body>...</body> of your store.

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.

Instructions:

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

  2. Provide a name such as “Body Content” 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 body 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 body

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

Related help documents

 

 

 
 
Back to Documentation