How to create custom cart icon hover effects in Squarespace

This tutorial is specifically for the latest version of Squarespace, known as 7.1, and won't work for older versions of Squarespace. For more information, visit https://insidethesquare.co/themes

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!

A cart icon in the header of your website has three parts: background, icon, and quantity. These codes will help you change the color of those on a hover and add some movement too!

Here is the selector from this tutorial:

.header-actions-action--cart:hover

I use this free Chrome extension to grab block id’s; not affiliated - just a fan!

---

This code will change the background color:

.header-actions-action--cart:hover .icon--cart {

background-color: yellow!important

}

This code will change the icon color:

.header-actions-action--cart:hover .icon--cart {

fill: red!important; stroke: red!important

}

This code will change the quantity color:

.header-actions-action--cart:hover .sqs-cart-quantity {

color: red!important

}

This code will create the movement effect:

.header-actions-action--cart:hover .icon{

transform: translatey(-5px)

}

---