Additional instructions

1. HOW TO ADD YOUR PLUGIN TO THE CORRESPONDING BLOCKS ON ONLY ONE REGULAR PAGE OF YOUR SITE

1. Add your plugin to your site as indicated in the setup page.

2. Look for the Page ID of the specific page you want to add it to. Here’s a quick tutorial on how to find it!

3. Copy that ID and head back to your Custom CSS Window.

4. Paste that page ID right before the name of the plugin, add a # sign at the beginning of it and a curly bracket { at the end.

Step 1.png

5. Scroll all the way down until you find the final break line and add a closing curly bracket after it.

Step 2.png

That’s it! If you click on one of those new curly brackets, you’ll see the pair turning bright green and your entire plugin should be between them!

Step 3.png
 

2. HOW TO ADD YOUR PLUGIN TO THE CORRESPONDING BLOCKS ON ONLY ONE INDEX SECTION OF YOUR SITE

1. Add your plugin to your site as indicated in the setup page.

2. Find your index section’s ID. Here’s a quick tutorial on how to do that!

3. Copy that ID and head back to your Custom CSS Window.

4. Paste that index section ID right before the name of the plugin, add a # sign at the beginning of it and a curly bracket { at the end.

Step 4.png

5. Scroll all the way down until you find the final break line and add a closing curly bracket after it.

Step 5.png


You’re done! If you click on one of those new curly brackets, you should see the pair turning bright green and your entire plugin snippet sitting nicely between them.

Step 6.png
 

3. HOW TO ADD YOUR PLUGIN TO THE CORRESPONDING BLOCKS ON MORE THAN ONE SPECIFIC PAGES AND/OR INDEX SECTIONS

1. Add your plugin to your site as indicated in the setup page.

2. Find each of the page IDs and/or index section IDs you want to target (see the previous sections for the tutorials on how do it!).

3. Copy the names and keep them on hand.

4. Paste all your IDs right before the plugin name, add a # sign at the beginning of EACH of your IDs and separate them with a comma. You can press enter to have each ID on a new line if you like! Then, add just ONE curly bracket at the end of the entire group.

Step 7.png


5. Scroll all the way down until you find the final break line and add a closing curly bracket after it.

Step 8.png


That’s all! If you click on one of those new curly brackets, you should see the pair turning bright green and all the juicy part of your snippet should be between them!

Step 9.png
 

4. HOW TO ADD YOUR PLUGIN OUTSIDE OF THE CUSTOM CSS WINDOW

Please note: this method is a bit more advanced so, even when the steps are broken down below, I only recommend it for those who have at least some experience with code.

Although the Custom CSS window is the best place to keep all your coding styles, if you prefer to embed the plugin code inside your site’s Code Injection area, under specific Page Settings, or inside a Code Block, this is what you need to do:

  1. Follow your plugin’s setup page instructions and completely style your plugin with your chosen colors, fonts, etc.

  2. If you’ll be adding it to a specific index section, follow the steps here to indicate which section of your index you’d like to target, or these steps if you’ll be adding it to more than one inside the same index page.

  3. Once you’ve set up everything and are happy with the result, copy your entire plugin snippet and head over to this handy online tool.

  4. Erase the example text from the left side and paste your snippet in it.

  5. Copy the resulting code on the right side and add it inside your Code Injection, Page Settings or Code Block as normal! Remember you’ll need to wrap your code in style tags.

Geeking out: the code from the plugins is written in LESS (a language extension that helps write leaner CSS and makes it much easier to style), and that online tool you’ll be using compiles the code to translate it to pure CSS. Squarespace can read LESS only inside the Custom CSS window, therefore a translation to pure CSS is needed if we want to add it to any of the other code injection sites of our site.