اگر نظر دوڑائیں تو Shopify کے علاوہ اور بھی کئی دوسرے پلیٹ فارم موجود ہیں۔ جنھیں ہم اپنا ای کامرس سٹور بنانے کے لئے استعمال کر سکتے ہیں۔ لیکن اس کا آسان layout اور بآسانی سمجھ آنے والا format ہے۔ جس سے ہم بنا کوڈنگ کئے Shopify Customization کر سکتے ہیں۔ یہ فیچراس کو باقی پلیٹ فارم سے ممتاز کر دیتا ہے🤗۔ یعنی اگر ٹیکنیکل پس منظر نہ بھی ہو۔ تو بھی اس کی بنیادی معلومات حاصل کر کے اور اسے سیکھ کر ایک outclass سٹور بنایا جا سکتا ہے۔
Table of Contents
Shopify Customization
آج کے لیکچر میں theme structure اور layout پر تفصیلی بات ہوگی۔ جب ہم theme customize کے بٹن پر کلک کرتے ہیں تو یہ عمل شروع ہو جاتا ہے۔ سکرین دو حصوں میں تقسیم ہو جاتی ہے۔ دائیں حصے میں ہمیں اپنی سائٹ دکھائی دے رہی ہوتی ہے👓۔ جب کہ بائیں طرف اس میں دکھائے جانے والے تمام elements اور ان کی سیٹنگ ہوتی ہے۔
Announcement Bar
سب سے پہلے نظر آنے والی ٹاپ پر جو بار ہوتی ہے اسے announcement bar کہتےہیں۔ مطلب کوئی بھی چیز جس کا اعلان مقصود ہو اور اسے فرنٹ پیچ پر کسٹمر تک پہنچانا ہو ۔ یا اگر کلائنٹ کہے کہ کوئی بھی آفر، سیل، کوپن کوڈ وغیر ہ میں سے کچھ بھی کا اعلان کرنا ہے تو یقیناً یہ اسی حصے کی بات ہورہی ہوتی ہے۔اس پر کلک کرتے ہوئے ہم اس کی تحریر بدلنے کے ساتھ اس کا color 🖼وغیرہ بھی بدل سکتے ہیں اور اس کو کسی بھی چیز جیسے collection, page, blogکے ساتھ لنک والی جگہ پر متعلقہ حصے کا اندراج کرتے ہوئے ایسا کر سکتے ہیں جیسے مینیوز بناتے وقت کیا جا تا ہے۔ اب جیسے ہی کوئی اس لنک پر کلک کرے گا تو اسی جگہ پر پہنچ جائےگا۔
Save, Undo, Redo with Top Bar
جیسے ہی ہم کسی بھی element میں کوئی بھی چھوٹی یا بڑی changing کرتے ہیں تو اوپر save کا بٹن ایکٹو ہو جاتا ہے۔ اگر یہ inactive ہو تو اس کا مطلب ہے کہ کوئی بھی تبدیلی ابھی تک نہیں کی گئی۔ اس کے ساتھ undo اور redo کے بٹن کسی بھی کئے گئے کام کو واپس اور دوبارہ بحالی کے لئے استعمال کئے جاتے ہیں👍۔
Hide, Unhide, Deleting Section/Block
ہم ایک یا ایک سے ذیادہ announcement bars بھی اپنی مرضی سے لگا سکتے ہیں۔ اسی طرح کسی بھی element کو ختم کرنا ہو❌ تو اس پر جا کر remove section/ block کرنے سے وہ ختم ہو جاتا ہے۔ لیکن اگر آپ چاہ رہے ہیں کہ وہ ختم نہ ہو تو اس پر eye کے نشان پر کلک کرنے سے اسے hide بھی کیا جا سکتا ہے اور بعد ازاں ضرورت پڑنے پر یہ دوبارہ unhide بھی ایسے ہی ہو سکتا ہے۔
Header
اگلی چیز Shopify Customization میں header ہے جو کہ theme based ہوتا ہے۔ اس میں ہم اس کا color change کر سکتے ہیں۔ ہم اس میں تحریر🔡 اور logo ایڈ کر سکتے ہیں اور اس کی width بھی سیٹ کر سکتے ہیں۔ لوگو لگاتے وقت یہ ملحوظِ خاطر رکھیں کہ اس کے دائیں ، بائیں اور اوپر نیچے margins سیٹ کر لیں جو کہ بآسانی image corp بذریعہ editing software یا canva سے کئے جا سکتے ہیں۔
Can we use free theme
اچھا اب اگر فری اور premium themes کی بات کی جائے تو عام طور پر یہ تاثر لیا جاتا ہے کہ جیسے فری تھیم ٹھیک نہیں ۔لیکن یہ غلط ہے✖۔ فری تھیم بھی ایک مکمل سٹور بنانے کے لئے موزوں ہے🏑 بلکہ چونکہ اس میں صرف بنیادی elements اور ان کی سیٹنگ ہوتی ہے اس لئےاس سے بنائے گئے سٹور پرفارمنس اور سپیڈ کے لحاظ سے بہترین اور تیز ہوتے ہیں۔ باقی ذیادہ آپشنز چاہئیں اور سرمایہ ہو تو پھر پریمئم کی طرف جائیں۔
Adding new Menu for Shopify Customization
اسی طرح مینیو بناتے وقت main menu اور footer menu کو پچھلے لیکچر میں ہم نے cover کیا تھا۔ جو اگر رہ گیا تو یہاں سے آپ یہاں سے پڑھ لیں:
How to set Free Shopify Themes Menus (Lecture 14)
مین مینیو ، ٹاپ والا اور فوٹر مینیو جو سٹور کے آخر میں ہم لگاتے ہیں۔ ان دو کے علاوہ بھی ہم مزید مینیو اپنے ڈیش بورڈ پر navigation میں جا کر بنا سکتے ہیں۔کسی بھی مینیو کی ضرورت نہ ہونے یا اس میں کلائنٹ کے کہنے پر تبدیلی کرنے کے لئے اسے ختم یا ایڈٹ کرنے کی بجائے اگر ایک نیا مینیو بنا لیا جائےاور اسے متعلقہ نام دیتے ہوئے show کیا جائے تو بہتر ہے۔اس سے ایک تو وقت⏰ کی بچت ہوتی ہے دوسرا بعد ازاں اگر کلائنٹ کا دماغ خراب ہو تو دوبارہ ضرورت پڑے تو پچھلا مینیو دستیاب رہتا ہے۔ اسی طرح ہیڈر کے ساتھ مینیو ایک یا ایک سے ذیادہ بھی ایڈ کئے جاسکتے ہیں اور یہ element پر کلک کر کے ممکن ہوتا ہے۔
Showing Social Icons
اگر تھیم اجازت دے تو سوشل آئیکن جیسے فیس بک، ٹویٹر وغیرہ بھی یہاں شو کئے جاسکتے ہیں۔ اسی طرح vertical menu دکھانے کا انحصار بھی تھیم پر ہوتا ہے۔ اس کے علاوہ اس کے لئے ایک “app “Mega Menu بھی استعمال کی جاتی ہے۔ ایپس کیا ہوتی ہیں🤔۔ یہ بھی ان شاء اللہ آگے چل کر پتہ چل جائے گا۔
Adding Additional Sections
اب اس کے بعد ہم مختلف سیکشن جیسا کہ banner, images blog post, custom post, featured items وغیرہ اپنی ضرورت اور تھیم میں دستیابی کی صورت میں اپنے سٹور میں ایڈ کر سکتے ہیں۔ اس کے لئے elements کے آخر میں add section کے ذریعے سے یہ ممکن ہوتا ہے۔ باقی ان سب کی سیٹنگ بھی کم و بیش اسی انداز میں کی جاتی ہے⚙۔ اکثر کسی element کی پوزیشن بدلنی ہوتی ہے۔ یعنی اسے اوپر یا نیچے لے جانا پڑ جاتا ہے۔ تو اس کے لئے اس کے ڈاٹ ہینڈل موجود ہوتے ہیں۔ جن پر کلک پریس کرتے ہوئے اسے ڈریگ کرتے ہوئے یہ کام کیا جا سکتا ہے۔
How to check Mobile view of Store
اسی طرح یہ دیکھنے کے لئے کہ ہمارا سٹور mobile پر کس طرح نظر آئے گا📱؟ تو save والی بار میں اسے ڈیسک ٹاپ اور موبائل view میں تبدیل کر کے دیکھا جا سکتا ہے۔ shopify میں عموماًresponsive themes ہوتی ہیں۔ جس سے آپ کے سٹور کا view دیکھنے والے کی ڈیوائس کو مدنظر رکھتے ہوئے خودبخود ایڈجسٹ ہو جاتا ہے۔
Common Mistakes in Shopify Customization
عام طور پر جو تصاویر کے حوالے سے چھوٹی چھوٹی غلطیاں کی جاتی ہیں اس سے سٹور کا برا impression جاتا ہے۔ لیکن ہم انہیں سمجھ کر اور ٹھیک کر کے اس سے بچ سکتے ہیں اور بہتر Shopify Customization کر سکتے ہیں، جو یہ ہیں:
۔ تمام images کا ایک جیسا سائز ہونا چاہئے جو عام طور پر نہیں ہوتا اور برا impressionڈالتا ہے۔ سٹینڈرڈ سائز 500 px 500 x (پکسل) رکھا جا سکتا ہے۔
۔ تمام images کا بیک گراؤنڈ یا کلر سکیم ایک جیسی ہی بھلی لگتی ہے🎨۔ ایسا نہ ہونے سے uniformity نہیں نظر آتی۔
Showing image in Collection
اکثر ہمیں collections کو اپنے featured items والے سیکشن میں show کروانا ہوتا ہے۔ لیکن ان میں تصاویر نظر نہیں آرہی ہوتیں😶۔ اس کی وجہ کہ collection بناتے وقت ہم نے یہ اُدھر add نہیں کی ہوتی۔ تو collection کو edit کرتے ہوئے اگر تصویر لگائی جائے تو وہ پھر ادھر بھی show ہونا شروع ہو جائے گی۔
Last Step in Shopify Customization
اسی طرح Shopify Customization میں آخری کام Publishing Theme ہوتی ہے۔ یاد رہے جب تک ہم کسی تھیم کو پبلش نہیں کریں گے تو وہ ہمارے پری ویو میں بھی نظر نہیں آئے گی۔ اگر پبلش کئے بغیر اسے کلائنٹ کو دکھانا ہو تو سکرین شاٹس لئے جا سکتے ہیں📷۔ اسی طرح ہر پیج کی ایڈوانس سیٹنگ کے لئے layout hub, page fly وغیرہ جیسی apps استعمال ہوتی ہیں۔ جیسے پہلے کہا ایپس کو ان شاء اللہ آگے چل کر ہم سمجھیں گے۔
