How to create custom cart icon hover effects in Squarespace // Squarespace Cart Icon Tutorial
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 ♥
