The DigiCommerce Cart Icon Block displays a shopping cart icon with customizable count, text, and total amount specifically designed for DigiCommerce stores. This block automatically integrates with your DigiCommerce cart data and provides real-time updates as customers add or remove items. It’s perfect for custom headers that you can easily create with our DigiFusion theme and its Pro version.
Adding the DigiCommerce Cart Icon Block
Navigate to the page where you want to display the cart icon. Click the block inserter (+) and search for “Cart Icon” in the DigiBlocks DigiCommerce category. The block will be added with default settings showing a placeholder cart icon that demonstrates how the actual cart will appear on the frontend.
General Configuration
Icon Type Options
Choose from four different cart icon styles in the General section:
Shopping Cart – Classic shopping cart icon with wheels
Shopping Bag – Modern shopping bag style icon
Shopping Basket – Traditional basket-style icon
Custom Icon – Upload your own custom SVG icon
When selecting Custom Icon, paste your SVG code into the provided text area. The custom icon will inherit all styling options including size and colors.
Display Elements
Control which cart elements to show using the toggle switches:
Show Count – Displays the number of items in the cart as a badge
Show Text – Shows customizable text next to the cart icon
Show Total – Displays the cart total amount
Show Mini Cart – Enables a dropdown mini cart on hover
Hide When Cart is Empty – Hides the entire cart icon when no items are present
Layout and Alignment
Layout Options:
- Horizontal – Places elements side by side in a row
- Vertical – Stacks elements vertically in a column
Alignment Options:
- Left – Aligns cart icon to the left
- Center – Centers the cart icon
- Right – Aligns cart icon to the right
Text Customization
Cart Text Settings
Configure the text that appears alongside your cart icon:
Cart Text – Default text shown when cart contains items (e.g., “Cart”, “Shopping Bag”)
Empty Cart Text – Text displayed when the cart is empty
These text labels help provide context for users and can be customized to match your store’s voice and branding.
Mini Cart Configuration
Mini Cart Display
When enabled, the mini cart shows a dropdown with cart contents when users hover over the cart icon. Configure these settings:
Mini Cart Width – Adjust the width of the dropdown cart (250px to 500px)
Position – Choose whether the mini cart appears on the left or right side of the icon
The mini cart automatically displays product images, names, quantities, prices, and action buttons for cart management.
Color Styling
Normal State Colors
Set default colors for all cart elements:
Icon Colors:
- Icon Color – Color of the cart icon itself
- Background Color – Background color behind the entire cart element
Count Colors:
- Count Text Color – Color of the number text in the count badge
- Count Background – Background color of the count badge
Text Colors:
- Text Color – Color of cart text labels
- Total Color – Color of the cart total amount
Border Color – Color of borders when border style is applied
Hover State Colors
Define color changes when users hover over the cart icon:
Hover Colors:
- Icon Color – Icon color on hover
- Background Color – Background color on hover
Count Hover Colors:
- Count Text Color – Count text color on hover
- Count Background – Count badge background on hover
Text Hover Colors:
- Text Color – Cart text color on hover
- Total Color – Cart total color on hover
Border Hover Color – Border color during hover state
Mini Cart Colors
When mini cart is enabled, customize its appearance:
Normal Colors:
- Background Color – Mini cart background
- Border Color – Mini cart border
- Text Color – General text color in mini cart
- Heading Color – Color of mini cart headings
- Price Color – Product price text color
- Total Color – Cart total color in mini cart
Button Colors:
- Button Background – Cart action button background
- Button Text – Cart action button text color
- Remove Color – Color of remove/delete buttons
Hover Colors:
- Button Background – Button background on hover
- Button Text – Button text color on hover
- Remove Color – Remove button color on hover
Sizing and Spacing
Icon and Element Sizing
Icon Size – Control the dimensions of the cart icon (16px to 80px)
Spacing – Set the gap between cart elements (0px to 50px)
Container Spacing
Padding – Internal spacing within the cart container
Margin – External spacing around the cart element
Use responsive controls to adjust spacing independently for desktop, tablet, and mobile devices.
Typography Controls
Text Typography
Configure the main text appearance:
Font Family – Choose from Google Fonts or system fonts
Font Size – Responsive font size controls
Font Weight – Select from available font weights
Font Style – Normal or italic styling
Text Transform – None, uppercase, lowercase, or capitalize
Text Decoration – Add underline, overline, or line-through effects
Line Height – Control line spacing with em or pixel units
Letter Spacing – Adjust character spacing with responsive controls
Count Typography
Style the cart count badge text independently:
Font Family – Separate font selection for count numbers
Font Size – Smaller responsive sizes for badge text
Font Weight – Usually bold or semi-bold for visibility
Line Height – Typically set to 1 for compact badges
Mini Cart Typography
When mini cart is enabled, control three typography sets:
Mini Cart Typography – General text within the mini cart
Mini Cart Heading Typography – Product names and section headings
Mini Cart Button Typography – Text on action buttons
Border and Visual Effects
Border Styling
Border Style – Choose from none, solid, dotted, dashed, or double
Border Width – Set thickness for each border side independently
Border Radius – Round corners with pixel or percentage values
Animation Effects
Animation Effect – Add entrance animations when the cart comes into view:
- None – No animation
- Fade effects – Fade in from various directions
- Slide effects – Slide in from different directions
- Zoom effects – Scale in or out
- Bounce effects – Bouncy entrance animations
Hover Effect – Add interactive hover animations:
- None – No hover effect
- Scale – Slightly enlarge on hover
- Bounce – Bouncing animation on hover
- Pulse – Pulsing scale effect
Use the Preview Animation button to test animation effects in the editor before publishing.
Advanced Settings
Visibility Controls
Control when the cart icon appears on different devices:
Hide on Desktop – Hide cart icon on desktop screens
Hide on Tablet – Hide cart icon on tablet screens
Hide on Mobile – Hide cart icon on mobile screens
Hidden elements appear with reduced opacity in the editor but are completely hidden on the frontend.
Additional Options
HTML Anchor – Create a unique anchor ID for direct linking to this cart icon
Additional CSS Classes – Add custom CSS classes for advanced styling
Integration with DigiCommerce
The cart icon automatically connects to your DigiCommerce installation and displays real-time data:
- Cart count updates as items are added or removed
- Total amount reflects current cart value including taxes and discounts
- Mini cart shows actual product information and images
- Click actions redirect to cart or checkout pages as configured
For optimal integration, ensure your DigiCommerce store is properly configured with currency settings, tax calculations, and cart functionality. The block respects your DigiCommerce currency position settings and displays amounts in your configured format.
Responsive Design
All styling options include responsive controls for desktop, tablet, and mobile devices. The cart icon automatically adapts to smaller screens while maintaining functionality and readability across all device types.