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

Alternative ways to implement CSS

Implementing your CSS using this method could carry some limitations; it is possible that if you reach a large number of CSS rules, the CSS field won’t allow you to save it. Also, it can be less maintainable as it grows in lines of CSS rules. There are two other ways to upload your CSS if you use a large amount of styling rules.

The first option is to implement your CSS rules following the same instructions mentioned under the Javascript & Script Blocks instructions, the only difference will be wrapping your CSS rules with the <style></style> HTML tag.

If you already have scripts in the head content and want to keep it clean and neat, you can reference a content block containing your CSS styles as follows:

  {{ all_content_blocks['your-content-block-identifier].render }}

You always need to wrap your CSS rules with the <style></style> HTML tag if you are using a content block to render CSS.

The second and most recommended option is to implement your CSS within Styles Blocks. Consider that this option is only available from StoreConnect version 10.0 and up.

Instructions

  1. Click on the app launcher

    Style blocks

  2. Search for Style Blocks and Click on them.

  3. On the right hand, click on new

  4. Fill up the name and assign it to a store (these are required fields)

  5. Define the configuration of your CSS file
    • Media: you can choose the media attribute type of the link referral
    • Active: it helps you activate or deactivate the style block
    • Global: check if you want a global style for your site.
    • Position: if you have multiple style blocks, you can set the order
  6. Define the style content. You can only choose from these options:
    • Stylesheet URL: you can use an external link to bring your CSS file
    • Content: define your CSS rules inside this block.

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 or the style block object.

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 (if you are using one)

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