Custom Cart Icon

We have created some custom cart SVG icons that you can use to change the design on your site.

Below is a video that demonstrates how to use the custom cart icon in BodyCommerce.

Using a custom cart icon

The first thing to do is to go to BodyCommerce > Mini Cart/Cart Icon Settings tab and scroll down until you see the setting "Use Custom Cart Icon?" - enable this. You will then be faced with some settings.

  1. Select custom icon: Choose the icon style you want, we have created multiple SVG icons that you can choose from.
  2. Icon Width: Change the size of the icon width.
  3. Icon Color: Change the colour of the icon.
  4. Icon Background Color: If you want a background behind the icon - choose it here.
  5. Icon Background Padding Left: Add some space on the left.
  6. Icon Background Padding Right: Add some space on the right.
  7. Icon Background Padding Top/Bottom: Add some space on the top and bottom of the icon.
  8. Enable Numbers: Enable/disable the cart content number next to the cart icon.
  9. Text After Numbers (singular): 

    This adds text after the numbers in the cart - the default is "items" by Divi. To remove this text, leave this box blank. This is the option for when there is only one product added.

  10. Text After Numbers (plural): This adds text after the numbers in the cart - the default is "items" by Divi. To remove this text, leave this box blank. This is the option for when there is more than one product added.
  11. Icon Position From The Right: 
    Set how far right you want to the cart icon to be. (horizontal)
  12. Icon Position From The Top: Set how far from the top you want to the cart icon to be. (vertically)

Cart Icon Number Count Appearance

  1. Select Style: Choose if you want a background behind the cart number or not.
  2. Number Count Position From The Right: Set how far right you want to the cart icon number count to be. (horizontal)
  3. Number Count Position From The Top: Set how far from the top you want to the cart icon number count to be. (vertically)
  4. Number Count Background Color: Change the number background colour behind the number.
  5. Number Count Background Color Hover: Change the  number  background colour behind the number when you hover over it.
  6. Number Count Background Border Radius: Change the  number  background colour border-radius.
  7. Number Count Background Width: Change the  number  background width.
  8. Number Count Background Height: Change the  number  background height.
  9. Number Count Text Color: Change the number colour.
  10. Number Count Text Font Size: Change the number font size.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us