{"schemaVersion":"2.0.0","defaultLanguage":"en","languages":["en"],"launchScreenId":"article_screen_Z6MyBxEKtC8aO06IPo00","screens":{"article_screen_Z6MyBxEKtC8aO06IPo00":{"id":"article_screen_Z6MyBxEKtC8aO06IPo00","name":"Onboarding wizard: theme customization","tags":["article","support-flow-guide"],"screenType":"FlexibleLayout","position":{"x":0,"y":0},"content":{"canvas":{"background":{"kind":"solid","content":{"color":"#F7F8FA"}},"insets":{"top":0,"end":0,"bottom":0,"start":0},"webViewBackgroundColor":"#F7F8FA"},"animated":false,"offlineFirst":true,"flexibleLayout":{"scrollable":true,"insets":{"top":48,"end":32,"bottom":56,"start":32},"sections":[{"id":"intro","order":0,"kind":"Text","label":"Intro","layout":{"heightKind":"auto"},"textContent":{"title":{"translations":{"en":"Onboarding wizard: theme customization"},"kind":"static","appearance":{"align":"start","fontSize":30,"fontWeight":800,"lineHeight":36,"color":"#101828"}},"subtitle":{"translations":{"en":"Tune high-level theme settings now; do screen-specific copy/layout later in the Screen Editor."},"kind":"static","appearance":{"align":"start","fontSize":17,"fontWeight":400,"lineHeight":26,"color":"#475467"}}}},{"id":"onboarding-wizard-theme-customize-how-to-get-here","order":1,"kind":"Text","label":"onboarding-wizard-theme-customize-how-to-get-here","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Reach the Customize Theme step"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Customization happens on the last step of the Create Onboarding wizard. After you pick a theme card on the Select Theme step, click Next — the wizard opens Customize Theme, showing a live preview carousel on the left and the styling controls on the right. Everything you set here becomes the default for every screen in the new onboarding, and you finish by clicking Create. If you have not opened the wizard yet, start by creating an onboarding and advancing through Basic Info and Select Theme first."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-colors-text","order":2,"kind":"Text","label":"Set the color scheme","layout":{"heightKind":"auto","margin":{"top":28}},"textContent":{"title":{"translations":{"en":"Set the color scheme"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Three color pickers define the whole theme. Button Background fills the color behind your buttons, Titles & Subtitles sets the color of heading text (subtitles automatically reuse it at half opacity for a softer, secondary look), and Button Title sets the text color inside buttons. These colors carry into every screen you create, so set them once here."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-colors-image","order":3,"kind":"Media","label":"Set the color scheme","layout":{"heightKind":"fixed","heightValue":360,"padding":{"top":8,"end":0,"bottom":8,"start":0},"cornerRadius":{"uniform":12}},"mediaContent":{"kind":"Image","content":{"image":{"translations":{"en":{"original":"https://api.segmently.ai/assets/projects/eEZgfU4hvE9WtLkU30Dg/cli-assets/guide-images/20260601151454_customize-wizard-theme-wizard-theme-customize/origin.png","name":"Set the color scheme"}},"appearance":{}}},"appearance":{"scaleMode":"scaleAspectFit","cornerRadii":{"uniform":12}}}},{"id":"onboarding-wizard-theme-customize-fonts-text","order":4,"kind":"Text","label":"Choose fonts and text styling","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Choose fonts and text styling"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Main Font Family is the base font used for all text. You can give Titles and Subtitles their own family, weight, size, color, and alignment if you want them to stand out. Your font choices flow into option cards, product cards, and every screen, so this is what sets the overall voice and feel of the funnel."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-options-list-text","order":5,"kind":"Text","label":"Style the option and product cards","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Style the option and product cards"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"These controls style the tappable cards visitors choose from. Checkbox Kind sets circle or square selection markers, List Border Radius rounds the card corners (0 = sharp, 32 = very rounded; around 12 looks modern), and Item Title and Item Subtitle set the text inside each card. They apply to list, grid, and paywall product screens — anywhere a visitor makes a choice."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-backdrop-text","order":6,"kind":"Text","label":"Set the background","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Set the background"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Choose a solid color, a photo, or a video clip to sit behind every screen. Whatever you pick must keep headings, body text, and buttons easy to read — low contrast here hurts conversion on every single screen, so favor a calm background over a busy one."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-header-text","order":7,"kind":"Text","label":"Configure the header bar","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Configure the header bar"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"The header bar sits at the top of every screen. Toggle the back button, the skip button, and the progress indicator on or off. Leaving the progress indicator on reassures visitors how far along they are, which helps them finish; colors and fonts here inherit from your theme automatically."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-action-bar-text","order":8,"kind":"Text","label":"Configure the action buttons","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Configure the action buttons"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"These are the buttons at the bottom of each screen — a primary one (usually 'Continue') and an optional secondary one. Set whether each is shown, its label style, and its look. Their colors pull from your Titles & Subtitles and Button Title theme colors, so they stay consistent across all screens without per-screen tweaks."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-live-preview-text","order":9,"kind":"Text","label":"Review the live preview","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Review the live preview"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"The carousel on the left shows sample screens using your current settings, updating in real time as you change them. Use it to confirm text is readable and spacing looks right before you commit — fixing the theme now is far faster than editing every screen one by one afterward."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-create-text","order":10,"kind":"Text","label":"Create the onboarding","layout":{"heightKind":"auto","margin":{"top":20}},"textContent":{"title":{"translations":{"en":"Create the onboarding"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}},"subtitle":{"translations":{"en":"Click Create to apply this theme and generate the draft. Everything you set here is just a starting point — you can still override the colors, fonts, and layout on any individual screen later in the Screen Editor."},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":400,"lineHeight":25,"color":"#344054"}}}},{"id":"onboarding-wizard-theme-customize-related-head","order":11,"kind":"Text","label":"onboarding-wizard-theme-customize-related-head","layout":{"heightKind":"auto","margin":{"top":40}},"textContent":{"title":{"translations":{"en":"Related guides"},"kind":"static","appearance":{"align":"start","fontSize":21,"fontWeight":750,"lineHeight":28,"color":"#101828"}}}},{"id":"onboarding-wizard-theme-customize-related-0","order":12,"kind":"Text","label":"onboarding-wizard-theme-customize-related-0","layout":{"heightKind":"auto","margin":{"top":12}},"textContent":{"title":{"translations":{"en":"Onboarding wizard: theme selection<sep>  —  </sep><detail>@open</detail>"},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":600,"lineHeight":25,"color":"#172033"},"templateParams":{"links":{"open":"https://help.segmently.ai/onboarding-wizard-theme-select"},"labels":{"sep":{"align":"start","fontSize":14,"fontWeight":500,"lineHeight":20,"color":"#98A2B3"},"detail":{"align":"start","fontSize":14,"fontWeight":600,"lineHeight":20,"color":"#2563EB"}}}}}},{"id":"onboarding-wizard-theme-customize-related-1","order":13,"kind":"Text","label":"onboarding-wizard-theme-customize-related-1","layout":{"heightKind":"auto","margin":{"top":12}},"textContent":{"title":{"translations":{"en":"Onboarding wizard: basic information<sep>  —  </sep><detail>@open</detail>"},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":600,"lineHeight":25,"color":"#172033"},"templateParams":{"links":{"open":"https://help.segmently.ai/onboarding-wizard-basic-info"},"labels":{"sep":{"align":"start","fontSize":14,"fontWeight":500,"lineHeight":20,"color":"#98A2B3"},"detail":{"align":"start","fontSize":14,"fontWeight":600,"lineHeight":20,"color":"#2563EB"}}}}}},{"id":"onboarding-wizard-theme-customize-related-2","order":14,"kind":"Text","label":"onboarding-wizard-theme-customize-related-2","layout":{"heightKind":"auto","margin":{"top":12}},"textContent":{"title":{"translations":{"en":"Create an onboarding<sep>  —  </sep><detail>@open</detail>"},"kind":"static","appearance":{"align":"start","fontSize":16,"fontWeight":600,"lineHeight":25,"color":"#172033"},"templateParams":{"links":{"open":"https://help.segmently.ai/onboarding-list-create"},"labels":{"sep":{"align":"start","fontSize":14,"fontWeight":500,"lineHeight":20,"color":"#98A2B3"},"detail":{"align":"start","fontSize":14,"fontWeight":600,"lineHeight":20,"color":"#2563EB"}}}}}}]}}}},"metadata":{"kind":"article","projectId":"arswew63RwQr6V4Ekb1Z","articleId":"Z6MyBxEKtC8aO06IPo00","alias":"onboarding-wizard-theme-customize","source":{"kind":"support-flow-guide-evidence","guideKey":"onboarding-wizard-theme-customize"},"articlePresentation":{"version":1,"profiles":{"standard":{"containerMaxWidth":1120,"contentInsets":{"top":48,"end":32,"bottom":56,"start":32},"sectionPaddingScale":1,"textScale":1},"laptop":{"containerMaxWidth":960,"contentInsets":{"top":44,"end":40,"bottom":52,"start":40},"sectionPaddingScale":0.96,"textScale":0.96},"tablet":{"containerMaxWidth":760,"contentInsets":{"top":36,"end":28,"bottom":44,"start":28},"sectionPaddingScale":0.9,"textScale":0.92,"titleTextScale":0.9},"phone":{"containerMaxWidth":"100%","contentInsets":{"top":28,"end":16,"bottom":36,"start":16},"sectionPaddingScale":0.82,"textScale":0.88,"titleTextScale":0.82}}}},"webViewDefaultBackgroundColor":"#F7F8FA","projectAnalytics":{"consentManagement":{"enabled":true,"bannerText":"We use cookies to improve your experience and analyze site usage.","privacyPolicyUrl":"","defaultConsent":"denied"},"integrations":[{"platform":"segmently_internal","name":"Segmently Analytics","enabled":true,"config":{"mode":"http"},"createdAt":"2026-05-26T13:53:00.398Z","updatedAt":"2026-05-26T13:53:00.398Z","id":"int_mpmp3jsm_aij2kz"}]}}