डिज़ाइन पेज हर ग्राहक-सामना करने वाली सतह (चेकआउट, स्टोरफ्रंट, और ग्राहक पोर्टल) के ब्रांडिंग के लिए आपका केंद्रीय केंद्र है। परिवर्तन तीनों पर तुरंत लागू होते हैं और सहेजने से पहले वास्तविक समय में पूर्वावलोकन किए जाते हैं।
मुख्य विशेषताएं
- Unified Design Hub - एक ही पेज से चेकआउट, स्टोरफ्रंट और ग्राहक पोर्टल की उपस्थिति कॉन्फ़िगर करें।
- Pre-Built Themes - एक क्यूरेट किए गए थीम से शुरुआत करें और फिर अनुकूलित करें।
- Light & Dark Mode - प्रत्येक मोड के लिए अलग रंग पैलेट परिभाषित करें।
- Live Preview - सहेजने से पहले चेकआउट, ग्राहक पोर्टल और स्टोरफ्रंट पर परिवर्तन कैसे दिखते हैं, देखें।
- Per-Section Overrides - व्यक्तिगत सेक्शन (चेकआउट, स्टोरफ्रंट, ग्राहक पोर्टल) को अन्य पर असर डाले बिना बारीकी से समायोजित करें।
- Programmatic Control - API या Checkout SDK के माध्यम से चेकआउट समय पर थीम को ओवरराइड करें।
शुरुआत करना
अपने मर्चेंट डैशबोर्ड की मुख्य साइडबार में 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 थीम। लाइम ग्रीन ऐक्सेंट इसे ऊर्जावान और ताज़गी भरा बनाते हैं। स्वच्छ सैन्स-सेरिफ़ टाइपोग्राफी के साथ उदार स्पेसिंग।- Light Mode
- Dark Mode
Terminal
डिवेलपर-केंद्रित थीम जिसमें मोनोस्पेस्ड टाइपोग्राफी और रॉयल ब्लू ऐक्सेंट हैं। तीखे कोने और तकनीकी सौंदर्य जो डेवलप टूल और API-फ़र्स्ट उत्पादों के साथ अच्छा मेल खाते हैं।- Light Mode
- Dark Mode
Bumblebee
गर्म एम्बर और गोल्ड ऐक्सेंट के साथ गोल, आधुनिक स्टाइलिंग। बोल्ड और उच्च कंट्रास्ट, उपभोक्ता-सामना करने वाले उत्पादों के लिए उपयुक्त जो प्रीमियम महसूस करना चाहते हैं।- Light Mode
- Dark Mode
Bubblegum
खेल-कूद वाला पिंक और मैजेंटा ऐक्सेंट के साथ पूरी तरह गोल कोने। एक आधुनिक, पहुँच-सक्षम लुक जो रचनात्मक टूल, डिज़ाइन उत्पादों और लाइफस्टाइल ब्रांड्स के लिए शानदार रहता है।- Light Mode
- Dark Mode
प्रति-सेक्शन ओवरराइड
प्रत्येक सेक्शन टैब (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 | केवल स्टोरफ्रंट के लिए टाइपोग्राफी, रंग और बॉर्डर अनुकूलित करने के लिए सक्षम करें |
ग्राहक पोर्टल टैब
- सदस्यता प्रबंधन
- बिलिंग इतिहास
- भुगतान विधियाँ
- वॉलेट और क्रेडिट्स
संबंधित संसाधन
Checkout Features
मुद्रा, भाषा, कर, छूट, और अधिक सहित चेकआउट सुविधाएँ।
Overlay Checkout SDK
अपने पेज पर चेकआउट को एक मोडल ओवरले के रूप में एम्बेड करें।
Inline Checkout SDK
अपने पेज लेआउट में सीधे चेकआउट एम्बेड करें।
Storefront
अपने ब्रांडेड स्टोरफ्रंट को सेट अप और प्रबंधित करें।
Customer Portal
सदस्यता और बिलिंग के लिए ग्राहक सेल्फ-सर्विस पोर्टल।
Multi-Brand Setup
एक ही खाते के तहत अलग-अलग ब्रांडिंग के साथ कई ब्रांड चलाएँ।