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

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

هل يحتوي Shopify على قائمة أمنيات مدمجة؟

لا. حتى عام 2026، لا يزال Shopify لا يتضمن ميزة قائمة الأمنيات في أي خطة — لا في Basic ولا في Plus. إما أن تبنيها بنفسك أو تثبّت تطبيقاً خارجياً.

ولهذا توجد هذه الكلمة المفتاحية. عشرات الآلاف من التجار يبحثون شهرياً عن “shopify wishlist without app” أملاً في إعداد خفيّ. لا يوجد شيء كهذا. لكن هناك أربع طرق معقولة لبنائها باستخدام Liquid وJavaScript وmetafields — لنستعرضها معاً.

الطريقة الأولى: قائمة أمنيات بـ localStorage (الأكثر شيوعاً يدوياً)

هذه هي الطريقة التي تعلّمها 90% من شروحات “قائمة الأمنيات المجانية”. تضيف زر قلب إلى بطاقات منتجاتك، وتحفظ بيانات المنتج في localStorage في المتصفح، ثم تعرض صفحة قائمة الأمنيات من تلك المصفوفة المخزَّنة.

المزايا: لا يتطلب تسجيل دخول. يعمل بدون اتصال. لا يحتاج إلى backend. حوالي 50 سطر من الكود.

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

الخطوة 1 — أضف زر قائمة الأمنيات إلى صفحة المنتج

افتح محرر كود القالب الخاص بك (Online Store → Themes → Edit code) وابحث عن مقتطف قالب المنتج (عادةً snippets/product-card.liquid أو داخل sections/main-product.liquid). الصق هذا الكود في المكان الذي تريد ظهور القلب فيه:

<button
  type="button"
  class="wishlist-btn"
  data-id="{{ product.id }}"
  data-handle="{{ product.handle }}"
  data-title="{{ product.title | escape }}"
  data-image="{{ product.featured_image | image_url: width: 400 }}"
  data-price="{{ product.price | money }}"
  aria-label="Add to wishlist">
  <span class="wishlist-icon">♡</span>
  <span class="wishlist-label">Save</span>
</button>

الخطوة 2 — اربط الـ JavaScript

أضف هذا الكود إلى assets/wishlist.js (أنشئ الملف) وضمّنه من theme.liquid باستخدام {{ 'wishlist.js' | asset_url | script_tag }}:

(function () {
  const KEY = 'shopify_wishlist_v1';
  const read = () => JSON.parse(localStorage.getItem(KEY) || '[]');
  const write = (list) => localStorage.setItem(KEY, JSON.stringify(list));

  function syncButton(btn, list) {
    const inList = list.some(i => i.id === btn.dataset.id);
    btn.classList.toggle('in-wishlist', inList);
    btn.querySelector('.wishlist-icon').textContent = inList ? '♥' : '♡';
    btn.querySelector('.wishlist-label').textContent = inList ? 'Saved' : 'Save';
  }

  function updateCount() {
    const count = read().length;
    document.querySelectorAll('.wishlist-count').forEach(el => {
      el.textContent = count;
      el.hidden = count === 0;
    });
  }

  document.querySelectorAll('.wishlist-btn').forEach(btn => {
    syncButton(btn, read());

    btn.addEventListener('click', () => {
      let list = read();
      const exists = list.find(i => i.id === btn.dataset.id);
      if (exists) {
        list = list.filter(i => i.id !== btn.dataset.id);
      } else {
        list.push({
          id: btn.dataset.id,
          handle: btn.dataset.handle,
          title: btn.dataset.title,
          image: btn.dataset.image,
          price: btn.dataset.price,
          addedAt: Date.now()
        });
      }
      write(list);
      syncButton(btn, list);
      updateCount();
    });
  });

  updateCount();
})();

الخطوة 3 — ابنِ صفحة قائمة الأمنيات

أنشئ صفحة جديدة في Online Store → Pages بعنوان “Wishlist” مع handle بقيمة wishlist. ثم أنشئ قالب templates/page.wishlist.liquid وقم بتعيينه لتلك الصفحة:

