میں اپنے اسٹور کے رنگ، فونٹس، لوگو، اور فیوآئیکون کیسے تبدیل کروں؟

یہ سیٹنگز کہاں رہتی ہیں

برانڈنگ فی مارکیٹ ترتیب دی جاتی ہے، اور ایک مارکیٹ کے اندر یہ ایک ساتھ ہر صفحے کو متاثر کرتی ہے۔ بلڈر کھولیں، بائیں سائیڈبار کے اوپر مارکیٹس بٹن (ملک کا جھنڈا) سے ایک مارکیٹ چنیں، پھر Settings ٹیب (گیئر آئیکون) کھولیں۔ Settings کے اپنے سب ٹیبز اس ترتیب میں ہیں: Branding، Colors، Fonts، Layout، Animations، Automations، Inputs، Icons، Prohibitions، Checkout، Checkout form، Maintenance page، Custom CSS، اور Custom Javascript۔ تبدیلیاں اُس مارکیٹ پر لاگو ہوتی ہیں جو آپ نے منتخب کی ہے اور جب آپ Publish پر کلک کرتے ہیں تو لائیو ہو جاتی ہیں۔ مارکیٹس سوئچ کرنا اُس مارکیٹ کے اپنے رنگ، فونٹس، اور لے آؤٹ کو دوبارہ لوڈ کرتا ہے۔

رنگ اسکیمیں

Colors ٹیب میں 9 تک رنگ اسکیمیں ہوتی ہیں۔ ایک بار جب آپ حد تک پہنچ جائیں، تو ایڈ کارڈ ایک غیر فعال شمار بیج جیسے 9/9 میں بدل جاتا ہے۔ ہر سیکشن، بلاک، اور کمپوننٹ ایک اسکیم کو اس کے نمبر سے حوالہ دیتا ہے، اس لیے کسی اسکیم کے رنگ تبدیل کرنا فوراً ہر اُس سیکشن کو نئی شکل دیتا ہے جو اسے تمام صفحات میں استعمال کرتا ہے۔ اسکیم کارڈ پر رائٹ کلک کر کے اسے نقل یا حذف کریں۔

ہر اسکیم میں رنگ کے کردار

ہر اسکیم ان کرداروں کی تعریف کرتی ہے، سب ہیکس قدروں کے طور پر سیٹ ہیں:

• Background: مرکزی سیکشن بیک گراؤنڈ۔
• Inner Background: کسی سیکشن کے اندر کارڈز اور نیسٹڈ مواد کے لیے ایک رنگت والا بیک گراؤنڈ۔
• Heading: ہیڈنگ ٹیکسٹ کا رنگ۔
• Text: پیراگراف اور باڈی ٹیکسٹ کا رنگ۔
• Important text: زور دیا گیا ٹیکسٹ جیسے قیمتیں اور نمایاں کردہ قدریں۔
• Links اور Hover links: ہائپر لنک کا رنگ اس کی عام اور ہوور حالتوں میں۔
• Border: عناصر کے بارڈرز اور ڈیوائیڈر لائنیں۔
• Outline: فوکس رِنگز اور ایکسنٹ آؤٹ لائنز جنہیں بارڈرز سے زیادہ نمایاں ہونا چاہیے۔
• Shadow: باکس شیڈو کا رنگ (عام طور پر نیم شفاف)۔
• Primary button: بیک گراؤنڈ، ٹیکسٹ، اور بارڈر، ہر ایک اپنے الگ ہوور رنگ کے ساتھ (کل 6 قدریں)۔
• Secondary button: بیک گراؤنڈ، ٹیکسٹ، اور بارڈر، ہر ایک اپنے الگ ہوور رنگ کے ساتھ (کل 6 قدریں)۔
• Input بیک گراؤنڈ، ٹیکسٹ، بارڈر، اور لیبل: فارم فیلڈز کی اسٹائلنگ۔
• Input hover background: جب کوئی خریدار فیلڈ پر ہوور کرے تو اِن پٹ کا بیک گراؤنڈ۔

مضبوط اسکیموں کے لیے تجاویز

• زیادہ تر سیکشنز پر ایک غیر جانب دار ہلکا Background رکھیں اور ہیرو اور کال ٹو ایکشن سیکشنز پر صرف ایک ایکسنٹ اسکیم کے لیے جرات مندانہ رنگ محفوظ رکھیں۔
• Primary Button Background کو سیکشن کے Background سے واضح طور پر مختلف بنائیں تاکہ بٹن نمایاں ہو۔
• Inner Background کو مرکزی Background کی ایک ہلکی رنگت کے طور پر سیٹ کریں تاکہ کارڈز بغیر بھدے پن کے الگ پڑھے جائیں۔
• ٹیکسٹ اور اس کے بیک گراؤنڈ کے درمیان کم از کم 4.5:1 کنٹراسٹ کا ہدف رکھیں۔

فونٹس

Fonts ٹیب چار کرداروں کو ہر ایک ایک فونٹ فیملی سے نقشہ بند کرتا ہے:

