بناء صفحة الأسئلة الشائعة بفاعلية لتسهيل خدمة العملاء

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

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

الخطوات العملية لإنشاء صفحة FAQ على شوبيفاي

في البداية، بدأتُ بتجميع الأسئلة المتكررة من العملاء عبر فريق الدعم الفني، وهنا تفاجأت بوجود عدد كبير من الأسئلة المتكررة يوميًا، ذات إجابات مباشرة وثابتة، مثل: هل يمكن استرجاع المنتج؟ وما هي خيارات الدفع المتاحة؟ وغيرها الكثير.

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

1- إنشاء صفحة FAQ

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

لذلك، توجّهت إلى لوحة تحكم شوبيفاي لإنشاء صفحة جديدة، وذلك من خلال اختيار Online Store من القائمة الجانبية، ثم الدخول إلى قسم Pages، وبعدها الضغط على Add Page لإنشاء صفحة جديدة.

بعد ذلك، حدّدت اسم الصفحة "FAQ"، ثم اخترت خيار Visible من تبويب Visibility لنشر الصفحة على المتجر، وأخيرًا ضغطت على Save لحفظ الإعدادات.

2- تخصيص صفحة الأسئلة الشائعة

الآن، توجّهت إلى إعدادات القالب في المتجر عبر المسار Online Store >> Themes، ثم الضغط على زر Edit Theme.

بعد ذلك، انتقلت من الشريط العلوي إلى صفحة الأسئلة الشائعة (FAQ) التي تم إنشاؤها في الخطوة السابقة، كما هو موضح في الصورة التالية:

ثم أضفت قسمًا جديدًا للأسئلة الشائعة من خلال الضغط على زر Add Section، واختيار قسم مخصص للأسئلة الشائعة مثل Collapsible content.

بعد ذلك، بدأت بتخصيص محتوى القسم، حيث حدّدت العنوان ليكون "الأسئلة الشائعة"، وعدّلت اتجاه الكتابة وحجم النص بما يتناسب مع قالب المتجر.

كما قمت بتعديل مظهر القسم من تبويب Layout، وفعّلت خيار Open first row لفتح السؤال الأول تلقائيًا عند دخول الصفحة.

بعد ذلك، بدأت بإضافة الأسئلة تدريجيًا من خلال اختيار قسم السؤال، ثم إدخال السؤال والإجابة، مع إمكانية تعديل مظهر الأيقونة الجانبية كما هو موضح في الصورة التالية:

وفي حال الرغبة في إضافة المزيد من الأسئلة، يمكن الضغط على زر Add Collapsible row لإضافة سطر جديد، ثم متابعة إدراج باقي الأسئلة تدريجيًا.

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

3- تطوير قسم الأسئلة الشائعة على قالب المتجر

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

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

بعد ذلك، فتحت مجلد Sections، ثم أنشأت ملفًا جديدًا عبر خيار New File، وقمت بتسميته Faq-Section.liquid (مع إمكانية اختيار اسم آخر، بشرط أن يكون بامتداد .liquid).

ثم أضف الكود التالي مباشرة داخل الملف.

{% comment %}
<!-- Designed by code Ahmed Abbas -->
{% endcomment %}

<style>
  .code-faq-section {
    width: 100%;
    padding: calc({{ section.settings.top_padding }}px * {{ section.settings.size_multiplier }})
            calc(1rem * {{ section.settings.size_multiplier }})
            calc({{ section.settings.bottom_padding }}px * {{ section.settings.size_multiplier }})
            calc(1rem * {{ section.settings.size_multiplier }});
    font-family: var(--font-body-family);
    direction: inherit;
    background-color: {{ section.settings.bg_color }};
  }

  @media (min-width: 768px) {
    .code-faq-section {
      padding: calc({{ section.settings.top_padding }}px * {{ section.settings.size_multiplier }})
              calc(2rem * {{ section.settings.size_multiplier }})
              calc({{ section.settings.bottom_padding }}px * {{ section.settings.size_multiplier }})
              calc(2rem * {{ section.settings.size_multiplier }});
    }
  }

  .code-container {
    max-width: calc(56rem * {{ section.settings.size_multiplier }});
    margin: 0 auto;
  }

  .code-header {
    text-align: center;
    margin-bottom: calc(2.5rem * {{ section.settings.size_multiplier }});
  }

  .code-heading {
    font-size: calc(1.875rem * {{ section.settings.heading_size_multiplier }});
    font-weight: 700;
    margin-bottom: calc(1rem * {{ section.settings.size_multiplier }});
    color: {{ section.settings.heading_color }};
  }

  .code-subheading {
    font-size: calc(1rem * {{ section.settings.subheading_size_multiplier }});
    opacity: 0.75;
    margin-bottom: calc(1.5rem * {{ section.settings.size_multiplier }});
    color: {{ section.settings.subheading_color }};
  }

  .code-faq-item {
    border: 1px solid {{ section.settings.border_color }};
    border-radius: calc(0.5rem * {{ section.settings.size_multiplier }});
    overflow: hidden;
    background: {{ section.settings.item_bg }};
  }

  .code-question-button {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: calc(1rem * {{ section.settings.size_multiplier }});
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: inherit;
  }

  .code-question {
    font-size: calc(0.95rem * {{ section.settings.size_multiplier }});
    font-weight: 600;
    color: {{ section.settings.question_color }};
  }

  .code-toggle-icon {
    font-size: 1.4rem;
    color: {{ section.settings.icon_color }};
    transition: transform 0.3s ease;
  }

  .code-faq-item.active .code-toggle-icon {
    transform: rotate(45deg);
  }

  .code-answer-container {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    padding: 0 calc(1rem * {{ section.settings.size_multiplier }});
    background: {{ section.settings.answer_bg }};
  }

  .code-faq-item.active .code-answer-container {
    max-height: 1000px;
    opacity: 1;
    padding: calc(1rem * {{ section.settings.size_multiplier }});
  }

  .code-answer {
    font-size: calc(1rem * {{ section.settings.size_multiplier }});
    color: {{ section.settings.answer_color }};
  }

  .is-rtl {
    direction: rtl;
    text-align: right;
  }

  .is-ltr {
    direction: ltr;
    text-align: left;
  }
