كيف أظهرت عدد زوار المتجر داخل صفحات المنتجات لزيادة المبيعات

يحتاج العميل دائمًا إلى حافز يمنحه الثقة بالمتجر ويشجعه على إتمام عملية الشراء، لذلك فكّرت في إظهار عدد زوار صفحات المتجر داخل صفحة المنتج، بحيث يظهر إشعار يوضح أن عددًا كبيرًا من الزوار يشاهدون هذه الصفحة في الوقت الفعلي.

يُعد هذا تعديلًا بسيطًا، لكنه يترك أثرًا قويًا لدى العميل، إذ يشعره بأن المتجر يحظى بإقبال واهتمام من عدد كبير من العملاء.

لذلك، في هذا المقال سأشارك معكم تجربتي في إظهار عدد زوار المتجر داخل صفحات المنتجات، مع أفضل الخيارات التي ساعدتني على تفعيل هذه الميزة وتخصيصها بالشكل الذي يضمن تحقيق أكبر استفادة ممكنة منها.

كيف أظهرت عدد زوار المتجر على صفحات شوبيفاي

في البداية، بدأت بالبحث عن تطبيقات تساعدني على تفعيل هذه الميزة مباشرةً على المتجر، وبالفعل جرّبت العديد من التطبيقات مثل Trafficly - Visitors Counter، وAppRoom Visitor Counter Pro، وLive Visitors Counter، وغيرها العديد.

لكن بعد اختبار هذه التطبيقات، وجدتها لا تلبي الغرض المطلوب بشكل كافٍ، سواء بسبب ضعف خيارات التخصيص في المظهر، أو في طريقة عرض عداد الزوار نفسها، أو بسبب التكلفة المرتفعة والمبالغ فيها.

لذلك، قررت تفعيل هذه الميزة عبر إضافة كود Liquid مخصص إلى القالب، يتيح لي الإمكانيات التي أحتاج إليها تحديدًا، وسأشارك معكم الكود النهائي في الفقرات التالية.

المرحلة الأولى: إنشاء مكوّن عداد الزوار (Snippet)

في البداية، نحتاج إلى إنشاء المكوّن (Component) الذي سيعرض العداد داخل صفحة المنتج. للقيام بذلك، توجه إلى إعدادات قالب المتجر، ثم اضغط على "Edit Code" من قائمة الإعدادات، كما هو موضح في الصورة التالية:

بعد ذلك، أضف Snippet جديدًا مخصصًا للإضافة. لذلك، اختر قائمة Snippets من القائمة الجانبية، ثم اضغط على أيقونة "New File"، لإنشاء ملف جديد كما هو موضح في الصورة التالية:

بعدها، حدّد اسم المكوّن ليكون كالتالي: "visitor-counter.liquid".

ثم في محتوى Snippet، أضف الكود التالي:

<style>
  .live_visitors {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-left: 13px;
    color: {{ block.settings.counter_text_color }};
    font-family: {{ block.settings.counter_font_family }};
    font-size: {{ block.settings.counter_font_size }}px;
  }

  .live_visitors::before {
    position: absolute;
    display: inline-block;
    content: "";
    width: 8px;
    height: 8px;
    margin-left: -14px;
    top: 0.6em;
    border-radius: 100%;
    background: currentColor;
    box-shadow: 0 0 0 0 {{ block.settings.counter_dot_color }};
    animation: pulse-blue 2s infinite;
  }

  @keyframes pulse-blue {
    0% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 {{ block.settings.counter_dot_color | color_modify: 'alpha', 0.7 }};
    }
    70% {
      transform: scale(1);
      box-shadow: 0 0 0 10px {{ block.settings.counter_dot_color | color_modify: 'alpha', 0 }};
    }
    100% {
      transform: scale(0.95);
      box-shadow: 0 0 0 0 {{ block.settings.counter_dot_color | color_modify: 'alpha', 0 }};
    }
  }
</style>

<p class="live_visitors no-js-hidden">
  <span id="visitors_count"></span> {{ block.settings.counter_text }}
</p>

<script>
  const maxVisitors = {{ block.settings.max_visitors }};
  const minVisitors = {{ block.settings.min_visitors }};
  const delay = {{ block.settings.update_delay }};
  const visitorsEl = document.getElementById("visitors_count");

  if (visitorsEl) {
    function updateVisitors() {
      const visitorsCount = Math.floor(Math.random() * (maxVisitors - minVisitors + 1) + minVisitors);
      visitorsEl.textContent = visitorsCount;
    }

    updateVisitors(); // أول مرة
    setInterval(updateVisitors, delay);
  }
</script>

بعد إضافة الكود، اضغط على زر "Save" لحفظ الإعدادات ونشر Snippet عداد الزوار على المتجر.

المرحلة الثانية: إضافة إعدادات التخصيص داخل لوحة تحكم شوبيفاي

في هذه المرحلة، نحتاج إلى تعريف الإعدادات التي يمكن تعديلها مباشرة من لوحة تحكم شوبيفاي، بدلاً من تعديلها عبر الكود البرمجي، مثل عدد الزوار، الألوان، النص، والخط.

