In this tutorial, we’ll add a border, box-shadow, and curve the corners of the product image with a border-radius.

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!

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!

In this Squarespace tutorial, you’ll learn how to change a text block background color. We’ll use CSS change to color, create a gradient color, and you’ll learn how to upload your own image to use for the background of a text block.

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!

In this Squarespace tutorial, you’ll learn all about the brand-new Shape content block in Squarespace! I’ll show you how to add it to a page section on your site, how to change the shape and color, how to add a drop shadow, and how to layer it with other content.

In this Squarespace tutorial, you’ll learn how to use different types of IDs to change individual things in Squarespace with custom CSS.

List sections are auto layouts that can have an image, title, description, and button. They can have a unique background color, and they can have an image too, thanks to the codes in this tutorial!

One of my favorite CSS tricks is the frosted glass effect - showing a slightly transparent background that blurs the image behind it. In this tutorial, I’ll teach you how to create that effect for a list item in Squarespace.

Just because it’s built with Squarespace, doesn't mean a list section has to be square ;) In this step-by-step tutorial, you’ll learn how to create a unique shape for a list item using custom CSS.

Make your Squarespace site even more eye-catching with this hover effect! Learn how to change the color of a page section background on a hover in this tutorial.

A background pattern can make your Squarespace site even more unique, and this tutorial will teach you how to create one with code!

Squarespace can do a lot, but it can’t do it all! That’s where Elfsight comes in handy. In this video, you’ll learn how to create, customize, and install a countdown timer in Squarespace using Elfsight.

Squarespace can do a lot, but it can’t do it all! That’s where Elfsight comes in handy. In this video, you’ll learn how to create, customize, and install an animated number counter in Squarespace using Elfsight.

You can add a border to anything in a Squarespace site using custom CSS, even the whole page! This tutorial will teach you how.

In Squarespace, you can add an image on top of a text block, but when it resizes everything gets changed! This tutorial will teach you how to wrap text around that image so it will look great on every size device.

Timelines are a popular design choice for all kinds of websites, but Squarespace doesn’t have that feature built into their program. Luckily, this tutorial will teach you how to make your own using a list section in Squarespace 7.1 and a little bit of custom CSS!

Hover over an image - see some text. Sounds simple right? Well thanks to CSS, it totally is. And this tutorial will teach you how to create that hover effect in Squarespace using Fluid Engine!

The new editing experience in Squarespace has a LOT of neat design features, especially when it comes to text! This video will show you my five favorite text tricks.

Calendar blocks can display blog posts, products, images, and events that are scheduled or have already happened. There are not many options for customizing the look of this Calendar in Squarespace, but with the codes in this video, you’ll be able to update a calendar block with colors, borders, and more!