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 reorder the blog list text in Squarespace
Learn how to change the order of text in your blog grid with CSS in this step-by-step tutorial from InsideTheSquare.co
How to customize Squarespace blog title font
Learn how to create a custom font style for your Squarespace blog title in this step-by-step tutorial from InsideTheSquare.co
How to create a full width image in a Squarespace blog post
Learn how to create a full-width blog image in Squarespace with this tutorial. Perfect for bloggers and website owners looking to enhance their design.
How to customize product variant buttons in Squarespace
This tutorial teaches you how to customize product variant buttons on your Squarespace online store with CSS. Learn how to change the size, shape, color, and font of the buttons, as well as create hover effects to make them pop. This code can be customized for any Squarespace website so it looks uniquely yours.
How to customize a Squarespace shopping cart page
In this tutorial, you’ll learn how to use CSS to change the look of the shopping cart page in Squarespace. We’ll be editing the colors, fonts, and event modifying the layout with custom code.
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 use your own image for the cart icon in Squarespace
This tutorial will show you how to replace the shopping cart icon in Squarespace with your own image!
How to customize the shopping cart icon in Squarespace
This tutorial will show you how to customize the look of your shopping cart icon in Squarespace using some clever CSS.
How to show product info on a hover in Squarespace
In this custom code tutorial, we’ll use some CSS to show product info on a hover in the desktop version of your Squarespace store.
How to customize the mobile product page in Squarespace
In this tutorial, we’ll use custom CSS to change the look of your product pages specifically on mobile devices in Squarespace 7.1
How To Customize Variant & Quantity in Squarespace
In this tutorial you’ll learn how to use custom CSS to change the look of the quantity and variant options on a product page in Squarespace 7.1
How to change the word “sale” in Squarespace
This tutorial will show you how to change the sale product label into any text you want to display. This tutorial is for both versions of Squarespace - 7.1 and sites built on the Brine theme in version 7.
How to customize the “sales” label in Squarespace
Learn how to create eye-catching “sales stickers” to your Squarespace site in this tutorial!