اپنی تھیم میں کسٹم CSS شامل کرنا

ایک cascading style sheet (CSS) اس بات کو تبدیل کرتی ہے کہ آپ کی تھیم میں عناصر کیسے ڈسپلے ہوتے ہیں، اور ایک ہی وقت میں کئی صفحات کی ظاہری شکل کو کنٹرول کر سکتی ہے۔ آپ کسٹم CSS فیچر کا استعمال کر کے اپنی تھیم کو ان سیٹنگز سے ہٹ کر بھی حسب ضرورت بنا سکتے ہیں جو تھیم میں شامل ہوتی ہیں۔ مثال کے طور پر، آپ اپنی تھیم کی رنگ کی سیٹنگز میں گریڈینٹس سیٹ کرنے کے لیے CSS استعمال کر سکتے ہیں۔ آپ اپنی پوری تھیم میں، یا اپنی تھیم کے اندر کسی ٹیمپلیٹ کے مخصوص سیکشن میں کسٹم CSS شامل کر سکتے ہیں۔ چیک آؤٹ صفحہ پر کسٹم CSS تعاون یافتہ نہیں ہے۔

اپنی CSS کو حسب ضرورت بنانے کے لیے CSS اور HTML سے کچھ واقفیت درکار ہوتی ہے۔ اپنی تھیم کو حسب ضرورت بنانے سے پہلے، یقینی بنائیں کہ آپ سمجھتے ہیں کہ کس سطح کی سپورٹ دستیاب ہے۔

اس صفحے پر

کسٹم CSS استعمال کرنے کے لیے تحفظات

اپنی تھیم میں کسٹم CSS شامل کرنے سے پہلے، درج ذیل تحفظات کا جائزہ لیں:

کسٹم CSS میں درج ذیل CSS سلیکٹرز اور خصوصیات تعاون یافتہ نہیں ہیں:
- At-rules @import، @charset، اور @namespace استعمال نہیں کیے جا سکتے
- سیکشن لیول CSS کے لیے، صرف @media، @container، @layer، اور @supports at-rules کی اجازت ہے
- سیکشن لیول CSS کے لیے، آپ shopify-section کلاس کے ساتھ تھیم کے ذریعے رینڈر کردہ ریپنگ Shopify Section عنصر کی ID یا کلاسز کو ٹارگٹ نہیں کر سکتے
- content پراپرٹی کسٹم CSS میں دستیاب نہیں ہے
اگر ایک کسٹم CSS اصول اس ٹیگ کے ساتھ ڈکلیئر کیا جاتا ہے جو پیرنٹ سیکشن کے عنصر کو ریپ کر رہا ہے، تو اسے ایک ڈیسنڈنٹ ٹیگ سمجھا جاتا ہے، اور سٹائلنگ کا اصول اس سیکشن پر لاگو ہوتا ہے۔ نوٹ کریں کہ ڈیفالٹ کے طور پر پیرنٹ سیکشن کو <div> ٹیگ میں ریپ کیا جاتا ہے، لیکن اسے تھیم ڈویلپرز کے ذریعے سیکشن سکیما میں اجازت یافتہ اقدار میں سے کسی پر بھی سیٹ کیا جا سکتا ہے۔
فی الحال کسٹم CSS میں URLs استعمال کرتے وقت صرف https://cdn.shopify.com ڈومین کی اجازت ہے۔
کسٹم فونٹس پر پابندی نہیں ہے۔ تاہم، کسٹم فونٹس ایک علیحدہ وسیلہ ہیں جو ٹیکسٹ کے رینڈر ہونے سے پہلے براؤزرز کے ذریعے ڈاؤن لوڈ کیے جاتے ہیں، جس سے سٹور کی مجموعی کارکردگی متاثر ہو سکتی ہے۔ یہ یقینی بنانا آپ کی ذمہ داری ہے کہ آپ کا سٹور فرنٹ کسٹم فونٹس سے منفی طور پر متاثر نہ ہو۔ اپنی تھیم میں کسٹم فونٹس استعمال کرنے کا طریقہ جانیں۔
پوری تھیم کو متاثر کرنے والے CSS اصول 1500 کریکٹرز تک محدود ہیں۔
کسی مخصوص سیکشن کو متاثر کرنے والے CSS اصول 500 کریکٹرز تک محدود ہیں۔
آپ کے استعمال کردہ CSS سلیکٹرز یا کلاسز پر منحصر ہے، آپ کی تھیم کو اپ ڈیٹ کرنے سے آپ کی کسٹم CSS کام کرنا بند کر سکتی ہے۔

Shopify جدید تھیم کسٹمائزیشنز کو سپورٹ نہیں کرتا ہے۔ اگر آپ کو اپنی کسٹم CSS میں ان حدود سے متعلق کسی خامی کا سامنا کرنا پڑتا ہے اور آپ یہ طے نہیں کر سکتے کہ خامی کی وجہ کیا ہے، تو دستیاب دیگر سپورٹ وسائل کی فہرست سے رجوع کریں۔

کسٹم CSS شامل کریں

کسٹم CSS کو آپ کی پوری تھیم میں شامل کیا جا سکتا ہے جو چیک آؤٹ صفحہ کے علاوہ آپ کے آن لائن سٹور کے تمام صفحات پر اثر انداز ہوتی ہے۔ مثال کے طور پر، آپ اپنے پورے سٹور میں بٹن نظر آنے کا طریقہ تبدیل کر سکتے ہیں۔

اقدامات:

اپنے Shopify ایڈمن سے، آن لائن سٹور > تھیمز پر جائیں۔
تھیم ایڈٹ کریں پر کلک کریں۔
تھیم سیٹنگز پر کلک کریں۔
کسٹم CSS پر کلک کریں۔
اپنا کوڈ شامل کریں۔
محفوظ کریں پر کلک کریں۔

تھیم کی سیٹنگز میں کسٹم CSS باکس کا مقام

کسٹم CSS کو آپ کی تھیم کے کسی مخصوص سیکشن میں بھی شامل کیا جا سکتا ہے۔ اگر آپ اپنی تھیم کے کسی سیکشن میں کسٹم CSS شامل کرتے ہیں، تو یہ CSS اسی سیکشن تک محدود رہتی ہے۔ مثال کے طور پر، آپ کسی ایک سیکشن پر کسٹم فونٹ سائز یا پس منظر کا رنگ لاگو کر سکتے ہیں۔

اقدامات:

اپنے Shopify ایڈمن سے، آن لائن سٹور > تھیمز پر جائیں۔
تھیم ایڈٹ کریں پر کلک کریں۔
اس سیکشن پر کلک کریں جس میں آپ CSS شامل کرنا چاہتے ہیں۔
سیکشن پراپرٹیز پینل کے نیچے، کسٹم CSS پر کلک کریں۔
اپنا کوڈ شامل کریں۔
محفوظ کریں پر کلک کریں۔

سیکشن کی سیٹنگز میں کسٹم CSS باکس کا مقام

CSS کے لیے اضافی وسائل

اگر آپ CSS کے بارے میں مزید جاننے میں دلچسپی رکھتے ہیں، تو آپ درج ذیل میں سے کچھ وسائل کو دریافت کر سکتے ہیں: