> ## Documentation Index > Fetch the complete documentation index at: https://docs.dodopayments.com/llms.txt > Use this file to discover all available pages before exploring further. # डिज़ाइन और थीम अनुकूलन > एक ही स्थान से अपने चेकआउट, स्टोरफ्रंट और ग्राहक पोर्टल के लुक और फील को अनुकूलित करें। पूर्व-निर्मित थीम चुनें, टाइपोग्राफी और रंग कॉन्फ़िगर करें, और प्रत्येक अनुभाग के लिए ओवरराइड लागू करें, वह भी लाइव पूर्वावलोकन के साथ। डिज़ाइन सेटिंग्स पेज जिसमें चेकआउट, ग्राहक पोर्टल, और स्टोरफ्रंट की लाइव प्रीव्यू देखी जा रही है डिज़ाइन पेज हर ग्राहक-सामना करने वाली सतह (चेकआउट, स्टोरफ्रंट, और ग्राहक पोर्टल) के ब्रांडिंग के लिए आपका केंद्रीय केंद्र है। परिवर्तन तीनों पर तुरंत लागू होते हैं और सहेजने से पहले वास्तविक समय में पूर्वावलोकन किए जाते हैं। ## मुख्य विशेषताएं 1. **Unified Design Hub** - एक ही पेज से चेकआउट, स्टोरफ्रंट और ग्राहक पोर्टल की उपस्थिति कॉन्फ़िगर करें। 2. **Pre-Built Themes** - एक क्यूरेट किए गए थीम से शुरुआत करें और फिर अनुकूलित करें। 3. **Light & Dark Mode** - प्रत्येक मोड के लिए अलग रंग पैलेट परिभाषित करें। 4. **Live Preview** - सहेजने से पहले चेकआउट, ग्राहक पोर्टल और स्टोरफ्रंट पर परिवर्तन कैसे दिखते हैं, देखें। 5. **Per-Section Overrides** - व्यक्तिगत सेक्शन (चेकआउट, स्टोरफ्रंट, ग्राहक पोर्टल) को अन्य पर असर डाले बिना बारीकी से समायोजित करें। 6. **Programmatic Control** - API या Checkout SDK के माध्यम से चेकआउट समय पर थीम को ओवरराइड करें। ## शुरुआत करना अपने मर्चेंट डैशबोर्ड में **Settings → Design** पर नेविगेट करें। डिज़ाइन पेज में चार टैब होते हैं: | Tab | Purpose | | ------------------- | ------------------------------------------------------------ | | **General** | व्यवसाय का नाम, लोगो, थीम चयन, और वैश्विक उन्नत सेटिंग्स | | **Checkout** | चेकआउट पेज के लिए विशेष रूप से थीम सेटिंग्स को ओवरराइड करें | | **Storefront** | स्टोरफ्रंट लेआउट कॉन्फ़िगर करें और थीम सेटिंग्स ओवरराइड करें | | **Customer Portal** | ग्राहक पोर्टल के लिए थीम सेटिंग्स ओवरराइड करें | ## सामान्य सेटिंग्स **General** टैब आपकी मौलिक ब्रांड पहचान और वैश्विक थीम को नियंत्रित करता है। जनरल टैब में टाइपोग्राफी, रंग, और बॉर्डर कॉन्फ़िगरेशन के साथ उन्नत सेटिंग्स हैं ### मूल कॉन्फ़िगरेशन | Setting | Description | | ----------------- | ------------------------------------------------------------------- | | **Business Name** | वह नाम जो चेकआउट, स्टोरफ्रंट, और ग्राहक पोर्टल पर प्रदर्शित होता है | | **Business Logo** | आपका ब्रांड लोगो जो सभी ग्राहक-सामना करने वाले पृष्ठों में दिखता है | | **Theme** | प्रारंभिक बिंदु के रूप में एक पूर्व-निर्मित थीम चुनें | ### उन्नत सेटिंग्स **Advanced Settings** को विस्तारित करें ताकि आपको सूक्ष्म नियंत्रण मिलें: उन्नत सेटिंग्स खुली हुई हैं, जिसमें लाइट और डार्क मोड के लिए पूर्ण रंग विन्यास है #### टाइपोग्राफी | Setting | Options | Description | | ------------------ | --------------------------------------- | -------------------------------------------- | | **Primary Font** | Any Google Font | हेडिंग और बॉडी टेक्स्ट के लिए मुख्य फ़ॉन्ट | | **Secondary Font** | Any Google Font | लेबल और द्वितीयक टेक्स्ट के लिए सहायक फ़ॉन्ट | | **Font Size** | `xs`, `sm`, `md`, `lg`, `xl`, `2xl` | वैश्विक आधार फ़ॉन्ट आकार | | **Font Weight** | `normal`, `medium`, `bold`, `extraBold` | डिफ़ॉल्ट फ़ॉन्ट वजन | #### रंग कॉन्फ़िगरेशन **Light Mode** और **Dark Mode** के लिए अलग रंग पैलेट परिभाषित करें। प्रत्येक मोड निम्न गुणों का समर्थन करता है: | Property | Description | | ------------------------- | ------------------------------- | | **Background Primary** | मुख्य पृष्ठभूमि रंग | | **Background Secondary** | द्वितीयक पृष्ठभूमि (टैब, कार्ड) | | **Text Primary** | मुख्य टेक्स्ट रंग | | **Text Secondary** | म्यूट किए गए टेक्स्ट का रंग | | **Button Primary** | मुख्य बटन की पृष्ठभूमि | | **Button Primary Text** | मुख्य बटन पर टेक्स्ट का रंग | | **Button Secondary** | द्वितीयक बटन की पृष्ठभूमि | | **Button Secondary Text** | द्वितीयक बटन पर टेक्स्ट का रंग | | **Border Primary** | मुख्य बॉर्डर रंग | | **Border Secondary** | ऐक्सेंट बॉर्डर रंग | #### बॉर्डर | Setting | Description | | ----------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | **Border Radius** | इनपुट, बटन, टैब और कार्ड की गोलाई को नियंत्रित करता है (जैसे, `0` तीखे कोनों के लिए, `8px` गोल कोनों के लिए, `16px` पिल-आकार के लिए) | ## पूर्व-निर्मित थीम Dodo Payments चार क्यूरेट किए गए थीम के साथ आता है। General टैब पर **Theme** ड्रॉपडाउन से एक चुनें ताकि चेकआउट, स्टोरफ्रंट और ग्राहक पोर्टल पर तुरंत एक सुसंगत डिज़ाइन लागू हो जाए। ### Dodo Pulses डिफ़ॉल्ट Dodo Payments थीम। लाइम ग्रीन ऐक्सेंट इसे ऊर्जावान और ताज़गी भरा बनाते हैं। स्वच्छ सैन्स-सेरिफ़ टाइपोग्राफी के साथ उदार स्पेसिंग। डोडो पल्सेस थीम लाइट मोड में चेकआउट, ग्राहक पोर्टल, और स्टोरफ्रंट दिखा रहा है डोडो पल्सेस थीम डार्क मोड में चेकआउट, ग्राहक पोर्टल, और स्टोरफ्रंट दिखा रहा है ### Terminal डिवेलपर-केंद्रित थीम जिसमें मोनोस्पेस्ड टाइपोग्राफी और रॉयल ब्लू ऐक्सेंट हैं। तीखे कोने और तकनीकी सौंदर्य जो डेवलप टूल और API-फ़र्स्ट उत्पादों के साथ अच्छा मेल खाते हैं। टर्मिनल थीम लाइट मोड में चेकआउट दिखा रहा है जिसमें नीले रंग की झलकें और मोनोस्पेस्ड फोंट है टर्मिनल थीम डार्क मोड में चेकआउट दिखा रहा है जिसमें नीले रंग की झलकें और मोनोस्पेस्ड फोंट है ### Bumblebee गर्म एम्बर और गोल्ड ऐक्सेंट के साथ गोल, आधुनिक स्टाइलिंग। बोल्ड और उच्च कंट्रास्ट, उपभोक्ता-सामना करने वाले उत्पादों के लिए उपयुक्त जो प्रीमियम महसूस करना चाहते हैं। बम्बलबी थीम लाइट मोड में चेकआउट दिखा रहा है जिसमें एम्बर आँशिक झलकें हैं बम्बलबी थीम डार्क मोड में चेकआउट दिखा रहा है जिसमें गोल्ड अधिभारित झलकें हैं ### Bubblegum खेल-कूद वाला पिंक और मैजेंटा ऐक्सेंट के साथ पूरी तरह गोल कोने। एक आधुनिक, पहुँच-सक्षम लुक जो रचनात्मक टूल, डिज़ाइन उत्पादों और लाइफस्टाइल ब्रांड्स के लिए शानदार रहता है। बबलगम थीम लाइट मोड में चेकआउट, ग्राहक पोर्टल, और स्टोरफ्रंट दिखा रहा है जिसमें गुलाबी झलकें हैं बबलगम थीम डार्क मोड में चेकआउट, ग्राहक पोर्टल, और स्टोरफ्रंट दिखा रहा है जिसमें गुलाबी झलकें हैं पूर्व-निर्मित थीम चुनने के बाद, आप उन्नत सेटिंग्स में व्यक्तिगत गुणों को और अनुकूलित कर सकते हैं। कोई भी निर्दिष्ट नहीं किया गया गुण थीम डिफ़ॉल्ट्स पर लौटेगा। ## प्रति-सेक्शन ओवरराइड प्रत्येक सेक्शन टैब (Checkout, Storefront, Customer Portal) में एक **Override Theme** टॉगल होता है। सक्षम करने पर, आप उस सेक्शन की उपस्थिति को वैश्विक थीम से स्वतंत्र रूप से अनुकूलित कर सकते हैं। ### चेकआउट टैब चेकआउट टैब जिसमें उत्पाद विवरण और भुगतान फॉर्म के साथ पूरा चेकआउट प्रीव्यू दिखाया गया है विशेष रूप से चेकआउट अनुभव के लिए टाइपोग्राफी, रंग और बॉर्डर सेटिंग्स को ओवरराइड करें। लाइव पूर्वावलोकन में दिखाई देता है: * उत्पाद जानकारी और मूल्य निर्धारण * एक्सप्रेस चेकआउट विकल्प (Apple Pay, Google Pay) * भुगतान विधि चयन और कार्ड फॉर्म * डिस्काउंट कोड इनपुट और मूल्य ब्रेकडाउन ### स्टोरफ्रंट टैब स्टोरफ्रंट टैब जिसमें स्टोर यूआरएल, ब्रांडिंग नियंत्रण, और स्टोरफ्रंट प्रीव्यू दिखाया गया है स्टोरफ्रंट-विशिष्ट सेटिंग्स कॉन्फ़िगर करें: | Setting | Description | | ----------------------- | --------------------------------------------------------------------------------- | | **Store URL** | आपका स्टोरफ्रंट पता (उदा., `store.dodopayments.com/your-store`) | | **Store Name** | स्टोरफ्रंट पर प्रदर्शित नाम को टॉगल और सेट करें | | **Store Logo** | स्टोरफ्रंट हेडर के लिए लोगो टॉगल करें और अपलोड करें | | **Store Banner** | बैनर इमेज को टॉगल और अपलोड करें | | **Product Description** | कार्ड पर उत्पाद विवरण दिखाने या छुपाने के लिए टॉगल करें | | **Override Theme** | केवल स्टोरफ्रंट के लिए टाइपोग्राफी, रंग और बॉर्डर अनुकूलित करने के लिए सक्षम करें | ### ग्राहक पोर्टल टैब ग्राहक पोर्टल टैब जिसमें सदस्यता प्रबंधन, बिलिंग इतिहास, और भुगतान विधियों का प्रीव्यू दिखाया गया है ग्राहक पोर्टल के लिए थीम ओवरराइड करें, जिसमें शामिल हैं: * सदस्यता प्रबंधन * बिलिंग इतिहास * भुगतान विधियाँ * वॉलेट और क्रेडिट्स ## संबंधित संसाधन मुद्रा, भाषा, कर, छूट, और अधिक सहित चेकआउट सुविधाएँ। अपने पेज पर चेकआउट को एक मोडल ओवरले के रूप में एम्बेड करें। अपने पेज लेआउट में सीधे चेकआउट एम्बेड करें। अपने ब्रांडेड स्टोरफ्रंट को सेट अप और प्रबंधित करें। सदस्यता और बिलिंग के लिए ग्राहक सेल्फ-सर्विस पोर्टल। एक ही खाते के तहत अलग-अलग ब्रांडिंग के साथ कई ब्रांड चलाएँ।