Responsive Widget¶

Description¶

The Responsive Widget allows showing/hiding content based on screen size. In Page Builder Edit Mode, content always displays for easy editing.

Page Builder Name: Responsive | PapaThemes

Version: 1.0.0

Features¶

• ✅ Show/hide by breakpoints
• ✅ Edit mode visibility
• ✅ Lightweight (no jQuery)
• ✅ CSS-based responsive
• ✅ Page Builder integration

How to Use¶

1. Add Widget¶

1. Open Page Builder
2. Drag Responsive | PapaThemes widget to the page
3. Add content inside

2. Configuration¶

How It Works¶

CSS Classes¶

<div class="PapathemesWidgetResponsive">
    <!-- Content -->
</div>

Edit Mode Class¶

function show() {
    document.querySelectorAll('.PapathemesWidgetResponsive')
        .forEach(el => el.classList.add('_editMode'));
}

function hide() {
    document.querySelectorAll('.PapathemesWidgetResponsive')
        .forEach(el => el.classList.remove('_editMode'));
}

Page Builder Integration¶

function onMessage(event) {
    let data = JSON.parse(event.data);

    if (data.action === 'toggle-edit-mode' &&
        data.initiator === 'PAGE_BUILDER') {
        if (data.editMode) {
            show();
        } else {
            hide();
        }
    }
}

window.addEventListener('message', onMessage);

Responsive CSS¶

Desktop Only¶

.PapathemesWidgetResponsive._desktop-only {
    display: block;
}

@media (max-width: 800px) {
    .PapathemesWidgetResponsive._desktop-only {
        display: none;
    }
}

/* Always show in edit mode */
.PapathemesWidgetResponsive._desktop-only._editMode {
    display: block !important;
}

Mobile Only¶

.PapathemesWidgetResponsive._mobile-only {
    display: none;
}

@media (max-width: 550px) {
    .PapathemesWidgetResponsive._mobile-only {
        display: block;
    }
}

Tablet Only¶

.PapathemesWidgetResponsive._tablet-only {
    display: none;
}

@media (min-width: 551px) and (max-width: 800px) {
    .PapathemesWidgetResponsive._tablet-only {
        display: block;
    }
}

Edit Mode Behavior¶

In Page Builder¶

• All content visible
• _editMode class added
• Can edit all breakpoints

In Preview/Live¶

• Content shows/hides per configuration
• _editMode class removed
• Responsive rules apply

Initialization¶

window.PapathemesWidgetResponsiveInit = () => {
    if (window.BigCommerce && window.BigCommerce.inlineEditor) {
        show(); // In Page Builder
    } else {
        hide(); // Preview/Live
    }

    // Prevent duplicate initialization
    if (window.PapathemesWidgetResponsive__onMessageInitialized) {
        return;
    }

    window.PapathemesWidgetResponsive__onMessageInitialized = true;
    window.addEventListener('message', onMessage);
};

Use Cases¶

Different Content per Device¶

Desktop: Full featured content
Tablet: Simplified version
Mobile: Minimal, essential content

Mobile-Specific Elements¶

- Mobile menu trigger
- App download banner
- Touch-friendly buttons

Desktop-Specific Elements¶

- Hover-dependent features
- Complex layouts
- Large media

Usage Examples¶

Desktop Banner, Mobile Image¶

<!-- Desktop version -->
<div class="PapathemesWidgetResponsive _desktop-only">
    <video src="hero-video.mp4" autoplay muted loop></video>
</div>

<!-- Mobile version -->
<div class="PapathemesWidgetResponsive _mobile-only">
    <img src="hero-mobile.jpg" alt="">
</div>

Different Navigation¶

<!-- Desktop nav -->
<div class="PapathemesWidgetResponsive _desktop-only">
    <!-- Full mega menu -->
</div>

<!-- Mobile nav -->
<div class="PapathemesWidgetResponsive _mobile-only">
    <!-- Hamburger menu -->
</div>

Breakpoints¶

Performance¶

Benefits¶

• CSS-based hiding (fast)
• No layout shift
• Minimal JavaScript

Considerations¶

• Hidden elements still load
• Use for layout, not large media
• Consider lazy loading

Best Practices¶

DO¶

• Use for layout variations
• Keep content synchronized
• Test all breakpoints
• Use CSS media queries when possible

DON'T¶

• Hide large videos/images (still download)
• Duplicate critical content
• Forget to test mobile
• Over-complicate layouts

Notes¶

1. Edit mode: Content always visible when editing
2. Download: Hidden content still downloads
3. SEO: Hidden content still indexed
4. Testing: Test on real devices
5. CSS preference: Prefer CSS media queries when possible
6. Duplicate init: Widget automatically prevents duplicate