FREE SQUARESPACE TUTORIALS
Learn how to customize Squarespace with CSS
Welcome to my collection of free Squarespace css tutorial videos here InsideTheSquare!
Browse by category below, or search for exactly what you need.
BROWSE BY CATEGORY
- Tablet
- Version 7
- Version 7.1
- accordion
- alert
- align
- animation
- announcement bar
- archive
- audio
- background
- backgrounds
- blocks
- blog
- blur
- border
- borders
- button
- button styles
- buttons
- calendar
- caption
- cart
- chart
- checkout
- collection
- collection page
- color
- colors
- content
- cookie
- cookie alert
- countdown
- countdown timer
- course
- css
- custom
- date
- design
- desktop
- digital product
- divider
- donation
- donation block
- dropdown
- e-commerce
- elfsight
- embed
- event
- events
Brand new to custom CSS?
How to customize the digital product block in Squarespace
In this tutorial, you’ll learn how customize the digital product block in Squarespace using CSS.
How to Change Squarespace Blog Post Paywall Text: A Step-by-Step Squarespace CSS Tutorial
In this tutorial, you’ll learn how change the automatic text on a blog post paywall.
How To Add A Click To Call Button To Squarespace Mobile Menu
The CTA button in your Squarespace website can be a link to a phone number, but no one needs that on desktop! This tutorial will teach you how to create that link for mobile only.
How to add text before a price in Squarespace
The product content block in Squarespace makes it easy to promote a product on any page, and in this tutorial, you’ll learn how to customize it even more. In this tutorial, we are going to use some CSS to add text both before and after the price.
How to add a border to the promo pop-up in Squarespace
In this super quick tutorial, you'll learn how to use one simple line of code to add a border to the promo pop-up in Squarespace.
How to change the promo pop-up fonts in Squarespace
You can use the special design menu to change the fonts for every single element of your promotional pop-up, or you can use one line of code to change them all at once!
How to add a border to a product in Squarespace
In this tutorial, we’ll add a border, box-shadow, and curve the corners of the product image with a border-radius.
How To Customize The Sale Label in Squarespace 7.1
When you have an item on sale in your Squarespace store, the product will get a SALE label next to its price. This video will show you how to change the color and size of that label, and how to move it above the image on desktop and mobile!
Product Name & Price on Same Line in Squarespace
In this Squarespace tutorial, we’ll use some clever CSS to move the product price up to the same line under the image, so it sits next to the title. This tutorial is specific for Squarespace version 7.1 and it won't work for older versions!
How to create custom cart icon hover effects in Squarespace
Squarespace has a built-in hover effect for the cart icon in the header of your website, and this tutorial will teach you how to make it even better!
Summary Block Hover Effects
In this tutorial we’ll use some custom code to change the look of summary blocks so they stand out on a hover.