Shopify Installation Guide

Step 1: Access Shopify Theme Editor

In your Shopify admin panel, go to:

Online Store → Themes → Click "Actions" → "Edit code"

Step 2: Open theme.liquid File

In the theme editor, find and open the "theme.liquid" file (usually located in the "Layout" folder).

This file controls the layout for all pages in your store.

Step 3: Find the Closing </body> Tag

Scroll down in the theme.liquid file and find the closing </body> tag near the end of the file.

The code should be placed just before this tag.

Step 4: Copy and Paste the Code

Copy the code below and paste it just before the </body> tag:

<!-- LiveChat Chat Widget - Shopify Integration -->
<script>
    // Defer loading of LiveChat widget until page is fully loaded
    (function() {
        function loadLiveChatWidget() {
            // Load CSS dynamically
            var cssLink = document.createElement('link');
            cssLink.rel = 'stylesheet';
            cssLink.href = 'https://poplivechat.com/css/chat-widget.css';
            cssLink.media = 'all';
            document.head.appendChild(cssLink);
            
            // Load JS dynamically
            var jsScript = document.createElement('script');
            jsScript.src = 'https://poplivechat.com/js/chat-widget.js';
            jsScript.async = true;
            jsScript.onload = function() {
                // Initialize chat widget after script loads
                window.LiveChatWidget.init({
                    companyId: 'YOUR_COMPANY_ID',
                    buttonText: '💬 Chat Now',
                    buttonPosition: 'bottom-right',
                    primaryColor: '#667eea'
                });
            };
            document.body.appendChild(jsScript);
        }
        
        // Wait for full page load before loading chat widget
        if (window.addEventListener) {
            window.addEventListener('load', loadLiveChatWidget, false);
        } else if (window.attachEvent) {
            window.attachEvent('onload', loadLiveChatWidget);
        } else {
            window.onload = loadLiveChatWidget;
        }
    })();
</script>

⚠️ Important: Replace YOUR_COMPANY_ID with your actual Account ID (e.g., XU22). The official domain is poplivechat.com.

Note: The code is already configured with your Account ID and will load after page content.

Step 5: Save and Test

Click the "Save" button at the bottom of the editor.

Visit your Shopify store and look for the chat button in the bottom-right corner. Click it to test!

Troubleshooting

Chat widget not appearing?

• Check that the code is placed before the </body> tag in theme.liquid
• Verify your Account ID is correct in the code
• Try clearing your browser cache
• Check browser console (F12) for JavaScript errors