Callout Icons Widget for BigCommerce Page Builder¶

Description¶

The Callout Icons Widget displays icons with descriptive text, commonly used to highlight features, services, or USPs (Unique Selling Points).

Page Builder Name: Callout Icons | PapaThemes Beautify

Version: 1.0.0

Features¶

• ✅ SVG icons with sprite
• ✅ Link support
• ✅ Inline editing
• ✅ Customizable colors
• ✅ Responsive layout

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Callout Icons | PapaThemes Beautify widget to the page
3. Widget displays with default icons

2. Configuration¶

Icon Settings¶

SVG Sprite¶

Widget uses SVG sprite injection:

SVGSpriteInject(iconUrl, {
    onInjected: (el) => {
        el.setAttribute('style', 'display:none');
    }
});

Benefits¶

• Load once, use multiple times
• Optimized performance
• Can style with CSS

Link Behavior¶

When a link is configured:

// Click handler
el.addEventListener('click', () => {
    if (!editMode) {
        window.location = el.dataset.link;
    }
});

• Does not navigate in Edit Mode
• Navigates normally in preview/live

Usage Examples¶

USP Bar¶

Icon 1: Free Shipping - Free shipping on orders over $50
Icon 2: 24/7 Support - Support available 24/7
Icon 3: Secure Payment - Safe and secure checkout
Icon 4: Easy Returns - 30-day return policy

Service Features¶

Icon 1: Fast Delivery - 2-hour delivery available
Icon 2: Quality Products - Premium quality guaranteed
Icon 3: Best Price - Price match guarantee

Styling¶

CSS Classes¶

.callout-icons {
    display: flex;
    justify-content: center;
}

.callout-icon-item {
    text-align: center;
    padding: 20px;
}

.callout-icon-item svg {
    width: 48px;
    height: 48px;
}

Inline Editing¶

1. Enable Edit Mode
2. Click on callout item
3. Edit:
4. Title
5. Description
6. Link
7. Save changes

Notes¶

1. Icons: Use icons from available sprite
2. Responsive: Check layout on mobile
3. Links: Ensure URLs are valid
4. Edit mode: Links don't work while editing
5. Accessibility: Add appropriate alt text