Skip to content

Cart Icon

Overview

Section titled “Overview”

A cart icon widget that displays in the site header or navigation area. Shows the current number of items in the customer’s cart and opens the cart overlay when clicked. The cart is managed by BigCommerce’s backend, with this block providing the UI in WordPress®.

Requirements

Section titled “Requirements”
  • Parent block: None (can be placed anywhere)
  • BigCommerce data: Customer cart state, item count

Configuration

Section titled “Configuration”

Attributes

Section titled “Attributes”
  • settingsId (string) - Settings configuration identifier
    • Default: ""
  • align (string) - Block alignment
    • Default: "full"

Block Support

Section titled “Block Support”
  • HTML editing: Not supported
  • Alignment: Full width supported

Usage

Section titled “Usage”

Placement

Section titled “Placement”

This block is typically placed in the site header or navigation template. It can be added to any template or page where you want cart access.

Common Patterns

Section titled “Common Patterns”

From the demo video script, the cart icon appears in the header pattern:

[Site Header]
  Logo | Navigation | Search | → Cart Icon ←

When a customer:

  1. Clicks the cart icon → Cart overlay opens showing items
  2. Adds a product → Cart icon updates with new item count in real-time
  3. Views cart → Can review items, adjust quantities, proceed to checkout

The cart overlay is automatically styled to match the site’s brand colors and fonts.

Technical Details

Section titled “Technical Details”

CSS Classes

Section titled “CSS Classes”
  • commerce-connect-block - Base block class
  • cart-icon-blocks - Specific block identifier
  • alignwide - Alignment class
  • ecom-root - Commerce Connect root element

Data Attributes

Section titled “Data Attributes”

The block includes several data attributes for JavaScript functionality:

  • data-commerce-connect-block="cartIcon" - Block type identifier
  • data-commerce-connect-id - Unique block instance ID
  • data-commerce-connect-settings - Settings JSON
  • data-commerce-connect-payload - Initial cart state
  • data-commerce-connect-filters - Filter configuration

Data Source

Section titled “Data Source”

The cart icon communicates directly with the BigCommerce backend to:

  • Fetch current cart item count
  • Retrieve cart contents when opened
  • Update cart state when items are added/removed

Cart data is managed by BigCommerce’s API, not stored in WordPress®. This ensures:

  • Real-time inventory and pricing
  • Secure cart management
  • Proper tax and shipping calculations
  • Support for digital wallets (Apple Pay, Google Pay)

Troubleshooting

Section titled “Troubleshooting”

Cart icon not appearing

Section titled “Cart icon not appearing”
  • Verify the BigCommerce connection is active
  • Check that the block is included in the header template
  • Ensure JavaScript is not blocked or erroring

Item count not updating

Section titled “Item count not updating”
  • Check browser console for JavaScript errors
  • Verify network requests to BigCommerce API are succeeding
  • Clear browser cache and reload
  • Check that cart session is valid

Cart overlay not opening

Section titled “Cart overlay not opening”
  • Verify JavaScript is loaded and executing
  • Check for conflicting scripts or CSS
  • Test in different browsers to rule out browser-specific issues
  • Inspect console for error messages

Styling issues

Section titled “Styling issues”
  • Cart styling inherits from site theme colors and fonts
  • Commerce Connect plugin automatically applies brand styling to cart overlay
  • Custom CSS can be applied to .commerce-connect-block.cart-icon-blocks for additional customization