</style>

<section
  class="code-faq-section {% if section.settings.text_direction == 'rtl' %}is-rtl{% else %}is-ltr{% endif %}"
  id="shopify-section-{{ section.id }}"
  dir="{{ section.settings.text_direction }}"
>
  <div class="code-container">

    <div class="code-header">
      {% if section.settings.heading != blank %}
        <h2 class="code-heading">{{ section.settings.heading }}</h2>
      {% endif %}

      {% if section.settings.subheading != blank %}
        <p class="code-subheading">{{ section.settings.subheading }}</p>
      {% endif %}
    </div>

    <div class="code-faq-container">
      {% for block in section.blocks %}
        {% if block.type == 'faq_item' %}
          <div class="code-faq-item" {{ block.shopify_attributes }}>

            <button type="button" class="code-question-button">
              <span class="code-question">{{ block.settings.question }}</span>
              <span class="code-toggle-icon">+</span>
            </button>

            <div class="code-answer-container">
              <div class="code-answer">
                {{ block.settings.answer }}
              </div>
            </div>

          </div>
        {% endif %}
      {% endfor %}
    </div>

  </div>
</section>

<script>
(function () {
  function initFAQ(section) {
    if (!section) return;

    const items = section.querySelectorAll(".code-faq-item");

    items.forEach((item) => {
      const btn = item.querySelector(".code-question-button");

      if (!btn) return;

      btn.addEventListener("click", function () {
        const isActive = item.classList.contains("active");

        items.forEach((el) => el.classList.remove("active"));

        if (!isActive) item.classList.add("active");
      });
    });
  }

  function setup() {
    const section = document.getElementById("shopify-section-{{ section.id }}");
    initFAQ(section);
  }

  document.addEventListener("DOMContentLoaded", setup);
  document.addEventListener("shopify:section:load", setup);
})();
</script>

{% schema %}
{
  "name": "code faq",
  "settings": [
    { "type": "text", "id": "heading", "label": "Heading", "default": "FAQ" },
    { "type": "text", "id": "subheading", "label": "Subheading", "default": "Write your questions here" },

    { "type": "select", "id": "text_direction", "label": "Text Direction", "default": "rtl",
      "options": [
        { "value": "rtl", "label": "RTL" },
        { "value": "ltr", "label": "LTR" }
      ]
    },

    { "type": "color", "id": "bg_color", "label": "Background", "default": "#ffffff" },
    { "type": "color", "id": "heading_color", "label": "Heading Color", "default": "#000000" },
    { "type": "color", "id": "subheading_color", "label": "Subheading Color", "default": "#666666" },
    { "type": "color", "id": "border_color", "label": "Border Color", "default": "#e5e5e5" },
    { "type": "color", "id": "item_bg", "label": "Item Background", "default": "#ffffff" },
    { "type": "color", "id": "question_color", "label": "Question Color", "default": "#000000" },
    { "type": "color", "id": "answer_color", "label": "Answer Color", "default": "#444444" },
    { "type": "color", "id": "answer_bg", "label": "Answer Background", "default": "#f9f9f9" },
    { "type": "color", "id": "icon_color", "label": "Icon Color", "default": "#000000" },

    { "type": "range", "id": "top_padding", "min": 0, "max": 120, "step": 5, "default": 50, "label": "Top padding" },
    { "type": "range", "id": "bottom_padding", "min": 0, "max": 120, "step": 5, "default": 50, "label": "Bottom padding" },
    { "type": "range", "id": "size_multiplier", "min": 0.8, "max": 3.0, "step": 0.1, "default": 1.2, "label": "Size" },
    { "type": "range", "id": "heading_size_multiplier", "min": 0.8, "max": 2.0, "step": 0.1, "default": 1.3, "label": "Heading size" },
    { "type": "range", "id": "subheading_size_multiplier", "min": 0.8, "max": 2.0, "step": 0.1, "default": 1.0, "label": "Subheading size" }
  ],

  "blocks": [
    {
      "type": "faq_item",
      "name": "FAQ Item",
      "settings": [
        { "type": "text", "id": "question", "label": "Question" },
        { "type": "richtext", "id": "answer", "label": "Answer" }
      ]
    }
  ],

  "presets": [
    {
      "name": "code faq"
    }
  ]
}
{% endschema %}

بعد إضافة الكود، أضغط على زر Save لحفظ القسم وإضافته إلى القالب.

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

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

بعد ذلك أبدأ بإضافة الأسئلة الشائعة وإجاباتها تدريجيًا، ليظهر الشكل النهائي كما هو موضح في الصورة التالية:

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

الخاتمة

صفحة الأسئلة الشائعة FAQ ليست مجرد صفحة عادية داخل المتجر، بل هي أداة فعّالة لتقليل الضغط على خدمة العملاء وتوفير وقت كبير كان يُستهلك في الرد على الأسئلة المتكررة. كلما كانت الصفحة واضحة ومنظمة وتجيب بشكل مباشر على استفسارات العملاء، قلّ عدد الرسائل الواردة وزادت سرعة تجربة الشراء بشكل ملحوظ.

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