Shop Page / Cart Symbol

Site URL: https://daringdirtbag.squarespace.com/

PW: DDaccess

Can you change the cart symbol entirely? My brand makes bags and I would like the symbol to be a backpack. To resemble the bag symbol that some sites have. I added an example. It would be in white on a black background.

I also noticed that everything on my shop page is pushed all the way to the sides. Almost cut off. I want to create margins and have everything come inward (towards the center) a bit on both sides. Is this possible? 

Thank you!

Laura

34 minutes ago, DaringDirtbag said:

Site URL: https://daringdirtbag.squarespace.com/

 

PW: DDaccess

Can you change the cart symbol entirely? My brand makes bags and I would like the symbol to be a backpack. To resemble the bag symbol that some sites have. I added an example. It would be in white on a black background.

I also noticed that everything on my shop page is pushed all the way to the sides. Almost cut off. I want to create margins and have everything come inward (towards the center) a bit on both sides. Is this possible? 

Thank you!

Laura

Try adding to Home > Design > Custom Css

.icon--fill.icon--cart {
  position: relative;
  margin-right: 20px;
}
.icon--fill.icon--cart:before {
  content:'';
  background-image: url('https://api.iconify.design/bi/bag-check.svg?color=white');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

.Cart-inner .icon--cart {
  visibility: hidden;  
}

Change the url link that meets your requirement

Support me by pressing 👍 if this useful for you

Thank you! That really helped!

Can I create that same margin with everything on the shop page? The word shop, categories, and all of my items are pushed all the way to the side. I think it's a design setting I want for the rest of my site but doesn't work for this page. I want about 30px space on either side. 

Laura

Can a small amount of space be put between the bag/cart icon and the number of items? 

Laura

On 10/5/2022 at 9:11 AM, DaringDirtbag said:

Can a small amount of space be put between the bag/cart icon and the number of items? 

Laura

Add this code Under

/* Cart icon - text */
.icon--fill.icon--cart:before {
    left: -10px;
}