Locate the ‘Default’ theme with status ‘Live’ and click on it.
Doing so will open the page builder interface where you can begin modifying the layout of your storefront.
Please Note: Whenever you make changes that you’d like to keep, make sure to click the blue ‘Publish’ button in the the top right corner, otherwise you will lose all changes if you navigate away from the page builder.
Let’s now take a look at all the different elements of the page builder in detail.
Top Bar
In top bar, you can select which page to work on, set global theme settings, and switch between editor views.Views
In the top right corner next to the ‘Publish’ button, there are 3 buttons.Mobile View
Clicking on the mobile icon will change the page builder preview to a mobile layout
Note: The storefront and all prebuilt page elements are mobile friendly by default.
Desktop View
Clicking on the desktop icon will switch the page builder preview to a desktop layout.
Preview
Clicking on the preview button will allow you to see a preview of the live site, i.e., outside of the page builder. This allows you to see an accurate representation of what the storefront will look like before publishing any changes.Page Selector
In the top left corner of the screen, there’s a dropdwon menu that allows you to select the page you’d like to work on.
Simply select the page you’d like to work on and the page builder preview and side bar will change to reflect the selection.
Color Scheme
To change the color scheme of your storefront, click on the color palette icon next to the page selector. Doing so will cause the side bar UI to show a list of page elements and they’re default colors.
To change the global color of an element, click on the colored circle next to the element you wish to change.
This opens a color editor popup that allows you to either enter the color code at the bottom, or manually shift the pointer and sliders around until you find the desired color.
Note: The slider on the far right of the color editor adjusts transparency.
Fonts
To change storefront fonts, click on the letter A next to the color palette icon. Doing so will change the side bar UI to a font selector interface.
Standard Fonts
In the first tab, you can apply different font families to normal text and headers by selecting them from the respective dropdown menus.
You can also set the size of text and headers by adjusting the respective size scale sliders.
Custom Fonts
In the second tab, you can add custom fonts by inserting the code into the box, e.g.:
Side Bar
In the side bar, you can add, edit, and rearrange the sections and elements of the page you are working on.
Page Section Settings
Most of the page sections and page elements display two different settings tabs when clicked on. Different page sections have different settings for both content and design.Content Settings
In the content tab, you can edit the content of that particular section, such as text, images, and links.
Design Settings
In the design tab, you can modify color, padding, borders, alignment, and in some cases section layout.
Global Page Sections
Global page sections are visible on all pages of your website, and any changes made to them on one page will be reflected on all other pages.Announcement Bar
The announcement bar is a global page section that can display an important message across your entire website, and is situated at the very top of the page. For example, you could use it to inform visitors about the latest promos or free shipping.
In the above example, we changed the text, made it bold, and set the background color to #E8E811.
Page Header
The header serves as your store’s navigation hub and first point of interaction, housing essential elements like your logo, menu categories, search bar, shopping cart, and user account access. As the most visible and consistent element across all pages, it shapes your brand’s first impression while ensuring customers can easily find what they need and complete their purchases, directly impacting your conversion rates.Logo
You can add your logo by clicking on ‘Header’ and selecting the file you wish to upload.
You can adjust the size of the logo, as well as other header design settings, in the design tab.
Links
If you’re using the default header configuration, then you can add links to the header by clicking on ‘Header’ and clicking on ‘+ Add Link’.
This will open up a link configuration menu that allows you to set the type of link, where it should point to, and the name it should be presented with.
Link types are as follows:
- Page - static pages, e.g., Shop All, Homepage, About Us, Blog, etc.
- Product - an individual product page
- Post - an individual blog post
- Taxon - a product listing page for a taxon, e.g., Fashion, Garden
- Policy - one of your store policies, e.g., Terms and Conditions, Privacy Policy, etc.
- URL - a URL that links to an internal or external page
In the above example, we chose to add a link to the ‘Categories -> Fashion’ taxon that does not open in a new tab.
Custom Header Configuration
Under ‘Header’ in the page builder side bar, there is an option to ‘+ Add Block’. Clicking on this will allow you to configure a custom header with more advanced functionality instead of only simple links.
There are 3 options to choose from. Link is the same as described above, but let’s take a closer look at the other two options.
Mega Nav With Subcategories
This block allows you add a dropdown menu to your header that appears when hovering over that item in the header.
Simply select a taxon, and the mega nav will be automatically populated with all subtaxons nested below it.
You can also choose to include a ‘Featured Taxon’ which will add a link to that taxon along with its images on the right hand side of the mega nav. This adds to the aesthetic appeal of your website.
Mega Nav
This block functions in the same way as the ‘Mega Nav With Subcategories’ block, except you decided which links to include in which columns.
Simply add links as previously shown and they’ll be added to the mega nav dropdown.
Newsletter
The newsletter is another global page section that allows you to capture user email addresses without them having to place an order. It enables you to build a direct marketing channel with your customers, allowing you to share new products, promotions, and content that drive first-time or repeat purchases and increases customer lifetime value.
You can edit the content in the newsletter section by clicking on the individual elements in the side bar and modifying the text.
Footer
The footer serves as a trust-building section of your store by housing essential business information, policies, and links to key pages – giving customers the confidence and resources they need to make informed purchasing decisions.
Similar to the header, you can add your logo (whether it be the same or different from the header logo).
Adding blocks to the footer will add new sections wherein you can nest links.
Links are added to blocks in the same way as described in the ‘Header’ section of this support article.
Page-Specific Sections
As the name suggests, these sections are specific to whichever page you add them to, and allow you to create an interesting, visually appealing storefront experience that helps your customers discover new products and categories, and learn more about your business.Add Page Sections
To add a page section, click the blue ‘Add Section’ button in the side bar.
This will open a menu that allows you to select the type of page section you’d like to add.
Simply select the page you want to add and the blank section template will be added to the bottom of the page (but above the newsletter and footer sections).
In this example, we chose a Image Banner page section, which display a page-width image along with optional header, text, and button elements.
Edit Page Sections and Elements
To edit a page section or element, either select it from the side bar, or click on it in editor preview. This will open up the settings for that particular section or element.
Simply update the content field or design settings to have them reflected in the the editor preview.
In this example, we added an image, change the header content, and made all of the text bold.
Delete Page Sections and Elements
To delete a page section or element, simple select it from the side bar or click on it in the editor preview, and locate the ‘Delete button in the bottom left corner of the page.
Click ‘Delete’ and the chosen section or element will be removed from the page.
In this example, we deleted the text element from the image banner section.
You can also delete sections and elements by hovering over them in the page editor, and clicking on the blue trashcan button.
For more information about the different pre-built page sections available in Spree and how to configure them, please refer to another support article.