للقيام بذلك، توجه إلى قسم صفحة المنتج الرئيسية من خلال اختيار تبويب Sections > main-product.liquid.

بعد ذلك، ابحث عن الدالة ("type": "inventory")، ثم أضف سطرًا جديدًا أعلاها مباشرة.

بعدها أضف الكود التالي:

{
      "type": "visitor-counter",
      "name": "Visitor Counter",
      "limit": 1,
      "settings": [
    {
      "type": "header",
      "content": "Visitor Counter Settings"
    },
    {
      "type": "number",
      "id": "min_visitors",
      "label": "Minimum Visitors",
      "default": 500
    },
    {
      "type": "number",
      "id": "max_visitors",
      "label": "Maximum Visitors",
      "default": 600
    },
    {
      "type": "number",
      "id": "update_delay",
      "label": "Update Delay (milliseconds)",
      "default": 4000
    },
    {
      "type": "text",
      "id": "counter_text",
      "label": "Counter Text",
      "default": "People are viewing right now."
    },
    {
      "type": "color",
      "id": "counter_text_color",
      "label": "Text Color",
      "default": "#000000"
    },
    {
      "type": "color",
      "id": "counter_dot_color",
      "label": "Indicator Dot Color",
      "default": "#21b646"
    },
    {
      "type": "select",
      "id": "counter_font_family",
      "label": "Font Family",
      "options": [
        {
          "value": "inherit",
          "label": "Theme Default"
        },
        {
          "value": "Arial, sans-serif",
          "label": "Arial"
        },
        {
          "value": "'Helvetica Neue', Helvetica, Arial, sans-serif",
          "label": "Helvetica"
        },
        {
          "value": "Georgia, serif",
          "label": "Georgia"
        },
        {
          "value": "'Times New Roman', Times, serif",
          "label": "Times New Roman"
        },
        {
          "value": "monospace",
          "label": "Monospace"
        }
      ],
      "default": "inherit"
    },
    {
      "type": "number",
      "id": "counter_font_size",
      "label": "Font Size (px)",
      "default": 16
    }
  ]
    },

بعد إضافة الكود بشكل صحيح، اضغط على زر Save لحفظ التعديلات على المتجر.

المرحلة الثالثة: ربط المكوّن بصفحة المنتج

في المرحلة الثالثة، نحتاج إلى تفعيل المكوّن على المتجر حتى يظهر العداد في صفحة المنتجات. للقيام بذلك، ومن نفس صفحة main-product.liquid، ابحث عن الدالة ({%- when 'inventory' -%})، ثم أضف سطرًا جديدًا قبلها مباشرة.

بعد ذلك أضف الكود التالي:

{%- when 'visitor-counter' -%}
{% render 'visitor-counter' block: block %}

بعد إضافة الكود، نضغط على زر "Save" لحفظ التعديلات على صفحة المنتج على المتجر.

المرحلة الرابعة: تخصيص مظهر وإعدادات عداد الزوار

الخطوة الأخيرة، بعد إضافة وتفعيل عداد الزوار على المتجر، نحتاج إلى تحديد موضع ظهوره المناسب في صفحة المنتجات. للقيام بذلك، نتوجه إلى تخصيص صفحة المنتج على القالب.

بعد ذلك، نحدد الموضع المناسب لظهور العداد ونضغط على زر "Add" على سبيل المثال: أسفل سعر المنتج، ثم نختار بلوك Visitor Counter الذي تم إنشاؤه في الخطوات السابقة.

ثم يمكنك التحكم في عداد الزوار من خلال الإعدادات التالية:

1. Minimum Visitors: الحد الأدنى لعدد الزوار الذي يظهر في الصفحة.
2. Maximum Visitors: الحد الأقصى لعدد الزوار الذي يظهر في الصفحة.
3. Update Delay: معدل تغيير عدد الزوار في الصفحة.

بعد ضبط هذه الإعدادات، سيقوم العداد تلقائيًا باختيار رقم عشوائي بين الحد الأدنى والأقصى ويعرضه في صفحة المنتج، مع تحديثه دوريًا.

بعد ذلك، يمكنك التحكم أيضًا في مظهر قسم عداد الزوار، مثل: المحتوى النصي، لون الخط، الأيقونة، نوع الخط، الحجم، وغير ذلك، حتى يتوافق تمامًا مع هوية متجرك.

بعد الانتهاء من ضبط كافة الإعدادات، اضغط على زر "Save" ليتم حفظها وتطبيقها على متجرك.

الآن، عند التوجه إلى أحد منتجات المتجر، سيظهر عدد الزوار كما هو موضح في الصورة التالية:

بعد تطبيق ميزة عرض عدد الزوار داخل صفحة المنتج، لاحظت تأثيرًا إيجابيًا على ثقة العملاء ومعدّل التحويل. فرؤية عدد من الأشخاص يتصفحون نفس المنتج تعزز شعور الزائر بأن هذا المنتج محل اهتمام حقيقي، مما يشجعه على اتخاذ قرار الشراء بسرعة.

ورغم أن هذا التعديل بسيط، إلا أنه أضاف قيمة واضحة لتجربة المستخدم، وساعدني على تحقيق نتائج ملموسة في أداء المتجر خلال فترة سريعة جدًا.