كيفية إضافة رمز مفضل إلى ملف Shopify المتجر

تعلم أساسيات ما هو ملف Shopify الأيقونة المفضلة وكيفية وضعها في متجرك عبر الإنترنت.

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

ما هو ال Shopify فافيكون؟

A Shopify الأيقونة المفضلة ، أو أي رمز مفضل لهذه المسألة ، هو رمز صغير لموقع الويب الخاص بك يظهر في علامة تبويب المتصفح بجوار اسم موقع الويب الخاص بك.

يعد شريط عنوان المتصفح هو المنطقة الأكثر شيوعًا لعرض فافيكون الموقع ، ولكنه يظهر أيضًا في المواقع التالية:

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

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

Shopify أمثلة فافيكون

افتراضيا، Shopify يضيف ال Shopify شعار الأيقونة المفضلة لديك ، لذلك نحن بحاجة إلى تغيير ذلك.

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

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

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

استمر في القراءة لمعرفة المزيد حول كيفية إضافة الأيقونة المفضلة إلى ملف Shopify تخزين.

كيفية إضافة رمز مفضل إلى ملف Shopify المتجر

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

لذلك ، انتقل إلى ملف Shopify لوحة القيادة وانقر على المتجر عبر الإنترنت ضمن قنوات المبيعات.

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

متجر على الانترنت

في مجلة Shopify المخصص ، قم بالتمرير إلى أسفل القائمة الموجودة على اليسار وانقر فوق إعدادات السمة.

إعدادات الموضوع

في القسم الجديد ، ابحث عن زر Favicon وحدده.

الرمز المفضل - Shopify فافيكون

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

اختر صورة

اختر ملف Favicon وقم بتحميله إلى Shopify.

بعد ذلك ، سترى معاينة لأيقونة Favicon الخاصة بك. لجعل التغييرات دائمة ، حدد الزر حفظ في Shopify.

زر حفظ

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

مثال Shopify فافيكون

نصائح لإنشاء الأيقونة المفضلة الخاصة بك

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

لحل أي مشاكل ، إليك بعض النصائح لإنشاء ملف Shopify الأيقونة المفضلة:

  • ابدأ تصميمك بحجم أكبر من 32 × 32 وقم بتقليصه إذا لزم الأمر. ستحصل على صورة ضبابية أكثر إذا حاولت تمديد صورة أصغر في الفضاء. على سبيل المثال ، قد يؤدي التقاط صورة 32 × 32 من Hatchful ومحاولة تمديدها للتخلص من الجزء المكتوب من الشعار إلى حدوث مشكلات.
  • لا يمكنك عادةً أن تأخذ شعارك الحالي وتتوقع أن يعمل بشكل مثالي كأيقونة مفضلة.
  • يبدو فافيكون رائعًا عندما تقوم بتغطية كل بكسل من المساحة المتوفرة. ليس لديك مساحة كبيرة ، لذا يجب أن تستفيد من كل منها square بكسل في مساحة 32 × 32.
  • أزل كل النص ، لأنه من الصعب قراءته في الأيقونة المفضلة. الاستثناء هو إذا كان عنصر الشعار الأساسي الخاص بك هو حرف كبير.
  • التقط ألوانًا صلبة وأكثر إشراقًا. تعمل الشعارات الكرتونية البسيطة بشكل أفضل.
  • انظر إلى المفضلة من العلامات التجارية المفضلة لديك. ما الذي فعلوه لضمان وصول صورتهم عبر الإنترنت باستخدام الرمز المفضل؟
  • ضع في اعتبارك إما ملء المساحة بأكملها بخلفية ملونة صلبة أو إنشاء خلفية شفافة مع تمديد عنصر المقدمة بحيث يلامس الحواف فقط. ستلاحظ أن العديد من العلامات التجارية الكبرى لديها خلفيات شفافة للأشياء المفضلة لديهم.
  • يعمل تنسيق ملف ICO جيدًا مع الصور الأصغر. إذا لم تكن مألوفًا ، فاستخدم PNG للخلفيات الشفافة أو JPG للأرقام المفضلة عالية الدقة ذات الخلفيات الصلبة.

كيفية إنشاء رمز مفضل خاص بك Shopify المتجر

لديك خيار تصميم فافيكون في أي برنامج تصميم من اختيارك. إذا كنت تفضل Photoshop ، فاستمر في ذلك. إذا كنت تفضل برنامجًا مجانيًا مثل GIMP أو Pixlr ، فكلها تعمل طالما أنك تلتزم بالأبعاد المطلوبة 32 × 32.

لديك أيضًا خيار إنشاء رمز مفضل باستخدام Shopifyشعار Hatchful ومولد فافيكون مجاني. شاهد دليلنا بالكامل على استخدام Hatchful لبناء شعار.

تحميل الشعار

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

Shopify ملف فافيكون

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

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

مهم: أنت بحاجة إلى استخدام نسخة أكبر من الصورة إذا كنت تخطط لتمديدها فوق لوحة قماشية لقص النص والمسافة البيضاء. لهذا ، استخدمت Hatchful لإنشاء الشعارات ، لكنني في الواقع أخذت أحد الشعارات الكبيرة (وليس ملف Favicon المقدم) لأنني لا أريد أن يحدث التعتيم عندما أقوم بتمديده على قماش 32 × 32.

داخل برنامج التحرير الخاص بك ، اختر لوحة قماشية جديدة مع ضبط العرض والارتفاع على 32.

32 من 32

قم بإنشاء طبقة للصورة الجديدة وتأكد من أن الصورة أكبر من قماش 32 × 32 ، حيث قد تقوم بتمديدها. ثم قم بتحميل الصورة أو وضعها في اللوحة القماشية.

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

نسخة كبيرة

كما ترى ، تبدو النسخة المصغرة من Favicon في مصمم Pixlr جيدة. لقد غطيت معظم المساحة المخصصة ، واخترت رمز لون ساطع وصلب ، وأزلت جميع علامات النص الأصغر.

نسخة أصغر

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

تحميل - Shopify فافيكون

نعود إلى الخاص Shopify لوحة القيادة. انقر فوق المتجر عبر الإنترنت> السمات> تخصيص.

ثم انتقل إلى إعدادات السمة> المفضلة.

قم بتحميل هذا الرمز المفضل الجديد وانقر فوق الزر حفظ في ملف Shopify محرر.

معاينة الصورة

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

المنتج النهائي - Shopify فافيكون

في الخلاصة

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

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

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

جو وارنيمونت

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