The Codebase
Browse all Resources!
Look up that Squarespace tutorial, plugin, snippet or course that’s gonna help you customize your current personal or client project.
Dot-style cards - Auto Layout simple list (7.1)
Looking for a cool dynamic effect to add to your Auto Layout Simple List cards? Look no further! With this copy/paste plugin you’ll be able to add a clean static style and eye-catching hover mode in a single swoop. Plus, through the snippet settings you’ll get to control the color of the “dots”, set up two titles with their own styles, and manage how visible the image becomes on hover, to fully match the look of your section to the rest of your project.
Dot-style cards - Auto Layout carousel (7.1)
Looking for a cool dynamic effect to add to your Auto Layout Carousel cards? Look no further! With this copy/paste plugin you’ll be able to add a clean static style and eye-catching hover mode in a single swoop. Plus, through the snippet settings you’ll get to control the color of the “dots”, set up two titles with their own styles, and manage how visible the image becomes on hover, to fully match the look of your section to the rest of your project.
Product item button - Summary block (7.0, 7.1CE & 7.1FE)
If you’re working with a Summary Block linked to a product/shop page and you’re wanting to display something like the native “Read More” button to lead to the item’s details, this is the snippet for you! You’ll have the ability to choose the text that gets displayed, the color of the button and the style of its font, to make sure everything matches the rest of your site.
Expansive cards on hover - Auto Layout Simple List (7.1)
Add a little something something to your project’s Auto Layout Simple List with this cool hover mode expansive effect. You’ll be able to set a custom icon for all the cards to mark them with your site’s brand, continue to modify the settings of the text through the native options, control the thumbnails saturation/opacity levels on both the initial and hover mode, and automatically get a sleek and responsive look on tablets and mobile, regardless of how many cards you set up on desktop!
Alternate announcement bar content for a single page - Announcement Bar (7.1)
Looking to replace the text and URL of your announcement bar for only ONE page of your Squarespace site? Then this snippet is for you.
Alternate logo for open mobile menu - Header nav (7.1)
If you're working with a different color theme for your 7.1 site's overlay menu and you need to change your logo color to make it pop, this is the code snippet for you!
Minimal poster style (7.0, 7.1 CE & 7.1 FE) - Summary Block
Looking to create an Auto Layout-y style for your Grid Summary Blocks in Squarespace? Then get your hands on this poster-inspired code snippet to achieve a clean and minimal look for those blocks on your site. You’ll be able to tweak the title of the summary items to match your brand, adjust the background color of the slides and make the hover mode shadow and shift as subtle or bold as you like!
Minimal rounded fields style (7.0, 7.1 CE & 7.1 FE) - Newsletter Block
Get a sleek one-line look for your Newsletter Block, with rounded fields, with this code snippet! You’ll be able to copy/paste your way into this minimal look in just a few minutes, and tweak the spacing, roundness and shadow of the fields with a couple of clicks.
Logo page redirect - Header nav (7.1)
The reason why you’re doing it is not important, what matters is that there’s a solution for it. If you want to have your logo redirect to a page other than your homepage in your Squarespace 7.1 site, get your hands on this code snippet to make that happen in just a few minutes!
Mobile nav on demand - Header nav (7.1)
Wishing you could bring up the burger button and mobile menu on tablets in your 7.1 site? Wish no more with this handy little snippet! Copy/paste this code into your Squarespace site and you’ll be able to have the mobile nav instantly show up at the breakpoint of your choice, to either avoid frustrating issues with excess nav links on tablet-ish devices or simply create a minimal look on desktop!
Creating a scrolling text header button in Squarespace (7.1)
Want to make the header button of your Squarespace project unmissable? Then why not turn it into a mini scrolling marquee with today's CSS trick! Let's get to it.
Side-by-side thumbnail and content - Auto Layout Simple List (7.1)
If you’re looking for a quick way to display your Auto Layout Simple List items in a horizontal fashion, this is the snippet for you! You’ll get to decide whether the image sits to the right or left side of the text, choose the thumbnail size, adjust the spacing between elements, and even pick at which mobile breakpoint you’d like the slides to go back to their vertical look.
Bordered items with hover overlay for Related Products - Shop pages (7.1)
Create a stylish line-look for the related items in your 7.1 Shop Pages with this short code. You’ll have the ability to style the border, overlay color and icon, and even set up a floating title label however you want to make it as prominent or subtle as you wish!
Bordered items with hover overlay - Auto Layout Carousel (7.1)
Give your Auto Layout Carousels a super custom look with this code snippet! It’ll instantly add a border to your list items, create an overlay on hover with the icon of your choice, and you’ll even be able to set up a floating label with whichever text you want to highlight on each slide!
Customize and add an image to your Squarespace announcement bar (7.0 & 7.1)
Take a look at how you can create a super custom announcement bar look in Squarespace with a couple of CSS tricks and an icon or image!
Removing the space under code blocks in Squarespace when using Fluid Engine (7.1)
Want to get rid of the extra space under that code block in Squarespace 7.1 where you just added a widget with a script? Ok! Let’s do it.
How to add a wavy background to a wavy scrolling block in Squarespace (7.0, 7.1 CE & 7.1 FE)
Wondering if there’s a way to make Squarespace’s scrolling block background match the wavy pattern you’re using? Wonder no more! Find out how to make it happen.