Skip to main content
डिज़ाइन सेटिंग्स पेज जिसमें चेकआउट, ग्राहक पोर्टल, और स्टोरफ्रंट की लाइव प्रीव्यू देखी जा रही है
Design पेज हर customer-facing surface—checkout, storefront और customer portal—की branding के लिए आपका केंद्रीय केंद्र है। बदलाव तीनों पर तुरंत लागू होते हैं और save करने से पहले real time में preview किए जाते हैं। Test mode और live mode में अलग-अलग designs होते हैं — Copy Design From Test to Live Mode देखें।

मुख्य विशेषताएं

  • एकीकृत डिज़ाइन हब — एक ही पेज से checkout, storefront और customer portal का स्वरूप कॉन्फ़िगर करें
  • पहले से बनाए गए थीम — चुने गए थीम से शुरुआत करें और उसमें बदलाव करें
  • लाइट और डार्क मोड — प्रत्येक मोड के लिए अलग-अलग रंग पैलेट निर्धारित करें
  • लाइव प्रीव्यू — सेव करने से पहले देखें कि आपके बदलाव सभी surfaces पर कैसे दिखाई देते हैं
  • प्रति-सेक्शन ओवरराइड — अन्य सेक्शन को प्रभावित किए बिना अलग-अलग सेक्शन में सूक्ष्म बदलाव करें
  • प्रोग्रामेटिक नियंत्रण — Checkout Sessions API (customization.theme_config) के माध्यम से checkout के समय थीम ओवरराइड करें। किसी session का theme_config dashboard design को प्राथमिकता देता है। Checkout SDK का client-side themeConfig विकल्प deprecated है
  • टेस्ट डिज़ाइन को लाइव में कॉपी करें — टेस्ट मोड में बेहतर बनाया गया डिज़ाइन एक ही चरण में लाइव मोड में ले जाएँ

शुरुआत करना

अपने मर्चेंट डैशबोर्ड में Settings → Design पर नेविगेट करें। डिज़ाइन पेज में चार टैब होते हैं:

सामान्य सेटिंग्स

General टैब आपकी मौलिक ब्रांड पहचान और वैश्विक थीम को नियंत्रित करता है।
जनरल टैब में टाइपोग्राफी, रंग, और बॉर्डर कॉन्फ़िगरेशन के साथ उन्नत सेटिंग्स हैं

मूल कॉन्फ़िगरेशन

उन्नत सेटिंग्स

Advanced Settings को विस्तारित करें ताकि आपको सूक्ष्म नियंत्रण मिलें:
उन्नत सेटिंग्स खुली हुई हैं, जिसमें लाइट और डार्क मोड के लिए पूर्ण रंग विन्यास है

टाइपोग्राफी

रंग कॉन्फ़िगरेशन

Light Mode और Dark Mode के लिए अलग-अलग color palettes define करें। प्रत्येक mode में ये विकल्प उपलब्ध हैं:

बॉर्डर

पूर्व-निर्मित थीम

Dodo Payments चार क्यूरेट किए गए थीम के साथ आता है। General टैब पर Theme ड्रॉपडाउन से एक चुनें ताकि चेकआउट, स्टोरफ्रंट और ग्राहक पोर्टल पर तुरंत एक सुसंगत डिज़ाइन लागू हो जाए।

Dodo Pulses

डिफ़ॉल्ट Dodo Payments थीम। लाइम ग्रीन ऐक्सेंट इसे ऊर्जावान और ताज़गी भरा बनाते हैं। स्वच्छ सैन्स-सेरिफ़ टाइपोग्राफी के साथ उदार स्पेसिंग।
डोडो पल्सेस थीम लाइट मोड में चेकआउट, ग्राहक पोर्टल, और स्टोरफ्रंट दिखा रहा है

Dodo Pulses in light mode

Terminal

डिवेलपर-केंद्रित थीम जिसमें मोनोस्पेस्ड टाइपोग्राफी और रॉयल ब्लू ऐक्सेंट हैं। तीखे कोने और तकनीकी सौंदर्य जो डेवलप टूल और API-फ़र्स्ट उत्पादों के साथ अच्छा मेल खाते हैं।
टर्मिनल थीम लाइट मोड में चेकआउट दिखा रहा है जिसमें नीले रंग की झलकें और मोनोस्पेस्ड फोंट है

Terminal in light mode

Bumblebee