{% layout 'theme' %}

<div class="page-width wishlist-page">
  <h1>Your wishlist</h1>
  <div id="wishlist-grid" class="wishlist-grid"></div>
  <p id="wishlist-empty" hidden>
    Your wishlist is empty.
    <a href="{{ routes.collections_url }}/all">Browse products</a>.
  </p>
</div>

<script>
  (function () {
    const list = JSON.parse(localStorage.getItem('shopify_wishlist_v1') || '[]');
    const grid = document.getElementById('wishlist-grid');
    const empty = document.getElementById('wishlist-empty');

    if (!list.length) { empty.hidden = false; return; }

    grid.innerHTML = list.map(item => `
      <article class="wishlist-card">
        <a href="/products/${item.handle}">
          <img src="${item.image}" alt="${item.title}" loading="lazy">
          <h3>${item.title}</h3>
          <p>${item.price}</p>
        </a>
        <button data-id="${item.id}" class="wishlist-remove">Remove</button>
      </article>
    `).join('');

    grid.addEventListener('click', e => {
      const btn = e.target.closest('.wishlist-remove');
      if (!btn) return;
      const next = JSON.parse(localStorage.getItem('shopify_wishlist_v1'))
        .filter(i => i.id !== btn.dataset.id);
      localStorage.setItem('shopify_wishlist_v1', JSON.stringify(next));
      btn.closest('.wishlist-card').remove();
      if (!next.length) { grid.innerHTML = ''; empty.hidden = false; }
    });
  })();
</script>

هذه هي قائمة الأمنيات الكاملة بـ localStorage. إنها تعمل. كما أنها تعاني من معدّل تسرّب يتراوح بين 30 و50% للمتسوقين الذين يتنقّلون بين الأجهزة، ولا توفّر تحليلات، ولا يمكنك مراسلة أي شخص بالبريد الإلكتروني عند طرح ما يريده على التخفيض أو إعادة توفّره. وهذا ما يقودنا إلى الطريقة الثانية.

الطريقة الثانية: metafields العميل (المقاربة اليدوية “الصحيحة”)

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

المزايا: مزامنة عبر الأجهزة. بيانات حقيقية يمكنك الاستعلام عنها. تبقى رغم تنظيف المتصفح.

العيوب: يتطلب من العميل تسجيل الدخول (تسرّب فوري بين 60 و80% مقارنةً بالحالة المجهولة). الكتابة إلى metafields من واجهة المتجر تحتاج إلى Storefront API مع customer access token، أو App Proxy مع دالة serverless صغيرة. لا يوجد حل جاهز للنسخ واللصق — أنت ملتزم بعمل تطوير.

إعداد الـ metafield

اذهب إلى Settings → Custom data → Customers → Add definition:

• Namespace وkey: custom.wishlist
• النوع: JSON
• الوصول: Storefront read + write

إظهار حالة قائمة الأمنيات في Liquid

{% if customer %}
  {% assign wishlist_raw = customer.metafields.custom.wishlist.value | default: '[]' %}
  {% assign wishlist = wishlist_raw | parse_json %}

  <button
    class="wishlist-btn-meta"
    data-id="{{ product.id }}"
    data-customer="{{ customer.id }}">
    {% if wishlist contains product.id %}♥ Saved{% else %}♡ Save{% endif %}
  </button>
{% else %}
  <a href="{{ routes.account_login_url }}?return_url={{ request.path }}"
     class="wishlist-btn-logged-out">♡ Log in to save</a>
{% endif %}

الكتابة إلى الـ metafield

هنا تبدأ الأمور بالتعقّد. لا يسمح لك Storefront API بتعديل customer.metafields مباشرةً من JS مجهول الهوية — تحتاج إلى customer access token، أو App Proxy موثّق. معالج App Proxy بسيط (Node.js، منشور على Vercel أو Cloudflare Workers) يبدو كالتالي:

