अपनी थीम में कस्टम CSS जोड़ना
एक कैस्केडिंग स्टाइल शीट (CSS) यह बदल देती है कि आपकी थीम में एलिमेंट कैसे डिस्प्ले होते हैं और यह एक ही समय में कई पेज के रंग-रूप को कंट्रोल कर सकती है। आप कस्टम CSS सुविधा का इस्तेमाल करके, थीम में पहले से मौजूद सेटिंग के अलावा भी अपनी थीम को कस्टमाइज़ कर सकते हैं। उदाहरण के लिए, आप अपनी थीम की रंग सेटिंग में ग्रेडिएंट सेट करने के लिए CSS का इस्तेमाल कर सकते हैं। आप अपनी पूरी थीम में या अपनी थीम के भीतर किसी टेम्पलेट के खास सेक्शन में कस्टम CSS जोड़ सकते हैं। चेकआउट पेज पर कस्टम CSS सपोर्ट नहीं किया जाता है।
अपनी CSS को कस्टमाइज़ करने के लिए, आपको CSS और HTML की कुछ जानकारी होना ज़रूरी है। अपनी थीम को कस्टमाइज़ करने से पहले, यह पक्का कर लें कि आप समझते हैं कि किस स्तर की सहायता उपलब्ध है।
इस पेज पर
कस्टम CSS का उपयोग करने से जुड़ी ध्यान देने वाली बातें
अपनी थीम में कस्टम CSS जोड़ने से पहले, नीचे दी गई बातों पर विचार करें:
- कस्टम CSS में निम्नलिखित CSS सिलेक्टर और प्रॉपर्टी सपोर्ट नहीं की जाती हैं:
@import,@charsetऔर@namespaceएट-रूल्स का इस्तेमाल नहीं किया जा सकता- सेक्शन-लेवल CSS के लिए, सिर्फ़
@media,@container,@layerऔर@supportsएट-रूल्स की अनुमति है - सेक्शन-लेवल CSS के लिए, आप
shopify-sectionक्लास वाली थीम से रेंडर किए गए रैपिंग Shopify सेक्शन एलिमेंट की आईडी या क्लास को टारगेट नहीं कर सकते - कस्टम CSS में
contentप्रॉपर्टी उपलब्ध नहीं है
- अगर पैरेंट सेक्शन एलिमेंट को रैप करने वाले टैग के साथ एक कस्टम CSS नियम घोषित किया जाता है, तो इसे एक डिसेंडेंट टैग माना जाता है और उस सेक्शन पर स्टाइलिंग नियम लागू होता है। ध्यान दें कि डिफ़ॉल्ट रूप से पैरेंट सेक्शन एक
<div>टैग में रैप होता है, लेकिन इसे थीम डेवलपर द्वारा सेक्शन स्कीमा में किसी भी अनुमत मान पर सेट किया जा सकता है। - फ़िलहाल, कस्टम CSS में URL का इस्तेमाल करते समय सिर्फ़ https://cdn.shopify.com डोमेन की अनुमति है।
- कस्टम फ़ॉन्ट प्रतिबंधित नहीं हैं। हालांकि, कस्टम फ़ॉन्ट एक अलग संसाधन हैं, जिन्हें टेक्स्ट रेंडर होने से पहले ब्राउज़र द्वारा डाउनलोड किया जाता है, जो किसी स्टोर के समग्र प्रदर्शन को प्रभावित कर सकता है। यह पक्का करना आपकी ज़िम्मेदारी है कि कस्टम फ़ॉन्ट से आपका स्टोरफ़्रंट बुरी तरह प्रभावित न हो। अपनी थीम में कस्टम फ़ॉन्ट का इस्तेमाल करने का तरीका जानें।
- पूरी थीम पर असर डालने वाले CSS नियम 1500 कैरेक्टर तक सीमित हैं।
- किसी खास सेक्शन पर असर डालने वाले CSS नियम 500 कैरेक्टर तक सीमित हैं।
- आपके इस्तेमाल किए जाने वाले CSS सिलेक्टर या क्लास के आधार पर, आपकी थीम को अपडेट करने से आपका कस्टम CSS काम करना बंद कर सकता है।
Shopify, एडवांस थीम कस्टमाइज़ेशन को सपोर्ट नहीं करता है। अगर आपको अपने कस्टम CSS में इन सीमाओं से जुड़ी कोई गड़बड़ी मिलती है और आप यह पता नहीं लगा पाते हैं कि गड़बड़ी किस वजह से हो रही है, तो उपलब्ध अन्य सहायता संसाधनों की सूची देखें।
कस्टम CSS जोड़ें
कस्टम CSS को आपकी पूरी थीम में जोड़ा जा सकता है, जो चेकआउट पेज को छोड़कर आपके ऑनलाइन स्टोर के सभी पेज पर असर डालता है। उदाहरण के लिए, आप यह बदल सकते हैं कि आपके पूरे स्टोर में बटन कैसे दिखाए जाते हैं।
चरण:
अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।
थीम एडिट करें पर क्लिक करें।
थीम सेटिंग पर क्लिक करें।
कस्टम CSS पर क्लिक करें।
अपना कोड जोड़ें।
सेव करें पर क्लिक करें।
कस्टम CSS को आपकी थीम के किसी खास सेक्शन में भी जोड़ा जा सकता है। अगर आप अपनी थीम के किसी सेक्शन में कस्टम CSS जोड़ते हैं, तो CSS उस सेक्शन के लिए स्कोप किया जाता है। उदाहरण के लिए, आप किसी एक सेक्शन पर कस्टम फ़ॉन्ट साइज़ या बैकग्राउंड का रंग लागू कर सकते हैं।
चरण:
अपने Shopify एडमिन से, ऑनलाइन स्टोर > थीम पर जाएं।
थीम एडिट करें पर क्लिक करें।
उस सेक्शन पर क्लिक करें जिसमें आप CSS जोड़ना चाहते हैं।
सेक्शन प्रॉपर्टी पैनल के नीचे, कस्टम CSS पर क्लिक करें।
अपना कोड जोड़ें।
सेव करें पर क्लिक करें।
CSS के लिए अतिरिक्त संसाधन
अपनी CSS को कस्टमाइज़ करने के लिए, आपको CSS और HTML की कुछ जानकारी होना ज़रूरी है। अपनी थीम को कस्टमाइज़ करने से पहले, यह पक्का कर लें कि आप समझते हैं कि किस स्तर की सहायता उपलब्ध है।
अगर आप CSS के बारे में और जानने में दिलचस्पी रखते हैं, तो आप नीचे दिए गए कुछ संसाधनों को देख सकते हैं: