یہ ترتیبات کہاں موجود ہوتی ہیں
یہ ترتیبات ہر مارکیٹ کے لیے الگ الگ ترتیب دی جاتی ہیں، اور ایک مارکیٹ کے اندر یہ بیک وقت ہر صفحے پر اثر انداز ہوتی ہیں۔ بلڈر کھولیں، بائیں سائڈبار میں مارکیٹ ٹیب (ملک کے جھنڈے کا آئیکن) سے ایک مارکیٹ منتخب کریں، پھر ترتیبات ٹیب (گیئر آئیکن) پر کلک کریں۔ تبدیلیاں اسی مارکیٹ پر لاگو ہوتی ہیں جو آپ نے منتخب کی ہے اور جب آپ شائع کریں پر کلک کرتے ہیں تو لائیو ہو جاتی ہیں۔ ہر ترتیب کی مکمل فہرست کے لیے، بلڈر ترتیبات کا حوالہ دیکھیں۔
رنگ اسکیمیں
Storeep زیادہ سے زیادہ 9 رنگ اسکیموں کا ایک پیلیٹ استعمال کرتا ہے۔ آپ کے اسٹور میں ہر سیکشن، بلاک اور کمپوننٹ ان میں سے کسی ایک اسکیم کا اس کے نمبر (1 سے 9 تک) کے ذریعے حوالہ دیتا ہے۔ کسی اسکیم کے رنگ تبدیل کرنے سے ہر وہ سیکشن جو اسے استعمال کرتا ہے، تمام صفحات پر فوری طور پر اپ ڈیٹ ہو جاتا ہے۔
ہر اسکیم کے اندر رنگ کے کردار
ہر اسکیم درج ذیل رنگ کے کرداروں کی وضاحت کرتی ہے، جو سب ہیکس رنگ کی اقدار کے طور پر مقرر کیے جاتے ہیں:
- پس منظر: سیکشن کا بنیادی پس منظر کا رنگ۔
- اندرونی پس منظر: ہلکا سا رنگ دار پس منظر جو سیکشن کے اندر کارڈز اور نیسٹڈ مواد کے علاقوں کے لیے استعمال ہوتا ہے۔
- ہیڈنگ کا رنگ: ہیڈنگ کے متن کا رنگ۔
- متن کا رنگ: پیراگراف کے متن کا رنگ۔
- نمایاں متن کا رنگ: ایک نمایاں متن کا رنگ جو قیمتوں، بچت کے بیجز اور کاؤنٹ ڈاؤن ٹائمر کی اقدار کے لیے استعمال ہوتا ہے۔ عام طور پر پیلیٹ کا سب سے گہرا یا سب سے گاڑھا رنگ۔
- لنک کا رنگ: ہائپر لنک کا طے شدہ رنگ۔
- لنک ہوور کا رنگ: ہائپر لنک کا رنگ جب کوئی خریدار اس پر ہوور کرتا ہے۔
- بارڈر کا رنگ: عناصر کے بارڈرز اور تقسیم کرنے والی لائنوں کا رنگ۔
- آؤٹ لائن کا رنگ: فوکس رِنگز، کی بورڈ سلیکشن ہائی لائٹس اور ایکسنٹ آؤٹ لائنز کا رنگ جنہیں عام بارڈرز سے زیادہ نمایاں ہونے کی ضرورت ہوتی ہے۔
- سایے کا رنگ: باکس سایوں کا رنگ (عام طور پر کچھ شفافیت کے ساتھ)۔
- پرائمری بٹن کا پس منظر: پرائمری بٹنوں کا بھرنے والا رنگ۔
- پرائمری بٹن کا متن: پرائمری بٹنوں پر لیبل کا رنگ۔
- پرائمری بٹن کا بارڈر: پرائمری بٹنوں کے بارڈر کا رنگ۔
- پرائمری بٹن ہوور کا پس منظر: ہوور کے دوران پرائمری بٹن کا بھرنے والا رنگ۔
- پرائمری بٹن ہوور کا متن: ہوور کے دوران پرائمری بٹن کے لیبل کا رنگ۔
- پرائمری بٹن ہوور کا بارڈر: ہوور کے دوران پرائمری بٹن کے بارڈر کا رنگ۔
- سیکنڈری بٹن کا پس منظر: سیکنڈری بٹنوں کا بھرنے والا رنگ۔
- سیکنڈری بٹن کا متن: سیکنڈری بٹنوں پر لیبل کا رنگ۔
- سیکنڈری بٹن کا بارڈر: سیکنڈری بٹنوں کے بارڈر کا رنگ۔
- سیکنڈری بٹن ہوور کا پس منظر: ہوور کے دوران سیکنڈری بٹن کا بھرنے والا رنگ۔
- سیکنڈری بٹن ہوور کا متن: ہوور کے دوران سیکنڈری بٹن کے لیبل کا رنگ۔
- سیکنڈری بٹن ہوور کا بارڈر: ہوور کے دوران سیکنڈری بٹن کے بارڈر کا رنگ۔
- ان پٹ کا پس منظر: فارم کے ان پٹ خانوں کا پس منظر کا رنگ۔
- ان پٹ کے متن کا رنگ: فارم کے ان پٹ خانوں کے اندر متن کا رنگ۔
- ان پٹ کے بارڈر کا رنگ: فارم کے ان پٹ خانوں کے بارڈر کا رنگ۔
- ان پٹ لیبل کا رنگ: فارم کے خانوں کے اوپر لیبل کے متن کا رنگ۔
- ان پٹ فوکس کا پس منظر: ان پٹ کا پس منظر کا رنگ جب کوئی خریدار خانے پر فوکس یا ہوور کرتا ہے۔
مضبوط رنگ اسکیموں کے لیے مشورے
- زیادہ تر سیکشنوں پر پس منظر کے لیے ایک غیر جانبدار ہلکا رنگ استعمال کریں اور گاڑھے رنگ ایک ہی ایکسنٹ اسکیم کے لیے محفوظ رکھیں جو ہیرو اور کال ٹو ایکشن سیکشنوں پر استعمال ہو۔
- اپنے پرائمری بٹن کے پس منظر کو سیکشن کے پس منظر سے بصری طور پر نمایاں رکھیں، کیونکہ بٹن کو واضح طور پر نمایاں ہونا چاہیے۔
- اندرونی پس منظر کو بنیادی پس منظر کا بہت ہلکا سا رنگ رکھیں تاکہ کارڈ کے پس منظر چونکا دیے بغیر پہچانے جا سکیں۔
- متن کے رنگ اور پس منظر کے درمیان، اور پرائمری بٹن کے متن اور پرائمری بٹن کے پس منظر کے درمیان کم از کم 4.5:1 کا کنٹراسٹ رکھنے کی کوشش کریں۔
ٹائپوگرافی
چار فونٹ کے کردار ہر صفحے پر ٹائپوگرافی کو کنٹرول کرتے ہیں۔ ہر کردار دستیاب لائبریری سے ایک فونٹ فیملی سے منسلک ہوتا ہے۔
- باڈی: پیراگراف کے متن اور تفصیلات کے لیے بنیادی فونٹ۔
- ہیڈنگ: پورے اسٹور میں تمام ہیڈنگز کے لیے فونٹ۔
- ذیلی عنوان: ثانوی عنوانات اور سیکشن کے ذیلی عنوانات کے لیے فونٹ، جو ہیڈنگ اور باڈی کے اسٹائلز کو جوڑتا ہے۔
- ایکسنٹ: قیمتوں، بیجز اور آرائشی نمایاں پن کے لیے ایک اسٹائلش فونٹ۔
دستیاب فونٹس میں شامل ہیں: Inter، Helvetica، SF Mono، New York، System UI، Roboto، Open Sans، Lato، Montserrat، Poppins، Raleway، Nunito، Merriweather، Playfair Display، Lora، PT Sans، PT Serif، Quicksand، Space Grotesk، DM Sans، Syne، Manrope، Outfit، Urbanist، Oswald، Bebas Neue، Abel، Abril Fatface اور Acme۔
عربی مواد والے اسٹورز کے لیے، فونٹس خود بخود ملتے جلتے عربی فونٹس کے ساتھ جوڑ دیے جاتے ہیں: مثال کے طور پر، Inter کو Cairo کے ساتھ اور Poppins کو Tajawal کے ساتھ جوڑا جاتا ہے۔ آپ کو عربی فونٹ الگ سے منتخب کرنے کی ضرورت نہیں ہے۔
صفحے کی چوڑائی
عالمی صفحے کی چوڑائی کی ترتیب پکسلز میں بنیادی مواد کے گرڈ کی زیادہ سے زیادہ چوڑائی کو کنٹرول کرتی ہے۔ صفحہ چوڑائی پر مقرر کیے گئے سیکشنز اس قدر تک محدود رہتے ہیں؛ مکمل پر مقرر کیے گئے سیکشنز ہمیشہ پورے ویوپورٹ پر پھیلتے ہیں چاہے کچھ بھی ہو۔ دستیاب اقدار: 900، 1000، 1100، 1200 (طے شدہ)، 1300 اور 1400 پکسل۔ منتخب کردہ چوڑائی سے تنگ ویوپورٹس پر، سیکشنز خود بخود سکڑ کر اسکرین کا 100% بھر دیتے ہیں۔
لوگو
لوگو ہیڈر سیکشن کے لوگو بلاک کے اندر اور فوٹر میں ہمارے بارے میں بلاک کے اندر مقرر کیا جاتا ہے۔ کنٹرول پینل میں لوگو بلاک پر کلک کریں، پھر اپنے آلے سے اپنا لوگو اپ لوڈ کرنے یا اپنی میڈیا لائبریری سے منتخب کرنے کے لیے + میڈیا شامل کریں یا + تصویر شامل کریں پر کلک کریں۔ اپ لوڈ کرنے کے بعد، ڈسپلے کی چوڑائی (20 تا 300 پکسل) اور اونچائی (20 تا 300 پکسل) مقرر کریں؛ دوسری جہت پہلو کے تناسب کو برقرار رکھنے کے لیے خود بخود ایڈجسٹ ہو جاتی ہے۔
فیویکن
فیویکن بلڈر میں ترتیبات ← برانڈنگ میں مقرر کیا جاتا ہے۔ فیویکن کے خانے پر کلک کریں اور ایک تصویر اپ لوڈ کریں (تجویز کردہ: ایک مربع تصویر)۔ فیویکن براؤزر کی ٹیبز اور بک مارکس میں ظاہر ہوتا ہے۔
باڈی کے پس منظر کی تصویر
ترتیبات ← برانڈنگ میں بھی: آپ اختیاری طور پر پورے صفحے کے لیے ایک پس منظر کی تصویر مقرر کر سکتے ہیں۔ ترتیب دیں کہ یہ کس طرح اسکیل ہوتی ہے (کور پورے ویوپورٹ کو بھر دیتا ہے، کنٹین تصویر کو اس کے اندر فٹ کرتا ہے) اور آیا یہ دہراتی ہے (ٹائلز کرتی ہے) یا اسکرول ہوتے مواد کے پیچھے ایک ہی تصویر کے طور پر رہتی ہے۔
عالمی حسب ضرورت CSS اور JavaScript
ان جدید حسب ضرورت تبدیلیوں کے لیے جو معیاری ترتیبات حاصل نہیں کر سکتیں، ترتیبات ایک عالمی CSS کا خانہ (زیادہ سے زیادہ 1,000 حروف) اور ایک عالمی JS کا خانہ (زیادہ سے زیادہ 1,000 حروف) فراہم کرتی ہے۔ یہاں درج کردہ CSS اسٹور کے ہر صفحے میں شامل کیا جاتا ہے؛ یہاں درج کردہ JS ہر صفحے پر چلتا ہے۔ ان کا استعمال کم سے کم کریں، اور صفحہ مخصوص حسب ضرورت تبدیلیوں کے لیے حسب ضرورت کوڈ سیکشن کو ترجیح دیں۔