Your Own Shopping Cart Icon + Text

---

Description

Swap out the default cart icon with your own icon with text below. This plugin uses css editor and works with Squarespace 7.1.

---

How To Install

From your Squarespace account, go to the Custom CSS Editor. Copy and paste the code below into the Custom CSS Editor box.

// Custom Cart Icon //

.header .header-actions-action--cart .icon {
  background: url(IMAGE-URL-HERE.png) center no-repeat;
  stroke: transparent !important;
  content: "";
  background-size: contain;
}

// Text Under Cart Icon //

.header .header-actions-action--cart .icon:after {
  content: "CART";
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  text-align: center;
  margin-top: 10px;
  margin-bottom: 0px;
  letter-spacing: 0px;
  width: 100% !important;
  display: inline-block;
}

// Hide Cart Quantity //

.header-actions .icon-cart-quantity {
  display: none !important;
}

---

Customize

• Custom Cart Icon: Replace IMAGE-URL-HERE with the URL of your own icon. We recommend hosting the file within Custom CSS Files. This will help generate a direct file URL.

• Text Under Cart Icon: Change the CART text to any text you’d like or keep as is. You can also adjust color, font size, font weight, margins, and letter spacing to your liking.

• Hide Cart Quantity: This removes the default Squarespace cart quantity. You can remove this code if you’d like.

This plugin applies to both desktop and mobile. Cart icon sizing can be changed within Squarespace settings.

---