Jump to content

Cart as text for desktop and as an icon for mobile view?

Recommended Posts

In case anyone is trying to do the same, I found this code by @tuanphan which works perfectly!

@media screen and (min-width:992px) {
/* Cart number to cart text */
span.sqs-cart-quantity:before {
    content: "Cart (";
}
span.sqs-cart-quantity:after {
    content: ")";
}
header#header svg.icon.icon--cart {
    display: none;
}
.header .header-actions-action--cart .icon {
    width: 70px;
}
.icon-cart-quantity {
    position: static !important;
    font-size: 15px;
}
}

Thanks @tuanphan!

Link to comment
  • 2 weeks later...

Hello rhondahymason, that code didn't seem to work for me. While it did change my mobile cart to the icon, it hid the text cart on my desktop page. I'm not a coder, any idea what i did wrong?

Link to comment
20 minutes ago, zraven said:

Hello rhondahymason, that code didn't seem to work for me. While it did change my mobile cart to the icon, it hid the text cart on my desktop page. I'm not a coder, any idea what i did wrong?

Nevermind, i figured it out. Had to turn on the quantity (Show "0" in cart) and then everything worked!

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.