--- articleType: Tutorial categories: - Store Design - Creator Dashboard last_updated: "2026-05-27" primaryTopic: shop-theme-management relatedModules: - name: theme-editor-themes route: /admin/dashboard/store-design/themes/ - 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-checkout route: /admin/dashboard/store-design/layout/checkout - name: theme-editor-layout-home route: /admin/dashboard/store-design/layout/index shortDescription: Browse themes in the Theme Selector Modal, preview with smooth scrolling, and pick a quick-start or deep customization path. tags: - theme-selector-modal - theme-template - site-designer - oasis-template - brutal-template - color-pairs - onboarding - storefront-theme - theme-editor - hero-less-template - typography title: Update your shop theme tasks: - Select a new theme from the Theme Selector Modal - Preview theme templates with smooth scrolling - Set up a shop using template-first onboarding - Customize color pairs and typography during onboarding - Switch between active and inactive themes - Manage saved themes terms: - theme - template - theme selector modal - change theme - update design - shop design - site designer - active theme - inactive themes - oasis - brutal - hero-less - color pairs - typography - onboarding labels: - theme-editor - theme-template - onboarding contextString: Available on all Fourthwall plans. Accessed via the Site Designer in the creator dashboard. breadcrumbPath: "Getting started > Design my storefront > Update your shop theme" path: getting-started/design-my-storefront/update-shop-theme --- # Update your shop theme Your shop's theme controls the overall look and feel of your site. Fourthwall's **Theme Selector Modal** displays every available theme upfront so you can browse, preview, and pick a template without extra steps. Whether you want a bold hero layout, a clean hero-less design like **Oasis**, or a high-contrast full-width look like **Brutal**, you can go live with a polished storefront in minutes. ## Browse themes in the Theme Selector Modal The Theme Selector Modal is your central hub for choosing a theme. It shows all templates in one view. 1. In your Fourthwall dashboard, go to [**Site design** > **Theme**](https://my-shop.fourthwall.com/admin/dashboard/store-design/themes/?redirect). 2. Click **Add new theme** to open the Theme Selector Modal. [Image: Theme Selector Modal titled "Add a new theme" showing a grid of available theme templates with preview thumbnails] 3. Scroll through the available templates. The modal uses smooth scrolling so you can quickly compare layouts, color options, and hero styles. 4. Click any template to see a full preview on desktop and mobile. 5. Once you find a theme you like, click **Add this theme** to apply it. Some templates, like **Oasis**, use a hero-less layout. These are a good fit if you want your products or collections front and center without a large banner image at the top. The **Brutal** theme uses a full-width layout that spans the entire screen, paired with a high-contrast, bold design language. It includes a rebuilt product page with a new gallery layout, and every section supports a border style. [Image: Brutal theme product page showing a 2x2 gallery layout for a black hoodie with bold product details on the right] ## Onboarding: set up your theme for the first time When you first create your Fourthwall site, the onboarding flow takes a template-first approach. You pick a theme before anything else, then customize it to match your brand. There are two paths through onboarding: ### Quick-start with templates Pick a template from the Theme Selector Modal and go live right away. Fourthwall applies sensible defaults for colors and fonts, so your site looks polished from the start. You can always fine-tune later in the Site Designer. ### Deep customization with color pairs and typography After selecting a template, you can customize further before publishing: - **Color pairs.** Define coordinated color combinations for your site's backgrounds, text, buttons, and accents. Instead of picking individual colors one by one, you set pairs that work together across your entire theme. - **Typography.** Choose heading and body fonts that match your brand's personality. These options appear during onboarding and remain available in [**Site design**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect) at any time. Color pairs and typography settings apply to your active theme. If you switch themes later, revisit these settings to make sure everything still matches your brand. ## Preview your theme The Theme Selector Modal includes a built-in preview with smooth scrolling. As you browse templates, you can: - See how each theme looks on desktop and mobile - Scroll through the full page layout to check hero sections, product grids, and footer styles - Try different color patterns before committing This preview helps you make a confident choice before applying a theme to your live site. ## Activate a saved theme If you've previously added or customized theme templates, they're saved in your theme library. 1. Go to the [**Themes**](https://my-shop.fourthwall.com/admin/dashboard/store-design/themes/?redirect) page in the Site Designer. 2. Review your saved theme templates under **Inactive themes**. 3. Click the three-dot icon next to the theme you want and select **Set as active theme**. [Image: Three-dot menu on inactive theme showing Set as active theme and other options] ## Manage your themes From the three-dot menu of any theme, you can: - **Edit.** Open the theme in the Site Designer to customize it. - **Set as Active Theme.** Switch your live site to another theme. - **Duplicate.** Make a copy before experimenting with changes. - **Rename.** Update the theme's name for clarity. - **Reset to default.** Restore original theme settings. - **Delete.** Remove the theme from your library. ## Frequently asked questions ### What is a hero-less template? A hero-less template skips the large banner image at the top of your homepage. Instead, it leads with product grids, collections, or other content sections. **Oasis** is one example of a hero-less template. ### Can I switch between themes without losing my customizations? Yes. When you switch to a different theme, your previous theme and its customizations are saved under **Inactive themes**. You can reactivate it at any time. ### Where do I find color pairs and typography settings after onboarding? Go to [**Site design**](https://my-shop.fourthwall.com/admin/dashboard/store-design/general/?redirect) in your dashboard. Color pair and typography options are in the **Style** section.