Shopping Cart Icon - Lunch Box

Site HeaderCommerce
Written By Ghost

1. Plugin Info

Replace the default shopping cart icon with a lunch box icon.

  • Works with Squarespace 7.1

  • Uses Custom CSS

  • Lunch Box Icon Included

2. Add this code to Custom CSS

// Cart Icon - Lunch Box - Ghost //

@custom-cart-icon: url(https://static1.squarespace.com/static/5ba5e044b10f25cb908c506f/t/66134d7cc73e8e6610875948/1712541052930/lunch_box_icon.png); // lunch box icon included

@cart-icon-dark-or-light: 0; // 0 for dark icon, 1 for light icon

// icon size can be changed in Squarespace settings like normal

/* ---- Do Not Edit Below ---- */

.icon--cart svg { position: relative; display: inline-block; background-image: @custom-cart-icon !important; background-size: contain !important; background-repeat: no-repeat !important; }  .icon--cart svg { fill: transparent !important; stroke: transparent !important; } .icon--cart svg { filter: invert(@cart-icon-dark-or-light); }

// Cart Icon - Lunch Box - Ghost //

3. Customizable Options

  • Cart Icon

  • Icon Color (Dark or Light)

Want to use your own icons? Use Custom CSS > Manage Files to upload and generate a file URL for your own icons. Then replace the default icon links with your file URL.

4. Plugin Notes

  • Ensure the cart icon is enabled and set to icon style in Squarespace settings.

  • Cart icon size can be adjusted in Squarespace settings like normal.

  • If a custom icon is not showing, ensure you are adding the file’s full URL.

Ghost http://www.ghostplugins.com
Previous

Shopping Cart Icon - Shirt
Next

Shopping Cart Icon - Taco