Sidebar Plugin FAQs
Installation & Setup
Basic Setup
Video Tutorial: How to use the sidebar plugin with Fluid Engine
Standard Implementation
Add this code to your site's header via Settings > Advanced > Code Injection:
<!-- Plugin Sidebar -->
<link href="/s/plugin-sidebar.css" rel="stylesheet">
<script src="/s/plugin-sidebar.js"></script>
<script>
pluginSidebar({
"url": "/blog-sidebar",
"notAllowedPages": "#collection-id1,#collection-id2"
});
</script>
<!-- end Plugin Sidebar -->
Why is my sidebar not showing up on blog pages?
Complete setup checklist:
Create Blog Sidebar page - Unlinked but enabled
Upload plugin files - Both CSS and JS to file manager
Add code injection - Header section only
Check page settings - Not password protected or disabled
Verify URL - Match exactly in plugin configuration
Test on published site - Won't work on unpublished sites
The sidebar shows space but no content. How do I fix this?
This indicates the sidebar page can't load:
Double-check URL - Must match exactly (case-sensitive)
Page status - "Not linked" but enabled and published
Try full URL - Use complete URL instead of slug if issues persist
Check permissions - Ensure page isn't restricted
Common Errors
1. Wrong Sidebar URL
Incorrect:
<script>pluginSidebar({"url":"https://www.yourdomain.com/blog"});</script>
Correct:
<script>pluginSidebar({"url":"/sidebar"});</script>
Use just the slug, not the full URL.
Why does my sidebar cause analytics to double-count page views?
Known issue where sidebar loading triggers additional analytics events:
Exclude sidebar page from analytics tracking
Modify tracking code to ignore sidebar page loads
Use GTM filtering if using Google Tag Manager
Contact support for analytics-friendly plugin versions
Why do I see '<br/>' in my browser tab title when the sidebar is active?
Usually caused by formatting issues:
Check sidebar content for stray HTML tags
Clean code injection - Remove extra line breaks
Validate HTML in sidebar page content
Test with minimal content to isolate the issue
Should I noindex my sidebar page?
Yes, add noindex to prevent search engines from indexing the sidebar page since it's not meant to be visited directly.
Positioning & Layout
How do I make the sidebar sticky/fixed while scrolling?
Method 1: Plugin configuration Add to your sidebar page settings:
html .sidebar::before {
content: '{"sticky":"yes","stickyTop":"10px"}' !important;
}
Method 2: Custom CSS
html .sidebar__inner {
position: -webkit-sticky;
position: sticky;
top: 10px;
z-index: 2;
height: auto;
}
How can I change the sidebar position from right to left?
Add this CSS to move sidebar to left:
html body:not(.sidebar-is-stacked) .sidebar {
margin: 0 30px 0 0;
-webkit-box-ordinal-group: 0;
order: -1;
}
html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar .sidebar {
right: auto;
left: 0;
}
html body.has-sidebar.template-v7_1:not(.sidebar-is-stacked):not(.sqs-edit-mode-active) .page-section.has-sidebar > .content-wrapper .content {
padding-right: 0;
padding-left: calc(260px + 30px);
}
Sidebar position on multiple blogs
For different sidebar positions on different blogs:
/* Move the sidebar to the left side */
@media (min-width: 768px) {
.has-sidebar .maincontent {
flex-direction: row-reverse;
}
.sidebar {
margin: 0 120px 0 0 !important;
}
}
The sidebar appears on pages where I don't want it. How do I exclude specific pages?
Use the notAllowedPages parameter:
pluginSidebar({
"url": "/blog-sidebar",
"notAllowedPages": "#collection-683f4cba13a00b3eef969692,#collection-682be3b08304502f36c23230"
});
To find collection IDs:
Visit the page you want to exclude
View page source
Look for
collection-in the body classCopy the full collection ID
Mobile Responsiveness
How do I control when the sidebar stacks on mobile?
Configure breakpoint and mobile position:
html .sidebar::before {
content: '{"breakpoint":"768px","mobile":"bottom","sticky":"yes","stickyTop":"10px"}' !important;
}
Options:
"breakpoint":"768px"- When to stack (adjust as needed)"mobile":"bottom"- Stack below content"mobile":"top"- Stack above content
Sidebar Above Content on Mobile
@media (max-width: 768px) {
.has-sidebar .maincontent {
display: -webkit-box !important;
display: flex !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
.sidebar {
-webkit-box-ordinal-group: 0;
order: -1;
}
}
The sidebar is cut off or causes layout issues on mobile. How do I fix this?
Add responsive CSS:
@media screen and (max-width: 767px) {
html body.sidebar-is-stacked .sidebar {
position: relative !important;
width: 100% !important;
margin: 20px 0 !important;
padding: 0 20px !important;
}
html body.sidebar-is-stacked .page-section.has-sidebar > .content-wrapper .content {
padding-left: 0 !important;
padding-right: 0 !important;
}
}
Sidebar on iPad
For iPad-specific sizing (80% content, 20% sidebar):
@media (min-width: 768px) and (max-width: 1024px) {
.sidebar {
width: 190px;
}
.has-sidebar .maincontent .contentwrapper {
width: calc(100% - (190px + 30px));
}
}
Advanced Positioning
Move Sidebar Under First Section on Index Page
Add this code to Code Injection before the plugin code:
<!-- Move Sidebar Under First Section on Index Page -->
<script>
window.addEventListener('sidebarAdded', function () {
var section = document.querySelector('.Index-page');
if (section) {
var parent = section.parentNode.parentNode;
parent.insertBefore(section, parent.firstElementChild);
}
});
</script>
<!-- end Move Sidebar Under First Section on Index Page -->
How to add 2 sidebars to the same blog
Video Tutorial: How to add 2 sidebars to the same blog
Our website has three separate blogs. Is it possible to add a different sidebar for each?
Yes, you can configure different sidebars for different blog collections using collection-specific targeting and conditional loading.
Content Customization
Can I customize what appears in the sidebar?
Yes, edit your Blog Sidebar page to include:
Text blocks with custom content
Image blocks for photos or graphics
Button blocks for calls-to-action
Form blocks for newsletters/contact
Social links and sharing buttons
Custom HTML for advanced features
How do I add proper spacing between sidebar elements?
Method 1: Page editor
Add spacer blocks between content
Method 2: Custom CSS
.sidebar .sqs-block {
margin-bottom: 20px;
}
.sidebar .sqs-block:last-child {
margin-bottom: 0;
}
/* Specific block types */
.sidebar .sqs-block-button {
margin-bottom: 15px;
}
.sidebar .sqs-block-form {
margin-bottom: 25px;
}
Advanced Usage & Troubleshooting
Can I use different sidebars on different blog posts or pages?
Basic plugin limitation: One sidebar for all blog posts
Workarounds:
Use conditional CSS to show/hide different sidebar sections
Implement multiple sidebar plugins with different configurations
Use category-based content within a single sidebar
Contact support for custom solutions
The sidebar plugin worked before but stopped working. What happened?
Common causes:
Squarespace updates affecting plugin compatibility
Template changes modifying page structure
Code conflicts with new plugins or custom code
File upload issues - Files may have been deleted
Troubleshooting steps:
Clear all caches (browser, site, CDN)
Re-upload plugin files to ensure they're intact
Check code injection for any modifications
Test with minimal setup to isolate issues
Review recent changes to identify what broke it
Configuration Examples
Basic Configuration
pluginSidebar({
"url": "/blog-sidebar"
});
Advanced Configuration
pluginSidebar({
"url": "/blog-sidebar",
"notAllowedPages": "#collection-id1,#collection-id2",
"breakpoint": "768px",
"mobile": "bottom",
"sticky": "yes",
"stickyTop": "10px"
});
Multiple Blog Setup
// For specific blog collections
pluginSidebar({
"url": "/blog-sidebar-main",
"allowedPages": "#collection-683f4cba13a00b3eef969692"
});
pluginSidebar({
"url": "/blog-sidebar-secondary",
"allowedPages": "#collection-682be3b08304502f36c23230"
});
For additional support, ensure your sidebar page is properly configured as "Not Linked" but enabled, and verify all plugin files are uploaded correctly.
