هوية متجر التجارة الإلكترونية الخاص بك يجمع بين العديد من العناصر مثل الشعار وألوان الموقع و مواد التسويق. تعمل هذه الهوية على تقوية علامتك التجارية بشكل عام وتخلق تذكيرًا صحيًا لعملائك، مما يثير مشاعر الراحة والموثوقية عندما يرون صور وألوان علامتك التجارية.
على الرغم من صغر حجمه، إلا أن Favicon يرتبط أيضًا باستراتيجية العلامة التجارية تلك. سنوضح لك في هذا البرنامج التعليمي كيفية إنشاء أيقونة مفضلة وإضافتها إلى حسابك Shopify متجر، لتقريب مظهرك عبر الإنترنت وتسهيل التعرف على متجرك عندما يزوره العملاء.
في هذه المقالة
ما هو ال Shopify فافيكون؟
A Shopify الأيقونة المفضلة ، أو أي رمز مفضل لهذه المسألة ، هو رمز صغير لموقع الويب الخاص بك يظهر في علامة تبويب المتصفح بجوار اسم موقع الويب الخاص بك.
يعد شريط عنوان المتصفح هو المنطقة الأكثر شيوعًا لعرض فافيكون الموقع ، ولكنه يظهر أيضًا في المواقع التالية:
- تطبيقات شريط الأدوات
- فواصل الكتب
- نتائج التاريخ
- أشرطة البحث
- في بعض الأحيان عند مشاركتها على وسائل التواصل الاجتماعي
بشكل أساسي ، كلما احتاج المتصفح إلى إظهار ارتباط إلى موقع الويب الخاص بك ، ولم يكن هناك مجال كبير لمحتوى آخر ، فإنه يستبدل شعارك المعتاد بالحجم الكامل بشعار Favicon.
افتراضيا، Shopify يضيف ال Shopify شعار الأيقونة المفضلة لديك ، لذلك نحن بحاجة إلى تغيير ذلك.
غالبًا ما يكون الرمز المفضل الجيد هو نسخة أصغر من شعارك ، ولكن في بعض الأحيان تختلف قليلاً لأنك تريد التأكد من أنها مرئية ، وتشغل كل المساحة المخصصة ، وإضافة القليل من اللون بجوار اسم موقع الويب الخاص بك.
بشكل افتراضي ، تدعم جميع المتصفحات الرموز المفضلة بحجم 32 × 32 بكسل. هذه صورة صغيرة نوعًا ما ، ولكن بمساعدة بعض المولدات عبر الإنترنت ، يمكنك صنعها بنفسك Shopify الأيقونة المفضلة لموقع الويب الخاص بك. أيضًا ، يتم تصغير الصور الأكبر حجمًا على أي حال ، لذلك لا يتعين عليك بالضرورة جعلها 32 × 32 بالضبط.
يعد Favicon منطقيًا إلى حد ما بالنسبة للمتاجر عبر الإنترنت Shopify نظرًا لسهولة إضافتها ، ومن المهم تقوية هوية علامتك التجارية كبائع عبر الإنترنت. يجادل البعض أيضًا بأنه يساعد في تحسين محركات البحث.
استمر في القراءة لمعرفة المزيد حول كيفية إضافة الأيقونة المفضلة إلى ملف Shopify تخزين.
كيفية إضافة رمز مفضل إلى ملف Shopify المتجر – دليل الخطوات السريعة
كما ذكرنا ، عند تشغيل موقع من خلال Shopify يضيف تلقائيًا ملف Shopify الشعار باعتباره الرمز المفضل لموقعك. لا حرج في ذلك، ولكن من الأكثر احترافية وتوجيهًا نحو العلامة التجارية تضمين شعارك الخاص. فيما يلي الخطوات التي يجب عليك اتباعها:
الخطوة 1: اذهب إلى الخاص بك Shopify لوحة التحكم
لذلك ، انتقل إلى ملف Shopify لوحة القيادة وانقر على المتجر عبر الإنترنت ضمن قنوات المبيعات.
الخطوة 2: انتقل إلى إعدادات السمة
انتقل إلى السمات الخاصة بك وانقر فوق الزر تخصيص بجوار المظهر الحالي الخاص بك. على الرغم من أن الإعدادات تتغير من موضوع إلى موضوع ، إلا أن كل ذلك هو الأحدث Shopify السمات لها قسم لتغيير فافيكون.
في مجلة Shopify المخصص ، قم بالتمرير إلى أسفل القائمة الموجودة على اليسار وانقر فوق إعدادات السمة.
الخطوة 3: حدد زر المفضلة
في القسم الجديد ، ابحث عن زر Favicon وحدده.
هذا يكشف عن زر لتحديد صورة أو استكشاف الصور المجانية. لا أستطيع أن أتخيل أن لديهم أي صور مجانية تطابق شعارك ، لذلك من الأفضل النقر فوق "تحديد صورة" لتحميل صورة مخصصة من جهاز الكمبيوتر الخاص بك.
الخطوة 4: قم بتحميل الرمز المفضل لديك
اختر ملف Favicon وقم بتحميله إلى Shopify.
بعد ذلك ، سترى معاينة لأيقونة Favicon الخاصة بك. لجعل التغييرات دائمة ، حدد الزر حفظ في Shopify.
لعرض الخاص بك Shopify الرمز المفضل أثناء العمل ، انتقل إلى الواجهة الأمامية لموقع الويب الخاص بك وانظر إلى علامة تبويب المتصفح الحالية. يجب أن ترى الرمز المفضل بجوار عنوان موقعك.
نصائح لإنشاء الأيقونة المفضلة الخاصة بك
على الرغم من أنه يبدو من السهل إنشاء رمز صغير ، إلا أنه من المهم القيام بذلك بشكل صحيح ، مع الأخذ في الاعتبار رؤية العملاء للأيقونة المفضلة عندما يأتون إلى موقعك. من السهل أيضًا إنشاء رمز مفضل ضبابي أو لا يملأ المساحة بأكملها ، مما يهزم الغرض من Favicon لأنه غير مرئي للعين.
لحل أي مشاكل ، إليك بعض النصائح لإنشاء ملف Shopify الأيقونة المفضلة:
- ابدأ تصميمك بحجم أكبر من 32 × 32 وقم بتقليصه إذا لزم الأمر. ستحصل على صورة ضبابية أكثر إذا حاولت تمديد صورة أصغر في الفضاء. على سبيل المثال ، قد يؤدي التقاط صورة 32 × 32 من Hatchful ومحاولة تمديدها للتخلص من الجزء المكتوب من الشعار إلى حدوث مشكلات.
- لا يمكنك عادةً أن تأخذ شعارك الحالي وتتوقع أن يعمل بشكل مثالي كأيقونة مفضلة.
- تبدو الرموز المفضلة رائعة عندما تغطي كل بكسل من المساحة المتوفرة. ليس لديك مساحة كبيرة، لذا يجب عليك الاستفادة من كل بكسل مربع في المساحة 32×32.
- أزل كل النص ، لأنه من الصعب قراءته في الأيقونة المفضلة. الاستثناء هو إذا كان عنصر الشعار الأساسي الخاص بك هو حرف كبير.
- التقط ألوانًا صلبة وأكثر إشراقًا. تعمل الشعارات الكرتونية البسيطة بشكل أفضل.
- انظر إلى المفضلة من العلامات التجارية المفضلة لديك. ما الذي فعلوه لضمان وصول صورتهم عبر الإنترنت باستخدام الرمز المفضل؟
- ضع في اعتبارك إما ملء المساحة بأكملها بخلفية ملونة صلبة أو إنشاء خلفية شفافة مع تمديد عنصر المقدمة بحيث يلامس الحواف فقط. ستلاحظ أن العديد من العلامات التجارية الكبرى لديها خلفيات شفافة للأشياء المفضلة لديهم.
- يعمل تنسيق ملف ICO بشكل جيد مع الصور الصغيرة. إذا لم تكن معتادًا عليه، فاستخدم تنسيق PNG للخلفيات الشفافة أو تنسيق JPG للحصول على أيقونات مفضلة عالية الدقة ذات خلفيات صلبة.
كيفية إنشاء رمز مفضل خاص بك Shopify المتجر
لديك خيار تصميم فافيكون في أي برنامج تصميم من اختيارك. إذا كنت تفضل Photoshop ، فاستمر في ذلك. إذا كنت تفضل برنامجًا مجانيًا مثل GIMP أو Pixlr ، فكلها تعمل طالما أنك تلتزم بالأبعاد المطلوبة 32 × 32.
لديك أيضًا خيار إنشاء رمز مفضل باستخدام Shopifyشعار Hatchful ومولد فافيكون مجاني. شاهد دليلنا بالكامل على استخدام Hatchful لبناء شعار.
بمجرد أن يقوم منشئ الشعار بعمله، فإنه يوفر لك ملفًا مليئًا بتنسيقات الشعار المتعددة، أحدها هو Favicon.
ضع في اعتبارك أن العديد من الشعارات التي تصنعها Hatchful (اقرأ لنا مراجعة فقس) استخدم مسافة بيضاء حول الشعار ، لذا قد تضطر إلى تعديلها بحيث تغطي الرسم معظم المساحة. بشكل عام ، وجدت أنه يجب عليك فقط استخدام الأيقونة المفضلة Hatchful إذا كانت تبدو جيدة بالفعل (تملأ معظم المساحة ولا تحتوي على عناصر صغيرة مثل النص).
إذا لم يكن الأمر كذلك ، فاستخدم برنامج تحرير تابع لجهة خارجية مثل Photoshop أو Pixlr لقص بعض العناصر غير الضرورية.
مهم: أنت بحاجة إلى استخدام نسخة أكبر من الصورة إذا كنت تخطط لتمديدها فوق لوحة قماشية لقص النص والمسافة البيضاء. لهذا ، استخدمت Hatchful لإنشاء الشعارات ، لكنني في الواقع أخذت أحد الشعارات الكبيرة (وليس ملف Favicon المقدم) لأنني لا أريد أن يحدث التعتيم عندما أقوم بتمديده على قماش 32 × 32.
داخل برنامج التحرير الخاص بك ، اختر لوحة قماشية جديدة مع ضبط العرض والارتفاع على 32.
قم بإنشاء طبقة للصورة الجديدة وتأكد من أن الصورة أكبر من قماش 32 × 32 ، حيث قد تقوم بتمديدها. ثم قم بتحميل الصورة أو وضعها في اللوحة القماشية.
في لقطة الشاشة التالية، قمت بتكبير تصميم الرمز المفضل حتى أتمكن من التأكد من ملاءمته للمربع بشكل صحيح. إنه غير واضح، لكنني أعلم أنه سيبدو أفضل كثيرًا عند تصغيره.
كما ترى ، تبدو النسخة المصغرة من Favicon في مصمم Pixlr جيدة. لقد غطيت معظم المساحة المخصصة ، واخترت رمز لون ساطع وصلب ، وأزلت جميع علامات النص الأصغر.
الخطوة الأخيرة هي تنزيل الملف. يمكنك اختيار جعله ملف PNG شفاف في هذه المرحلة. لكن في هذا البرنامج التعليمي ، ألتزم بتنسيق JPG عالي الدقة بحيث يبدو حادًا قدر الإمكان. ولا أمانع في امتلاك خلفية بلون خالص.
نعود إلى الخاص Shopify لوحة القيادة. انقر فوق المتجر عبر الإنترنت> السمات> تخصيص.
ثم انتقل إلى إعدادات السمة> المفضلة.
قم بتحميل هذا الرمز المفضل الجديد وانقر فوق الزر حفظ في ملف Shopify محرر.
مرة أخرى ، الطريقة الأساسية لاختبار وعرض رمزك المفضل هي ببساطة فتح علامة تبويب بعنوان URL لموقع صفحتك الرئيسية. كما ترون ، يظهر فافيكون بشكل جيد وهو في الواقع أفضل قليلاً من فافيكوني السابق ، حيث أرى كيف أن ذلك لم يملأ مساحة 32 × 32 بالكامل المتوفرة.
في الخلاصة
A Shopify لا يستغرق Favicon أكثر من بضع دقائق لتصميم وإضافة إلى موقعك ، ومع ذلك فهو يوفر تذكيرًا رائعًا للزائرين على موقع الويب الذي يتواجدون فيه. بالإضافة إلى ذلك ، يمكن أن يكون بمثابة وسيلة للأشخاص للعثور على موقع الويب الخاص بك في الإشارات المرجعية وتاريخ المتصفح ، مع الأخذ في الاعتبار أنهم على الأرجح يبحثون في قائمة طويلة من المواقع الأخرى عند تصفح هذه الأقسام.
ضع في اعتبارك أنه لا يجب أن تقبل الصورة الضبابية أو غير المقروءة Shopify صورة الأيقونة المفضلة. إذا وجدت أن الرمز المفضل الأول لا يبدو صحيحًا تمامًا ، أو إذا كنت ترغب في قص بعض النص أو إضافة خلفية شفافة ، فارجع إلى البداية وافهمها بشكل صحيح. على الرغم من أنه ليس من الجيد ألا يكون لديك فافيكون على الإطلاق ، فإن فافيكون ضبابي أو يصعب رؤيته يجعل علامتك التجارية تبدو غير احترافية وسخيفة إلى حد ما.
إذا كان لديك أي أسئلة حول إضافة الرموز المفضلة إلى Shopify، أو صنع بنفسك Shopify Favicon ، أخبرنا في قسم التعليقات أدناه.
التعليقات الردود 0