• Body: پیراگراف ٹیکسٹ اور تفصیلات۔
• Heading: پورے اسٹور میں تمام ہیڈنگز۔
• Subheading: ثانوی عنوانات اور سیکشن ذیلی عنوانات۔
• Accent: قیمتوں، بیجز، اور آرائشی زور کے لیے ایک طرز دار فونٹ۔

دستیاب فونٹس: 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۔ عربی مواد والے اسٹورز کے لیے، ہر فونٹ خودکار طور پر ایک مماثل عربی ہم منصب کے ساتھ جوڑا جاتا ہے، اس لیے آپ علیحدہ سے عربی فونٹ منتخب نہیں کرتے۔

صفحے کی چوڑائی

Layout ٹیب میں ایک Page width سلائیڈر ہے جو مرکزی مواد گرڈ کی زیادہ سے زیادہ چوڑائی سیٹ کرتا ہے، 900 سے 1400 px تک 100 کے قدموں میں (یعنی 900، 1000، 1100، 1200، 1300، یا 1400؛ ڈیفالٹ 1200 ہے)۔ Page چوڑائی پر سیٹ کیے گئے سیکشنز اس قدر تک محدود ہوتے ہیں؛ Full پر سیٹ کیے گئے سیکشنز ہمیشہ پورے ویو پورٹ پر پھیلتے ہیں چاہے کچھ بھی ہو۔ منتخب چوڑائی سے تنگ ویو پورٹس پر، سیکشنز اسکرین کا 100% بھرنے کے لیے سکڑ جاتے ہیں۔

لوگو

لوگو دو جگہوں پر سیٹ ہوتا ہے: Header سیکشن کے اندر Logo بلاک، اور فوٹر میں About Us بلاک۔ بلاک پر کلک کریں، پھر اپنی میڈیا لائبریری سے کوئی تصویر چننے یا نئی اپلوڈ کرنے کے لیے اس کا Logo امیج پکر استعمال کریں۔ اسے چننے کے بعد، ڈسپلے Width اور Height سیٹ کریں (ہر ایک 20 سے 300 px)؛ دوسرا طول و عرض ایسپیکٹ ریشو برقرار رکھنے کے لیے خودکار طور پر اسکیل ہوتا ہے۔ ہیڈر لوگو بطورِ ڈیفالٹ 120 px چوڑا اور 50 px لمبا ہوتا ہے، اور آپ اس کی افقی پوزیشن (بائیں، درمیان، یا دائیں) اور پیڈنگ سیٹ کر سکتے ہیں۔ بطورِ ڈیفالٹ ہیڈر لوگو ہوم پیج سے لنک کرتا ہے؛ آپ Prohibitions ٹیب کے Header گروپ میں Logo redirects to home ٹوگل آف کر کے اسے خالص آرائشی بنا سکتے ہیں۔

فیوآئیکون

فیوآئیکون Branding ٹیب میں سیٹ کریں۔ Select favicon پر کلک کریں اور ایک PNG، JPEG، WEBP، یا ICO تصویر چنیں (تجویز کردہ سائز 32x32 یا 16x16 px)۔ یہ براؤزر ٹیبز اور بک مارکس میں ظاہر ہوتی ہے۔

باڈی بیک گراؤنڈ تصویر

Branding ٹیب میں بھی، آپ اختیاری طور پر پورے اسٹور کے پیچھے ایک Body image سیٹ کر سکتے ہیں (PNG، JPEG، یا WEBP)۔ ایک بار جب کوئی تصویر منتخب ہو جائے، تو دو کنٹرول ظاہر ہوتے ہیں: Size (Cover ویو پورٹ کو بھرتا ہے، ضرورت پڑنے پر تراش کر؛ Contain پوری تصویر کو فٹ کرتا ہے) اور Repeat (جب آن ہو، تو تصویر ٹائل ہوتی ہے اور صفحے کے ساتھ اسکرول کرتی ہے؛ جب آف ہو، تو ایک واحد تصویر ویو پورٹ میں مستحکم رہتی ہے جبکہ مواد اس پر اسکرول کرتا ہے)۔ صفحے کے لوڈ کو سست ہونے سے بچانے کے لیے ایک بھاری کمپریس شدہ تصویر استعمال کریں۔

کسٹم CSS اور JavaScript

اُن تبدیلیوں کے لیے جو معیاری سیٹنگز نہیں کر سکتیں، Custom CSS ٹیب اور Custom Javascript ٹیب ہر ایک 1,000 تک حروف قبول کرتا ہے جو اسٹور کے ہر صفحے میں داخل اور چلائے جاتے ہیں۔ انہیں کم استعمال کریں۔ کسی ایک سیکشن تک محدود اسٹائلنگ کے لیے، ہر سیکشن کا اپنے کنٹرول پینل میں اپنا Custom CSS ٹیب بھی ہوتا ہے، جو سائٹ بھر کے فیلڈ سے زیادہ محفوظ ہے۔