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
-
Create a content and select the “no added styling” template (if you already have one follow step 3 and 4 only)
-
Provide a name such as “Head Content” or the name of your choice
-
Insert your Javascript or script block as follows:
Important note: These are only examples, do not use them in your site.
-
Click on Save
-
Now, go to your store settings and assign this new content block
- Under the CMS section click on the head content field
- Search for your head content block
- 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:
-
Go to your store’s Store record
(above image) The Store Record
-
Search under the Content Management (CMS) section the Custom Styles field
-
Click on the right hand pencil
-
Insert your custom styles into the field
-
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:
-
Create a content and select the “no added styling template” (If you already have one go to step #3)
-
Provide a name such as “Head Content” or the name of your choice
-
Paste your link tag provided by your third party library
-
Click on Save
-
Now, go to your store settings and assign this new content block
- Under the CMS section click on the head content field
- Search for your head content block
- Click Save
-
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:
-
Create a content block and use the “No added styling” template
-
Provide a name such as “Body Content” or a name of your choice
-
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
-
Click Save
-
Now, go to your store’s Store record and tell it to insert your content into the sites body
- Under the CMS section click on the body content field
- Search for your head content block
- Click Save
Related help documents
-
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. ↩
-
<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. ↩
-
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