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.

Adding Custom Javascript, Scripts, CSS & Body Content

Quite often you will need to add some custom CSS1, Javascript or add a<head>2 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

The Head Content field is a link to a CMS Content Block3 that contains anything you wish to insert into the <head>...</head> tag of your store.

Instructions

  1. Create a content and select the “no added styling” template (if you already have one follow step 3 and 4 only)

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

  3. Insert your Javascript or script block as follows:

    Inserting Javascript and scripts to the head content block

    Important note: These are only examples, do not use them in your site.

  4. Click on Save

  5. Now, go to your store settings and assign this new content block

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

You can also add things like Facebook pixel code, or domain name validation meta tags, etc.

Related help documents

CSS and Custom Styles

Custom styles are any small stylesheet tweaks you want to put on your store. Anything you put here will be inserted immediately before the closing </head> tag on your store after any Head Content Block. The content in this will also be inserted within <style></style> tags. Make sure to make you enter valid CSS. See Custom Theme CSS for more information.

Follow these steps:

  1. Go to your store’s Store record

    The Store Record

    (above image) The Store Record

  2. Search under the Content Management (CMS) section the Custom Styles field

  3. Click on the right hand pencil

  4. Insert your custom styles into the field

  5. Click on Save and your changes will appear shortly after

Third Party CSS Libraries

StoreConnect does not support any third party CSS libraries, such as bootstrap. If you choose to include third party libraries you do so at your own risk and with the knowledge that their inclusion may conflict with existing StoreConnect CSS code. These conflicts may change the design, look and feel of StoreConnect webpages including but not limited to the Cart and Account pages.

Take into consideration that StoreConnect use its own CSS library that could potentially be in conflict with a third party library. However, if you are sure of what you are doing you can reference your CSS library using the head content block.

Instructions:

  1. Create a content and select the “no added styling template” (If you already have one go to step #3)

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

  3. Paste your link tag provided by your third party library

    Head content block

  4. Click on Save

  5. Now, go to your store settings and assign this new content block

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

  6. As a final step, check your site to make sure there’s no design conflicts with your new library

Related help documents

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

 

 

  1. CSS: Cascading Style Sheets (CSS) is a programming language that defines the design styles; colours, font-sizes, font-types, border-colours, etc on a website. ↩

  2. <head> tag: Used to contain metadata such as the title of the page, its description, and any relevant keywords. Scripts (code), links to scripts and CSS files (for page styling) may also be contained in the <head> tag. ↩

  3. Content Block: Content Blocks are used to place content on your Pages and Articles. There are two types of Content Blocks 1) A Container Content Block, and 2) A Template Content Block. ↩

 
 
Back to Documentation