--- title: Customize your site theme and styles shortDescription: Choose a theme, set global colors and fonts, style buttons, and use per-section overrides to control the look of your Fourthwall shop. articleType: Tutorial primaryTopic: site-theme-and-styles categories: - Store Design tags: - site-theme - site-colors - typography - button-styling - site-design - dark-mode - per-section-override - theme-customization - fonts - style-settings tasks: - Choose and apply a site theme - Set primary and background colors - Change heading and body fonts - Adjust font size scale - Style buttons with shape and color - Override colors and fonts for a specific section - Preview style changes before saving terms: - site theme - change theme - customize colors - change fonts - button shape - dark mode - per-section color override - site style settings - Fourthwall theme - font scale - heading font - global styles - theme preview - site designer labels: - store-design - site-theme - style-customization - typography contextString: Available on all Fourthwall plans. Accessed via Site design in the creator dashboard. breadcrumbPath: "Getting started > Design my storefront" path: getting-started/design-my-storefront/customizing-your-site-theme-and-styles relatedModules: - name: theme-settings-general route: /admin/dashboard/store-design/general/ - name: theme-font-change route: /admin/dashboard/store-design/general/font-change - name: theme-editor-layout-home route: /admin/dashboard/store-design/layout/index last_updated: '2026-04-28' --- # Customize your site theme and styles Your Fourthwall shop has a full set of visual controls, from choosing a pre-built theme to fine-tuning colors, fonts, and buttons across your site. All settings live under [**Site design**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect) in your dashboard. ## Choose a theme Themes are pre-built design starting points. Each one sets a distinct look for your entire shop, including layout, spacing, and visual character. Switching themes doesn't delete your content, so you can try different options before committing. To browse and apply themes: 1. Go to [**Site design > Theme**](https://my-shop.fourthwall.com/admin/dashboard/store-design/themes/?redirect). 2. Click the **+** icon to open the theme catalog. 3. Browse themes and preview how they look on desktop and mobile. 4. Click **Add this theme** to apply one. [Image: Theme management page with "Oasis" set as the active live theme and "Bundles" listed under Inactive themes, alongside a preview of the storefront.] Previously added themes are saved under **Inactive themes**. To switch to one, click its three-dot menu and select **Set as active theme**. Only your active theme can be edited. If you want to experiment without your visitors seeing changes, set your site to Coming Soon mode first. For a deeper look at theme management, see [Update your shop theme](/getting-started/design-my-storefront/update-shop-theme). ## Customize colors Color settings control the palette applied across your entire shop. Go to [**Site design > Style > Colors**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Colors&redirect) to adjust four global values: - **Primary**. Buttons, links, and key interactive elements. - **Background**. The main background color of your site. - **Text**. Body text throughout your shop. - **Text Over Primary**. Text or icons placed on top of areas using the Primary color. Click any color block to pick a new shade or paste in a hex code. Changes show in the site preview before you save. [Image: Style editor sidebar with Colors section expanded showing Primary, Background, Text, and Text over Primary swatches, alongside a site preview displaying "Join the gang today" hero section.] ## Dark mode Enable **Dark mode** from the Colors panel to switch your shop to a dark color scheme. This applies a dark theme to your shop pages without requiring you to manually adjust each color value. Dark mode applies to your shop only. The Fourthwall creator dashboard does not change appearance. For the full color and product appearance settings, see [Customize your site colors and product appearance](/getting-started/design-my-storefront/customize-your-site-colors-and-product-appearance). ## Customize fonts Font settings let you control the typefaces used across your shop. Go to [**Site design > Style > Fonts**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Fonts&redirect). Two font categories are available: - **Heading font**. Titles, section headers, and large display text. - **Base font**. Body text, product descriptions, and smaller text throughout your site. Use the dropdown menus to choose from 1,000+ Google Fonts. You can also enable the option to display text in all uppercase. [Image: The Style tab is open, displaying font settings for the website. The heading font is set to "Plus Jakarta Sans" and the base font is set to "Figtree".] ## Adjust font size scale Below the font selectors, a **font scale** slider lets you make all text on your site smaller or larger, proportionally. This affects both headings and body text at once. Preview the result in the right-hand panel before saving. For full font customization details, including adding a custom font via CSS, see [Change fonts on your site](/getting-started/design-my-storefront/change-fonts). ## Customize buttons Button settings control how buttons look across your shop, including shape, color, and hover effects. Go to [**Site design > Style**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect) and scroll to the **Buttons** section. Your shop uses two button types: - **Primary buttons**. Main calls to action, like "Add to Cart" or "Shop Now". - **Secondary buttons**. Supporting actions that complement Primary buttons without competing for attention. Each type has its own tab with independent controls: - **Colors**. Button background, text color, and hover states. - **Shape and fill**. Filled solid buttons or outlined buttons, plus corner radius (rounded, square, or pill). - **Typography**. Font choice, size, and capitalization. [Image: Style panel with the Buttons section expanded, showing Primary button settings including Colors, Shape and fill, Typography, Outline, and Rounded corners options.] For the full button customization reference, see [Advanced button customization](/getting-started/design-my-storefront/advanced-button-customization). ## Global settings vs. per-section overrides All color and font settings in the **Style** tab apply site-wide by default. You can also override them at the section level without any CSS. To override settings for a specific section: 1. Go to [**Site design > Layout**](https://my-shop.fourthwall.com/admin/dashboard/store-design/layout/index/?redirect). 2. Click the section you want to customize. 3. Look for color or font size override controls in the section's settings panel. 4. Apply your changes to that section only. Per-section overrides let you create visual contrast between sections, such as a dark banner above a lighter product grid. When you switch themes, per-section overrides are preserved. [Image: Layout editor for an Image banner section showing options for full-width toggle, section size, content alignment, content position, social links, and customizable colors.] ## Preview changes before saving All style changes appear in the live preview panel on the right side of the site designer as you make them. You don't need to save to see how your changes look. Click **Save** only when you're happy with the result. Use the desktop and mobile toggle in the preview panel to check how your style changes look on both screen sizes. [Image: Style editor panel with Colors section expanded showing Primary, Background, Text, and Text over Primary color options alongside a website preview.] ## Frequently asked questions ## Will changing my theme remove my content? No. Switching themes changes your site's visual design but does not delete any content, products, or section data. Your existing sections and pages carry over. ## Can I undo style changes? Yes. You can reset an individual theme to its default settings from the three-dot menu on the Themes page. You can also duplicate a theme before making changes so you have a backup copy. ## Do per-section color overrides survive a theme switch? Yes. Per-section overrides are stored separately from the global theme settings and are preserved when you switch themes. ## Why don't I see a dark mode toggle? The **Dark mode** toggle is in [**Site design > Style > Colors**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?active=Colors&redirect). If you don't see it, make sure you're in the **Colors** section and not another style accordion.