This Floating Widget implementation allows you to add unlimited widgets to your Shopify store. You can configure them for banners, offers, announcements, videos, surveys, or any custom content. The widgets float on the page and come with settings like position, size, closeability, delay, and page-specific restrictions.

Features:

  1. Unlimited Widgets
    Add as many widgets as you need for banners, announcements, surveys, etc.

  2. Customizable Options

    • Change widget size and position.

    • Add delays before the widget appears.

    • Make the widget closeable or persistent.

  3. Page-Specific Widgets
    Limit widgets to specific pages to target your audience effectively.

  4. Interactive Content
    Embed videos, surveys, or announcements seamlessly.

Code Implementation:

Step 1: Add a New Customer Liquid Section

  1. Navigate to Online Store > Themes > Customize.

  2. Add a Customer Liquid block.

  3. Copy and paste the code below.

<!-- floating-widget.liquid -->
<div id="floating-widget-container"></div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    const widgetsConfig = [
      {
        id: 'widget1',
        content: `
          <div class="floating-widget" style="background: #f8e71c; color: #000;">
            <p>🔥 Special Offer: Get 20% off today! 🔥</p>
            <a href="/collections/all" style="color: #000; text-decoration: underline;">Shop Now</a>
          </div>
        `,
        position: { top: '20px', right: '20px' },
        closeable: true,
        delay: 2000,
        pages: ['/collections/all', '/'],
      },
      {
        id: 'widget2',
        content: `
          <div class="floating-widget" style="background: #007bff; color: #fff;">
            <video autoplay muted loop style="width: 200px;">
              <source src="https://cdn.shopify.com/s/files/video.mp4" type="video/mp4">
            </video>
          </div>
        `,
        position: { bottom: '20px', left: '20px' },
        closeable: false,
        delay: 5000,
        pages: ['/about-us'],
      },
    ];

    function isCurrentPageIn(pages) {
      return pages.some(page => window.location.pathname === page);
    }

    widgetsConfig.forEach((widget) => {
      if (!isCurrentPageIn(widget.pages)) return;

      const widgetElement = document.createElement('div');
      widgetElement.id = widget.id;
      widgetElement.innerHTML = widget.content;

      Object.assign(widgetElement.style, {
        position: 'fixed',
        zIndex: '1000',
        ...widget.position,
      });

      if (widget.closeable) {
        const closeButton = document.createElement('span');
        closeButton.textContent = '✖';
        closeButton.style.cssText = `
          position: absolute;
          top: 5px;
          right: 5px;
          cursor: pointer;
          color: #000;
        `;
        closeButton.onclick = () => widgetElement.remove();
        widgetElement.appendChild(closeButton);
      }

      setTimeout(() => {
        document.getElementById('floating-widget-container').appendChild(widgetElement);
      }, widget.delay);
    });
  });
</script>

<style>
  .floating-widget {
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    font-family: Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
  }
</style>

Parameters:

  1. id

    • Description: Unique identifier for the widget.

    • Type: String

    • Example: 'widget1', 'offer-banner'

    • Usage: Used to assign a unique id to the widget for tracking or manipulation.

  2. content

    • Description: HTML content of the widget. Can include text, images, videos, links, or other HTML elements.

    • Type: String (HTML)

    • Example:

    <div><p>Special offer!</p><a href="/shop">Shop Now</a></div>

    • Usage: Define the visual and functional elements of the widget.

  3. position

    • Description: Determines where the widget will appear on the page. Accepts CSS position properties like top, right, bottom, left.

    • Type: Object

    • Example: { top: '10px', right: '20px' }

    • Usage: Controls the fixed position of the widget.

  4. closeable

    • Description: Indicates whether the widget can be closed by the user.

    • Type: Boolean (true or false)

    • Example: true

    • Usage: If true, a close button (✖) is added to the widget.

  5. delay

    • Description: Delay in milliseconds before the widget is displayed.

    • Type: Number

    • Example: 3000 (3 seconds)

    • Usage: Allows timed display of the widget to avoid immediate appearance.

  6. pages

    • Description: Specifies which pages the widget will appear on.

    • Type: Array of Strings (page URLs)

    • Example: ['/home', '/collections/all']

    • Usage: Ensures the widget only appears on the listed pages.

Benefits of Parameters:

  1. Flexibility: Control widget behavior for different use cases.

  2. Targeting: Limit widgets to specific pages for precise messaging.

  3. User Experience: Delayed and closeable widgets prevent intrusive interruptions.

By combining these parameters, you can create highly customizable and engaging floating widgets that enhance user interaction and boost conversions. 🎉

For any issues or customization needs, feel free to reach out to us at 📧 tentech.ai.2023@gmail.com.