// /api/wishlist-toggle  (Shopify App Proxy)
export default async function handler(req) {
  const { customerId, productId } = await req.json();

  const query = `
    mutation updateWishlist($id: ID!, $value: String!) {
      customerUpdate(input: {
        id: $id,
        metafields: [{
          namespace: "custom",
          key: "wishlist",
          type: "json",
          value: $value
        }]
      }) {
        customer { id }
        userErrors { message }
      }
    }
  `;

  // 1. Fetch current list
  // 2. Toggle productId
  // 3. Send mutation to Admin API
  // 4. Return new state
}

التنفيذ الكامل يصل إلى نحو 200 سطر بمجرد التعامل مع المصادقة وحالات الأخطاء وتحديد المعدّل. وقت البناء الواقعي لمطوّر لم يفعل هذا من قبل: يوم إلى يومين. ولمن قام به سابقاً: من ساعتين إلى ثلاث ساعات.

الطريقة الثالثة: السلة المخفية مع خصائص عناصر الطلب (احفظ للاحقاً)

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

النسخة الوحيدة المقبولة نسبياً: خاصية “Saved for later” منفصلة في السلة، تعرضها خارج السلة الرئيسية، كما يلي:

<!-- in cart.liquid -->
{% assign saved = cart.attributes.saved_items | split: ',' %}
{% if saved.size > 0 %}
  <div class="saved-for-later">
    <h2>Saved for later</h2>
    {% for handle in saved %}
      {% assign p = all_products[handle] %}
      <a href="/products/{{ p.handle }}">{{ p.title }} — {{ p.price | money }}</a>
    {% endfor %}
  </div>
{% endif %}

إنه حلّ منقوص. خصائص السلة تختفي عند تفريغ السلة. تجاوزه.

الطريقة الرابعة: قائمة أمنيات قابلة للمشاركة بالرابط (الحيلة الاجتماعية)

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

// Build a share URL from the localStorage list
function getShareUrl() {
  const ids = JSON.parse(localStorage.getItem('shopify_wishlist_v1') || '[]')
    .map(i => i.id)
    .join(',');
  return `${location.origin}/pages/wishlist?items=${ids}`;
}

// On the wishlist page, hydrate from ?items=
const params = new URLSearchParams(location.search);
if (params.get('items')) {
  const ids = params.get('items').split(',');
  // Fetch each /products/{id}.js and render
  Promise.all(ids.map(id =>
    fetch(`/products/${id}.js`).then(r => r.json())
  )).then(renderWishlist);
}

مفيدة كـ إضافة للطريقة الأولى — تتيح للمتسوقين طريقة لمشاركة القوائم مع الأصدقاء أو إرسالها إلى أنفسهم. ليست قائمة أمنيات قائمة بذاتها.

الحكم الصريح: متى يكون النهج اليدوي كافياً، ومتى ينهار

النهج اليدوي يصلح إن استطعت الإجابة بـ نعم على الأسئلة الأربعة:

1. متجرك يحتوي على أقل من ~500 SKU (حتى تظل الصيانة اليدوية محتملة).
2. لا تهتم بالمزامنة عبر الأجهزة (أو أنك تفرض على العملاء إنشاء حسابات على أي حال).
3. لا تخطط لمراسلة العملاء بالبريد الإلكتروني عند خصم منتجات قائمة الأمنيات أو عودتها للمخزون.
4. لديك مطوّر في الفريق أو أنك مرتاح في تعديل Liquid بنفسك.

النهج اليدوي ينهار في اللحظة التي تريد فيها:

• مراسلة العميل بـ “منتج قائمة أمنياتك عاد إلى المخزون” — لأنك لا تعرف من يملك إدخال localStorage.
• استعادة قوائم الأمنيات المهجورة عبر SMS أو البريد الإلكتروني — المشكلة نفسها.
• عرض معدّل التحويل من قائمة الأمنيات في التحليلات — يمكنك إطلاق أحداث GA4، لكنك لا تستطيع ربطها بالإيرادات دون عمل خلفي.
• السماح للضيوف بالحفظ دون فرض إنشاء حساب، مع المزامنة لاحقاً عبر بريدهم عند تسجيل الدخول.
• تسليمها لمسؤول تسويق غير تقني ليديرها.

