docs/user/storefront/theme-editor.mdx
A visually appealing and well-organized storefront is essential for any online business. It builds trust with customers and can significantly improve your conversion rates.
The Spree theme editor provides a powerful, no-code, drag-and-drop page builder that allows you to visually design your storefront, reflect your brand identity, and preview changes in real time - without writing a single line of code or hiring developers.
To edit your storefront’s theme, navigate to Storefront → Themes in the admin dashboard.
Find the theme with the status Live and click on it to open the theme editor.
<Warning>It’s useful to note before we go further that you should always click Publish in the top-right corner to save your changes. Leaving the editor without publishing will discard all unsaved edits.</Warning>
Let’s walk through the different areas of the page builder.
The top navigation bar allows you to switch between pages, adjust global settings, and preview different views of the storefront.
This gives you access to the following controls and settings:
In the top-left dropdown, choose which page you want to edit. The editor will reload with the selected page's layout and elements.
Click the palette icon to open the global color settings. You can change the default colors used across all pages.
Click any colored circle to open the color editor, where you can:
Click the A icon to change fonts. You can choose from:
Located in the middle of the
The side navigation allows you to add, configure, and arrange page sections and individual content blocks.
Click on any page section or element to configure its content and appearance. Most page sections have two distinct tabs:
Global sections appear across every page (besides checkout) and update everywhere when edited. They can be modified via the Side Navigation. Global page sections are as follows:
Add a message that appears at the very top of every page. Ideal for welcome messages and promos like free shipping or limited-time discounts.
The header includes your:
Click Header and upload your logo. You can resize its presentation in the Design tab.
Click Add Link to add navigation items.
Link Types are as follows:
You can also choose to have the link open in a new tab.
Click Add Block to configure a more advanced header layout. You can select from the following block types:
A global email capture section to build your subscriber list. Customize text and styling as needed.
Add:
Organize content into blocks using Add Block, and add links as you did in the Header section.
These only appear on the page they’re added to - ideal for storytelling, product discovery, and homepage content.
Click Add Section in the sidebar, then choose a layout type from the following options:
The newly added section will appear at the bottom of the page, but above the footer and newsletter.
Click on a section in the sidebar or directly in the preview to update content or design. All changes reflect immediately in the editor preview.
To move a page section or element, hover over it in the preview to reveal the actions menu, then use the up and down arrows to reposition it to the desired location on the page.
You can either:
Once you’re finished modifying your storefront theme, click Publish in the top right corner to save and apply your changes to the live storefront immediately.
<Warning>Any changes you make in the editor are not saved until you click Publish. If you do not wish to save your changes, simply back out of the theme editor.</Warning>