How to create custom cart icon hover effects in Squarespace // Squarespace Cart Icon Tutorial

Published: 25 October 2022
on channel: InsideTheSquare with Becca Harpain

1,331

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!
- -
This is just the start of all the cool things you can do with custom CSS! Learn the basics in my free class: https://insidethesquare.co/learn
- -
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!

This tutorial is specific for version 7.1 - the codes will not work in older versions of Squarespace.

Here is the selector from this tutorial.
.header-actions-action--cart:hover

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)
}

- -
📑 Download my collection of CSS codes for Squarespace at https://insidethesquare.co/css
- -
❤️ Like this tutorial? Buy me a coffee to say thanks! ☕
https://buymeacoffee.com/insidethesquare
- -
🙋 Need some help? Visit https://insidethesquare.co/code-help to see my current support options.
- -
🥰 SUPPORT MY CHANNEL → https://paypal.me/insidethesquare
💻 WEBSITE → https://insidethesquare.co
📧 NEWSLETTER → https://insidethesquare.co/email
🤳 INSTAGRAM →   / thinkinsidethesquare
👍 FACEBOOK →   / insidethesquare
📌 PINTEREST →   / insidethesquare
💸 DISCOUNT → Save 10% on your first year of Squarespace with code INSIDE10 https://insidethesquare.co/inside10
- -
The term "Squarespace" is a trademark of Squarespace, Inc. This video was not approved or endorsed by Squarespace, Inc. I just really love their platform ♥

Watch video How to create custom cart icon hover effects in Squarespace // Squarespace Cart Icon Tutorial online without registration, duration hours minute second in high quality. This video was added by user InsideTheSquare with Becca Harpain 25 October 2022, don't forget to share it with your friends and acquaintances, it has been viewed on our site 1,331 once and liked it 19 people.

354