{"id":3181,"date":"2026-02-22T23:53:59","date_gmt":"2026-02-22T23:53:59","guid":{"rendered":"https:\/\/www.swiftcommerce.io\/help\/?post_type=docs&#038;p=3181"},"modified":"2026-03-12T23:18:14","modified_gmt":"2026-03-12T23:18:14","password":"","slug":"globals","status":"publish","type":"docs","link":"https:\/\/www.swiftcommerce.io\/help\/getting-started\/globals\/","title":{"rendered":"Globals"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Overview<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you&#8217;ve ever configured colors for your wishlist, then had to set the same colors again for your cookie banner, and again for your back-in-stock form, you know how tedious that gets. Global Styles solves this by letting you create a single set of design tokens that all features reference.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You set your brand palette and fonts once. From that point on, every Customize Design tab across Swift Commerce pulls from those shared values. Update your primary color later, and it flows through everywhere without you having to touch each feature individually.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Global Styles is available to Swift Commerce Pro users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Requirements<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Swift Commerce Free 1.3.0+<\/li>\n\n\n\n<li>Swift Commerce Pro 1.3.0+<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Getting Started<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Open Global Styles<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Navigate to&nbsp;<strong>WordPress \u2192 Swift Commerce<\/strong><\/li>\n\n\n\n<li>Click&nbsp;<strong>Globals<\/strong>&nbsp;in the sidebar navigation<\/li>\n\n\n\n<li>You&#8217;ll see two sections to configure:&nbsp;<strong>Colors<\/strong>&nbsp;and&nbsp;<strong>Typography<\/strong><\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"761\" height=\"901\" src=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image.png\" alt=\"\" class=\"wp-image-3244\" srcset=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image.png 761w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-253x300.png 253w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-360x426.png 360w\" sizes=\"(max-width: 761px) 100vw, 761px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Set Up Your Colors<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click&nbsp;<strong>Colors<\/strong>&nbsp;in the sidebar<\/li>\n\n\n\n<li>You&#8217;ll see your color palette listed as editable tokens<\/li>\n\n\n\n<li>Click any color row to expand its editor<\/li>\n\n\n\n<li>Change the name, pick a new color using the color picker, or type a hex value directly<\/li>\n\n\n\n<li>To add a brand color that isn&#8217;t in the defaults, click&nbsp;<strong>Add Color<\/strong>&nbsp;at the bottom<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"645\" height=\"664\" src=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-1.png\" alt=\"\" class=\"wp-image-3246\" srcset=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-1.png 645w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-1-291x300.png 291w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-1-360x371.png 360w\" sizes=\"(max-width: 645px) 100vw, 645px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"566\" height=\"858\" src=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-2.png\" alt=\"\" class=\"wp-image-3247\" srcset=\"https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-2.png 566w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-2-198x300.png 198w, https:\/\/www.swiftcommerce.io\/help\/wp-content\/uploads\/2026\/02\/image-2-338x512.png 338w\" sizes=\"(max-width: 566px) 100vw, 566px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Set Up Your Typography<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click the back arrow to return to the main view, then click&nbsp;<strong>Typography<\/strong><\/li>\n\n\n\n<li>You&#8217;ll see your typography presets listed<\/li>\n\n\n\n<li>Click any row to expand and configure the font family, weight, size, and other properties<\/li>\n\n\n\n<li>Use the font search to browse Google Fonts and preview them before selecting<\/li>\n\n\n\n<li>To add another typography preset, click&nbsp;<strong>Add Typography<\/strong>&nbsp;at the bottom<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Save Your Changes<\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Click&nbsp;<strong>Save Changes<\/strong>&nbsp;in the sidebar footer<\/li>\n\n\n\n<li>Your global tokens are now active across all features<\/li>\n\n\n\n<li>Open any feature&#8217;s Customize Design tab and you&#8217;ll see your global colors and fonts available in the pickers<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n","protected":false},"excerpt":{"rendered":"<p>Overview If you&#8217;ve ever configured colors for your wishlist, then had to set the same colors again for your cookie banner, and again for your back-in-stock form, you know how tedious that gets. Global Styles solves this by letting you create a single set of design tokens that all features reference. You set your brand [&hellip;]<\/p>\n","protected":false},"author":101,"featured_media":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"doc_category":[69],"doc_tag":[],"class_list":["post-3181","docs","type-docs","status-publish","hentry","doc_category-getting-started"],"year_month":"2026-09","word_count":311,"total_views":"115","reactions":{"happy":"0","normal":"0","sad":"0"},"author_info":{"name":"Mansoor Ahmad","author_nicename":"helpadmin","author_url":"https:\/\/www.swiftcommerce.io\/help\/author\/helpadmin\/"},"doc_category_info":[{"term_name":"Getting Started","term_url":"https:\/\/www.swiftcommerce.io\/help\/docs-category\/getting-started\/"}],"doc_tag_info":[],"knowledge_base_info":[],"knowledge_base_slug":[],"_links":{"self":[{"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs\/3181","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs"}],"about":[{"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/types\/docs"}],"author":[{"embeddable":true,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/users\/101"}],"replies":[{"embeddable":true,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/comments?post=3181"}],"version-history":[{"count":2,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs\/3181\/revisions"}],"predecessor-version":[{"id":3248,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/docs\/3181\/revisions\/3248"}],"wp:attachment":[{"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/media?parent=3181"}],"wp:term":[{"taxonomy":"doc_category","embeddable":true,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/doc_category?post=3181"},{"taxonomy":"doc_tag","embeddable":true,"href":"https:\/\/www.swiftcommerce.io\/help\/wp-json\/wp\/v2\/doc_tag?post=3181"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}