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.
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!
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!
Custom font for quantity field (7.0 & 7.1) - Cart page
Tweak the font style of your Cart Page quantity field text in Squarespace with this quick snippet. You’ll be able to add in your own custom font family, and add in any other styles you want to make it match your brand!
Custom font for subtotal (7.0 & 7.1) - Cart page
Tweak the font style of your Cart Page’s subtotal text and amount in Squarespace with this quick snippet. You’ll be able to add in your own custom font family, and add in any other styles you want to make it match your brand!
Custom font for product title (7.0 & 7.1) - Cart page
Tweak the font style of the product titles on your Cart Page in Squarespace with this quick snippet. You’ll be able to add in your own custom font family, and add in any other styles you want to make it match your brand!
Custom font for checkout button (7.0 & 7.1) - Cart page
Tweak the font style of the Checkout button text on your Cart Page in Squarespace with this quick snippet. You’ll be able to add in your own custom font family, and add in any other styles you want to make it match your brand!
Custom font for shopping cart title (7.0 & 7.1) - Cart page
Tweak the font style of your “Shopping Cart” Cart Page title in Squarespace with this quick snippet. You’ll be able to add in your own custom font family, and add in any other styles you want to make it match your brand!
Custom font for variant text (7.0 & 7.1) - Cart page
Tweak the font style of your Cart Page product variant text in Squarespace with this quick snippet. You’ll be able to add in your own custom font family, and add in any other styles you want to make it match your brand!
Custom font for product price (7.0 & 7.1) - Cart page
Tweak the font style of your Cart Page product prices in Squarespace with this quick snippet. You’ll be able to add in your own custom font family, and add in any other styles you want to make it match your brand!
Alternative image on hover (7.1 FE) - Image block fluid engine
Set up an alternative image on hover mode for 7.1 Image Blocks with this copy/paste code. The snippet will allow you to set any image you want just with its URL, and it’ll take care of the rest of the animation for you.
Offset border (7.1 FE) - Image block fluid engine
Add a quick offset border look to your regular Image Blocks in 7.1 with this code! You’ll get the ability to style the border’s color, thickness and offset position to make it match your brand and site design.
Long border illusion (7.0 & 7.1 CE) - Image Block Stack
Add a sleek look to your Stack Image Blocks in Squarespace with this copy/paste code snippet. It’ll create a lovely minimal border design, wrapping your content and underlapping the image, and give you full control over its styles in terms of color, thickness, and “narrowness”!
Related videos heading styles - Video page (7.1)
Fully customize that “You might also like” title on top of your related videos area – AND the individual video titles – in your 7.1 site with this short snippet. You’ll be able to change up the font family and overall styles of all these titles with one quick copy/paste action and some small tweaks to the corresponding property values.
Custom pagination - Video page (7.1)
Swap the native “Newer” and “Older” 7.1 Video Page pagination text for your own custom phrases! This code snippet will allow you to quickly set things up by just doing a quick copy/paste and change of the example values.