गर्म एम्बर और गोल्ड ऐक्सेंट के साथ गोल, आधुनिक स्टाइलिंग। बोल्ड और उच्च कंट्रास्ट, उपभोक्ता-सामना करने वाले उत्पादों के लिए उपयुक्त जो प्रीमियम महसूस करना चाहते हैं।
बम्बलबी थीम लाइट मोड में चेकआउट दिखा रहा है जिसमें एम्बर आँशिक झलकें हैं

Bumblebee in light mode

Bubblegum

खेल-कूद वाला पिंक और मैजेंटा ऐक्सेंट के साथ पूरी तरह गोल कोने। एक आधुनिक, पहुँच-सक्षम लुक जो रचनात्मक टूल, डिज़ाइन उत्पादों और लाइफस्टाइल ब्रांड्स के लिए शानदार रहता है।
बबलगम थीम लाइट मोड में चेकआउट, ग्राहक पोर्टल, और स्टोरफ्रंट दिखा रहा है जिसमें गुलाबी झलकें हैं

Bubblegum in light mode

Pre-built theme चुनने के बाद, Advanced Settings में अलग-अलग properties को customize करें। निर्दिष्ट न की गई सभी properties theme defaults पर वापस चली जाती हैं।

प्रति-सेक्शन ओवरराइड

प्रत्येक सेक्शन टैब (Checkout, Storefront, Customer Portal) में एक Override Theme टॉगल होता है। सक्षम करने पर, आप उस सेक्शन की उपस्थिति को वैश्विक थीम से स्वतंत्र रूप से अनुकूलित कर सकते हैं।

चेकआउट टैब

चेकआउट टैब जिसमें उत्पाद विवरण और भुगतान फॉर्म के साथ पूरा चेकआउट प्रीव्यू दिखाया गया है
विशेष रूप से checkout experience के लिए typography, colors और border settings को override करें। Live preview में ये दिखते हैं:
  • Product information और pricing
  • Express checkout options (Apple Pay, Google Pay)
  • Payment method selection और card form
  • Discount code input और price breakdown

Storefront Tab

Storefront tab showing store URL, branding controls, and storefront preview
Storefront-specific settings configure करें:

Customer Portal Tab

Customer portal tab showing subscription management, billing history, and payment methods preview
Customer Portal के लिए theme को override करें, जिसमें शामिल हैं:
  • Subscription management
  • Billing history
  • Payment methods
  • Wallet और credits

Copy Design From Test to Live Mode

Test mode और live mode में अलग-अलग design configurations होती हैं। Testing के दौरान बनाया गया theme वास्तविक customers को automatically दिखाई नहीं देता। इसे manually फिर से बनाने के बजाय, अपने design को test mode से live mode में एक step में copy करें।
1

Open Design in Test Mode

टेस्ट मोड पर स्विच करें और Settings → Design पर जाएँ। पहले सभी लंबित बदलाव सेव करें: केवल सेव किया गया टेस्ट डिज़ाइन ही कॉपी किया जाता है।
2

Start the Copy

Copy to Live Mode पर क्लिक करें। यह बटन तब दिखाई देता है जब आपके पास सेव किया गया थीम या प्रकाशित टेस्ट storefront हो, और लाइव मोड सक्रिय होना चाहिए।
3

Choose What to Copy

Theme & customizations (सामान्य थीम के साथ checkout, storefront और Customer Portal के ओवरराइड) और Storefront details (store का नाम, लोगो और बैनर) चुनें। यदि टेस्ट मोड में कोई storefront प्रकाशित नहीं है, तो Storefront details उपलब्ध नहीं होगा।
4

Confirm

डायलॉग में Copy to Live Mode पर क्लिक करें।
Copy करने से मौजूदा live mode design overwrite हो जाता है। Copy करने के बाद अपने live checkout और storefront की समीक्षा करें, ताकि यह सुनिश्चित हो सके कि सब कुछ आपकी अपेक्षा के अनुसार दिख रहा है।

Checkout Features

Currency, language, tax, discounts और अन्य सुविधाओं सहित checkout features।

Overlay Checkout SDK

अपनी page पर checkout को modal overlay के रूप में embed करें।

Inline Checkout SDK

Checkout को सीधे अपने page layout में embed करें।

Storefront

अपना branded storefront set up और manage करें।

Customer Portal

Subscriptions और billing के लिए customer self-service portal।

Multi-Brand Setup

अलग branding के साथ एक account के अंतर्गत multiple brands चलाएँ।
अंतिम संशोधन 28 सितंबर 2026