ليست هذه قيوداً نظرية. هذه هي الأسباب التي تجعل معظم المتاجر التي بدأت بنهج يدوي تنتقل إلى تطبيق خلال ستة أشهر.

ما هي التكلفة الفعلية لقائمة أمنيات يدوية (بصراحة)

يبحث الناس عن “without an app” بافتراض أن التطبيق هو الخيار الأغلى. لنتفحّص.

مطوّر يبني نسخة localStorage: من ساعتين إلى أربع ساعات. بسعر 75$ للساعة، يكون ذلك 150–300$، بدون أي تكلفة مستمرة. معقول.

مطوّر يبني نسخة metafield مع تنبيهات بريدية: من 8 إلى 16 ساعة. أي 600–1,200$، إضافةً إلى Klaviyo أو ما يماثلها لإرسال الرسائل فعلياً (20–45$ شهرياً). علاوةً على الصيانة في كل مرة يتحدّث فيها قالبك أو يغيّر Shopify امتدادات الدفع لديه.

تطبيق قائمة أمنيات منفصل + تطبيق back-in-stock منفصل + تطبيق preorder منفصل: عادةً 15–25$ شهرياً لكل تطبيق. أي 45–75$ شهرياً للميزات الثلاث.

تطبيق موحّد: فاتورة واحدة.

أو: احصل على الثلاثة في تطبيق واحد، مع خطة مجانية

إفصاح — نحن من نصنع Notify Me!، وقد بنيناه تحديداً لأن معظم المتاجر تحتاج إلى wishlist + back-in-stock + preorder معاً. يحفظ العميل منتجاً ← ينفد من المخزون ← يتلقّى إشعاراً ← إن لم يعد أبداً، تعرض عليه preorder. ثلاث ميزات تنتمي لبعضها البعض.

كيف يبدو الإعداد فعلياً

تُفعّل الميزات لكل صفحة (المنتج، التشكيلة، الرئيسية) من لوحة التحكم — دون أي كود قالب يحتاج إلى صيانة:

شاشة Wishlist في Notify Me! — وضع الضيف مُفعّل افتراضياً، وتُربط قائمة الأمنيات بحساب العميل لحظة تسجيل دخوله. لا حاجة إلى تعديل الكود.

زر صفحة المنتج — قابل للتخصيص بالكامل

اختر أيقونة قلب أو إشارة مرجعية أو نجمة. عدّل تسميتي الحالتين. تظهر الأداة بجوار زر Add-to-Cart مباشرةً:

إعدادات زر صفحة المنتج — اضبط التسمية قبل وبعد الحفظ، والأيقونة، والنمط دون لمس Liquid.

أداة صفحة التشكيلة — تعمل على كل بطاقة منتج

حيث تتعثّر الطرق اليدوية أكثر: وضع زر حفظ يعمل على كل مربّع في صفحة التشكيلة. التطبيق يعالج ذلك عبر مفتاح واحد:

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

الأسعار (الفوترة السنوية)

تفاصيل الخطط كاملةً على صفحة الأسعار. توجد خطة Lite المجانية حتى يمكنك اختبارها فعلاً على متجرك قبل دفع أي شيء. معظم المتاجر تبقى على خطة Starter على المدى الطويل — 15.92$ شهرياً تحلّ محل ثلاثة تطبيقات كنت ستثبّتها بشكل منفصل.

ميزات لا تستطيع النسخ اليدوية أعلاه مجاراتها:

• وضع الضيف (دون فرض تسجيل دخول) — تُربط قائمة الأمنيات تلقائياً بالحساب عند أول تسجيل دخول
• قوائم متعدّدة مُسمّاة لكل عميل
• أدوات قائمة الأمنيات في الصفحة الرئيسية وصفحة التشكيلة وصفحة المنتج
• تنبيهات تلقائية بالبريد الإلكتروني وSMS عند انخفاض السعر، أو شُح المخزون، أو إعادة التوفّر
• أزرار preorder مدمجة ومدفوعات جزئية
• تخصيص كامل بـ Liquid لمطابقة قالبك
• دعم B2B وDTC جاهز عند التثبيت

