Jump to content

Custom Shopping Cart Disappeared

Recommended Posts

Hey, I have the same problem, today cart icon disappeared.
I use this code:

/* Cart Icon in the Header */
.icon--cart {
  svg {
    display:none ;
  }

  background-image: url(url);
  background-size: 25px 25px;
  background-repeat: no-repeat;
}

When I delete this piece of code (  svg { display:none ; }) then two baskets appear at once.

Please help!

1.png

Link to comment
8 hours ago, izzyswebsite said:

/* Replace the cart icon */

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

  background: url(PUT CART IMAGE URL HERE) center no-repeat;

  stroke: transparent !important;

  content: "";

  background-size: contain;

}

 

Does the above code work? 

Big thanks!

Link to comment

Site URL: https://www.beginonballard.com/

Hey there, my custom cart icon disappeared randomly and is not showing up anymore - can you please assist?

 

Here is the icon link:https://static1.squarespace.com/static/623113535517242488e4755c/t/62423bf9aeac573c5108aa91/1648507897865/checkout-chest.png

And full CSS: 

.icon--cart {   
  svg {     
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/623113535517242488e4755c/t/62423bf9aeac573c5108aa91/1648507897865/checkout-chest.png);   
  background-size: 20px 20px;   
  background-repeat: no-repeat; 
}

@media @mobile {
  #block-yui_3_17_2_1_1647401897839_22995 {
    display: none;
  }
}

.icon--cart {
filter:invert(1);
}

header.black .icon--cart {
filter:invert(0);
}

body:not(.header--menu-open) header:not(.black) .header-actions .icon-cart-quantity {
filter:invert(1);
}
 

Link to comment
On 9/2/2022 at 1:06 AM, Madison_hanley said:

Site URL: https://www.beginonballard.com/

Hey there, my custom cart icon disappeared randomly and is not showing up anymore - can you please assist?

 

Here is the icon link:https://static1.squarespace.com/static/623113535517242488e4755c/t/62423bf9aeac573c5108aa91/1648507897865/checkout-chest.png

And full CSS: 

.icon--cart {   
  svg {     
    display:none;   
  }   
  background-image: url(https://static1.squarespace.com/static/623113535517242488e4755c/t/62423bf9aeac573c5108aa91/1648507897865/checkout-chest.png);   
  background-size: 20px 20px;   
  background-repeat: no-repeat; 
}

@media @mobile {
  #block-yui_3_17_2_1_1647401897839_22995 {
    display: none;
  }
}

.icon--cart {
filter:invert(1);
}

header.black .icon--cart {
filter:invert(0);
}

body:not(.header--menu-open) header:not(.black) .header-actions .icon-cart-quantity {
filter:invert(1);
}
 

Add width height for first code

.icon--cart {
    background-image: url(https://static1.squarespace.com/static/623113535517242488e4755c/t/62423bf9aeac573c5108aa91/1648507897865/checkout-chest.png) !important;
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-size: contain;
    width: 30px;
    height: 30px;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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.