المظهر التقليدي للخصومات في شوبيفاي لا يحقق الهدف الأساسي المتمثل في جذب انتباه العملاء، لذلك حرصت على تحسين شارة الخصم الافتراضية (Sale) لتصبح أكثر فاعلية من خلال إضافة نسبة الخصم ونص تسويقي جذاب مثل "عرض خاص" أو "لفترة محدودة"، مع تحسين مظهرها ليكون ديناميكيًا ولافتًا للانتباه.
وفي هذا المقال سأشارك معكم الخطوات العملية التي اتبعتها لتحويل شارة الخصم إلى عنصر بارز يجذب العملاء مباشرة إلى العروض، ويوضح مدى تأثيرها على معدلات التحويل وزيادة المبيعات في المتجر.
كيفية تحويل الخصومات إلى شارة بصرية تزيد التفاعل والمبيعات
في البداية بحثت عن تطبيق يتيح تنفيذ التطويرات المطلوبة مثل تعديل نص شارة الخصم، إضافة نسبة الخصم بداخلها، تخصيصها من حيث اللون والحجم والخط، وكذلك منحها مظهرًا ديناميكيًا أكثر جاذبية. لكنني وجدت أن معظم التطبيقات لا توفر هذه الخيارات بالمرونة الكافية، أو تفرض تكلفة على كل عدد من المنتج، مما يؤدي إلى ارتفاع التكلفة الإجمالية.
لذلك لجأت إلى إضافة بعض الأكواد داخل قوالب شوبيفاي لتفعيل هذه الخصائص، خاصة أنها بسيطة التنفيذ. وسأوضح لكم في هذا المقال كيفية إضافتها بسهولة وبما يضمن تكاملها مع مختلف قوالب شوبيفاي، مجانًا بالكامل.
01- تخصيص كود قالب شوبيفاي
في البداية تحتاج إلى الدخول إلى محرر الأكواد الخاص بقوالب شوبيفاي لإضافة أو تعديل الأكواد المخصصة. وللقيام بذلك، توجه إلى لوحة تحكم شوبيفاي الرئيسية، ثم اختر من القائمة الجانبية Online Store >> Themes.
بعد ذلك، حدّد قالب متجرك الرئيسي واضغط على خيارات التخصيص (...)، ثم اختر خيار Edit Code كما هو موضح في الصورة التالية:
02- إظهار شارة الخصم على سعر المنتجات
الخطوة الأولى نحتاج إلى إظهار شارة الخصم على المنتجات نفسها حتى نتمكن من تخصيصها. لذلك نبدأ بالبحث عن ملف price.liquid ضمن ملفات القالب، ثم نختار price.liquid snippets كما هو موضح في الصورة التالية:
بعد ذلك، ابحث عن الكود التالي داخل ملف price.liquid snippets.
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
{{ 'products.product.on_sale' | t }}
</span>
بعدها استبدل الكود السابق بالكود التالي:
<span class="badge price__badge-sale color-{{ settings.sale_badge_color_scheme }}">
-{{ compare_at_price | minus: price | times: 100 | divided_by: compare_at_price }}%
{{ settings.aftertext }}
</span>هذا الكود ببساطة يعرض شارة نصية (Sale) فوق السعر، مع ترجمة كلمة الخصم تلقائيًا بناءً على لغة المتجر. بعد استبدال الكود اضغط على زر Save لحفظ التغييرات على المتجر.
الآن، عند التوجه إلى صفحة المنتجات ستلاحظ ظهور شارة الخصم (Sale) على المتجر.
تختلف هذه الخطوة نسبيًا بحسب القالب المستخدم في متجرك، فبعض القوالب تتيح إظهار شارة الخصم مباشرة من إعدادات المتجر، بينما يتطلب البعض الآخر تعديلًا برمجيًا كما فعلنا في هذه الخطوة.
03- حساب نسبة الخصم التلقائي
الخطوة الثانية نحتاج هنا إلى استبدال نص (Sale) بنسبة الخصم المطبَّقة على المتجر. وللقيام بذلك، ابحث عن ملف card-product.liquid ضمن ملفات القالب، ثم اختر snippets/card-product.liquid كما هو موضح في الصورة التالية:
بعد ذلك، ابحث عن الكود التالي:
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- 'products.product.on_sale' | t -}}
</span>
بعدها استبدله بالكود التالي:
{%- assign difference = card_product.compare_at_price | minus: card_product.price -%}
{%- assign float_difference = difference | times: 1.0 -%}
{%- assign discount_fraction = float_difference | divided_by: card_product.compare_at_price -%}
{%- assign discount_percentage = discount_fraction | times: 100 | round -%}
<span
id="NoMediaStandardBadge-{{ section_id }}-{{ card_product.id }}"
class="badge badge--bottom-left color-{{ settings.sale_badge_color_scheme }}"
>
{{- discount_percentage }}%
{{ settings.aftertext }}
</span>يعمل هذا الكود على تحويل شارة الخصم التي تظهر على صور المنتجات إلى نسبة مئوية. بعد استبدال الكود، اضغط على زر Save لحفظ التغييرات على المتجر.
الآن، عند التوجه إلى المتجر ستلاحظ أن شارات الخصم أصبحت تُعرض على شكل نسبة مئوية، كما هو موضح في الصورة التالية:
04- إنشاء تطبيق تخصيص شارات الخصم على المتجر
في هذه الخطوة نحتاج إلى إضافة موديول/سكشن داخل محرر القالب (Theme Editor) يتيح تخصيص مظهر شارات الخصم من حيث النصوص، الخط، الألوان، الخلفية، الهوامش، وغيرها من التفاصيل. وبهذا لن تكون بحاجة إلى تعديل الكود في كل مرة ترغب فيها بتخصيص مظهر الشارات.
للقيام بذلك، ابحث عن ملف settings_schema.json ضمن ملفات القالب، ثم اختر config/settings_schema.json كما هو موضح في الصورة التالية:
بعد ذلك أضف الكود التالي داخل الملف، مع مراعاة وضعه بعد علامة الفاصلة المتممة لأي كود موجود مسبقًا.
{
"name": "Discount Badge",
"settings": [
{
"type": "paragraph",
"content": "Websensepro"
},
{
"type": "inline_richtext",
"id": "aftertext",
"default": "Custom Sale Badge",
"label": "After Text"
},
{
"type": "color",
"id": "aftertextbackgroundcolor",
"default": "#000",
"label": "Badge Background Color"
},
{
"type": "color",
"id": "aftertextcolor",
"default": "#fff",
"label": "Badge Text Color"
},
{
"type": "range",
"id": "font_size_badge",
"min": 12,
"max": 24,
"step": 1,
"unit": "px",
"label": "Font size",
"default": 16
},
{
"type": "range",
"id": "badge_border_radius",
"min": 0,
"max": 50,
"step": 2,
"unit": "px",
"label": "Border Radius",
"default": 0
},
{
"type": "checkbox",
"id": "badge_animation",
"label": "Enable Animation"
},
{
"type": "range",
"id": "badge_padding_top",
"min": 8,
"max": 30,
"step": 2,
"unit": "px",
"label": "Padding Top",
"default": 8
},
{
"type": "range",
"id": "badge_padding_bottom",
"min": 8,
"max": 30,
"step": 2,
"unit": "px",
"label": "Padding Bottom",
"default": 8
}
]
},وأخيرًا، اضغط على زر Save ليتم حفظ الإعدادات على المتجر.
بهذا الشكل ستظهر إعدادات شارات الخصم مباشرة داخل محرر شوبيفاي (Theme Editor).
05- إضافة أكواد CSS لتخصيص مظهر شارات الخصم
الآن نحتاج إلى إضافة تحسينات CSS لتطوير مظهر شارات الخصم وتوفير خيارات إضافية لتخصيصها بمرونة داخل محرر قوالب شوبيفاي. للقيام بذلك، ابحث عن ملف theme.liquid ضمن ملفات القالب، ثم اختر layout/theme.liquid كما هو موضح في الصورة التالية:
بعد ذلك، ابحث عن العنصر {% style %} داخل الملف، ثم أضف الكود الجديد مباشرة أسفله.
انسخ الكود التالي وضعه أسفل عنصر {% style %} داخل الملف.
.price__badge-sale,.badge .color-scheme-4,.badge {
background-color: {{ settings.aftertextbackgroundcolor }} !important;
color: {{ settings.aftertextcolor }} !important;
font-size: {{ settings.font_size_badge }}px !important;
border-radius: {{ settings.badge_border_radius }}px !important;
padding-top: {{ settings.badge_padding_top }}px !important;
padding-bottom: {{ settings.badge_padding_bottom }}px !important;
{% if settings.badge_animation %}
animation: pulse 2s infinite ease-in-out;
{% endif %}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.1);
}
to {
transform: scale(1);
}
}وبعد الانتهاء من إضافة الكود، اضغط على زر Save لحفظ الإعدادات وتطبيقها على المتجر.
06- تخصيص مظهر شارات الخصم لهوية المتجر
بعد الانتهاء من إضافة الأكواد السابقة، أصبح التطبيق جاهزًا للعمل على المتجر. الآن يمكنك تحرير وتخصيص مظهر شارات الخصم بسهولة مباشرة من داخل محرر القالب (Theme Editor).
للقيام بذلك، توجه إلى محرر القالب في شوبيفاي ثم اختر من القائمة الجانبية Settings، وستلاحظ ظهور تبويب جديد باسم Discount Badge كما يظهر في الصورة التالية:
من خلال هذا التبويب تستطيع التحكم الكامل في مظهر شارات الخصم. على سبيل المثال، من تبويب After Text يمكنك كتابة النص المطلوب ظهوره بجانب شارة الخصم، مع الأخذ في الاعتبار أن نسبة الخصم يتم عرضها تلقائيًا وتختلف باختلاف المنتج، كما هو موضح في الصورة التالية:
كما يمكنك تخصيص مظهر شارة الخصم بما يتناسب مع هوية متجرك، سواء من حيث لون الخلفية، لون الخط، حجم النص، شكل الإطار، المحاذاة، الهوامش وغيرها من التفاصيل.
ومن الخيارات المهمة أيضًا تفعيل خاصية Animation، التي تضيف حركة ديناميكية على شارة الخصم، مما يساعد على جذب انتباه العملاء مباشرة عند دخولهم إلى المتجر.
بعد الانتهاء من تخصيص الإعدادات بالشكل المطلوب، اضغط على زر Save لحفظ التغييرات.
الآن، عند تصفح المتجر ستلاحظ أن شارات الخصم تظهر على المنتجات المطبق عليها الخصومات كما هو موضح في الصورة التالية:
وبالمثل، عند الدخول إلى صفحة المنتج ستجد أن شارة الخصم تظهر بشكل أوضح لجذب انتباه العملاء، كما يظهر في الصورة التالية:
بهذا الشكل نكون قد استثمرنا الخصومات بصريًا من خلال شارات بارزة تسهل على العملاء ملاحظتها فور دخولهم الموقع، مما يساهم في رفع معدل التحويل داخل المتجر. كما يمكن استغلالها في تطبيق استراتيجيات متنوعة مثل العروض الموسمية أو الخصومات الخاصة أو غيرها.