ابدأ مجاناً على متجر تطبيقات Shopify ←

الأسئلة الشائعة

هل يمكن إضافة قائمة أمنيات إلى Shopify بدون كتابة كود؟

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

هل توجد قائمة أمنيات مجانية في Shopify؟

نعم، عدد قليل منها. طريقة localStorage أعلاه مجانية إذا بنيتها بنفسك. وعلى صعيد التطبيقات، خطة Lite في Notify Me! مجانية حتى 50 إجراء على قائمة الأمنيات طوال العمر، وهو ما يكفي للتحقّق من أن العملاء يستخدمون الميزة فعلاً في متجرك قبل أن تدفع مقابل خطة أعلى.

هل تحتوي Shopify 2.0 على قائمة أمنيات؟

لا. Shopify 2.0 هي معمارية القوالب (الأقسام، والكتل، وكتل التطبيقات) — وهي لا تضيف ميزة قائمة الأمنيات. لكنها تجعل تثبيت تطبيق قائمة أمنيات أنظف عبر app blocks، ولهذا تندمج معظم تطبيقات قوائم الأمنيات الحديثة في قوالب 2.0 خلال ثوانٍ.

هل يمكنني إضافة قائمة أمنيات باستخدام Liquid فقط؟

جزئياً. يستطيع Liquid عرض قائمة الأمنيات إذا كانت البيانات في metafield الخاص بالعميل، لكن Liquid لا يستطيع الكتابة إلى metafields من واجهة المتجر. ستحتاج إلى JavaScript وإما Storefront API أو App Proxy لحفظ العناصر.

كيف أضيف قائمة أمنيات إلى صفحة منتج في Shopify دون تطبيق؟

استخدم الطريقة الأولى أعلاه: الصق مقتطف زر قائمة الأمنيات في قالب منتجك، أضف wishlist.js إلى أصول قالبك، وأنشئ صفحة قائمة الأمنيات من templates/page.wishlist.liquid. الكود الكامل متوفّر في هذا الدليل.

هل قائمة الأمنيات ترفع التحويل فعلاً؟

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

ماذا يحدث لقائمة أمنيات على localStorage عندما يحذف العميل ملفات تعريف الارتباط؟

تُحذف بشكل نهائي. لا نسخة احتياطية، ولا استعادة. هذا أهم سبب يجعل المتاجر تتجاوز النهج اليدوي.

هل يمكن لقائمة الأمنيات أن تطلق إشعارات back-in-stock عبر البريد الإلكتروني؟

فقط إذا ربطت قائمة الأمنيات ببريد العميل. localStorage لا يستطيع ذلك. metafields العميل يستطيع، لكن لا تزال تحتاج إلى backend لاكتشاف تغيّرات المخزون وإرسال الرسائل. تطبيق يقوم بالأمرين معاً — مثل Notify Me! — يلغي تلك المهمة بالكامل.

ما الفرق بين قائمة الأمنيات وقائمة الانتظار؟

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

هل من الأفضل استخدام Continue Selling When Out of Stock أم قائمة الأمنيات؟

مشكلة مختلفة. تتيح Continue selling when out of stock قبول طلبات لمخزون غير متوفّر (وهي في جوهرها preorder). أما قائمة الأمنيات فتتيح للمتسوّقين الحفظ دون التزام. إذا كنت تحاول التقاط الطلب على منتج غير متوفّر، فأنت تحتاج عادةً للاثنين معاً — قائمة أمنيات لجمع النية، وخيار preorder للمتسوقين المستعدّين للشراء الآن.

آخر تحديث: يونيو 2026. كُتب لقوالب Shopify المبنية على Online Store 2.0. إن كان قالبك أقدم (vintage)، فمسارات Liquid تختلف قليلاً — أما JavaScript فمتطابق.