Introduction
User Quickstart
Start selling with Spree Commerce open-source eCommerce solution
When first logging in to your instance of Spree Commerce open-source eCommerce platform, you’ll be greeted with the Getting Started tab which, by default, outlines 4 onboarding tasks you’ll need to complete.
Once you’ve completed these tasks, this tab will disappear.
Let’s take a look at each task in more detail.
At the top, there’s a list of added payment methods, each of which you can toggle on/off, change its visibility on the storefront or admin panel, and edit. The Store Credits payment methods is always added by default, but alone it does not enable to accept payments from customers.
Below that, you’ll see a list of available payment methods that you can add to your store.
Find the method you’d like to use and click ‘+ Add’. This will redirect you to the set up page for that particular payment method.
Important: to use any of these available payment methods, you are required to first set up an account with the associated payment service provider.
Simply follow the steps outlined for that payment method, click Create, and the payment method will be added to your store.
To learn more about Payment Methods, please refer to a separate support article.
There are three ways to add products to your store:
You need to add a customer support email to display on your storefront. This email serves as a contact point for your customers to reach out to you if they have any queries or require support.
Simply type in the email address you’d like to use and click save.
Follow the link in the description and you’ll be redirected to the Tax section of Settings.
To learn more about setting up taxes, please refer to a separate support article.
To add a new shipping method, click the blue button in the top right corner. This will open to shipping method editor.
Here you can configure the settings of the shipping method, such as the shipping zones, calculator and costs, and estimated delivery time.
For more information about shipping methods, please refer to a separate support article.
With a little investment of your time, you can turn this into something presentable, shoppable, and on-brand without the need to hire developers (or even designers if it’s an MVP).
This will open the visual page builder UI that allows you to easily add or modify page sections, upload visual media, and change color schemes and fonts.
Themes are mobily-reponsive, and you can switch between views by clicking on the mobile or desktop icons in the top right corner.
Important: Whenever you make changes to the storefront, it’s important to publish them before backing out of the page builder otherwise all progress will be lost. To publish changes, click the blue button in the top right corner.
You can also preview changes you’ve made to the storefront without publishing them by clicking Preview in the top right corne.
For a comprehensive guide to using the page builder, please refer to a separate support article.
To add a new page, simply click on the blue button in the top right corner, give the page a name, edit the SEO settings, and then click Create at the bottom of the page.
After creating the page, you’ll be redirected to the page builder where you can configure the layout and insert content for the new page.
Once you’re finished, click Publish and the new page will be added to your store.
You can edit pages at any time by simpling clicking on them, and you can delete the page by navigating to Page Settings at the top left of the page builder, and clicking Delete.
To add a new post, simply click on the blue button in the top right corner.
Note: If you’re using Spree Enterprise Edition, you can import blog posts in bulk from your previous site by uploading a CSV file.
This will redirect you to the blog post editor where you can add content, visual media, and modify SEO settings for the new post.
Make sure to add a Published At date, otherwise it won’t appear on the live site.
Once you’re done, click Create to add the new blog post to site.
You can edit old blog posts by simply clicking on them, making changes, and then clicking Update at the bottom of the page.
Here’s the new blog post on the storefront:
Important: If you want your store to be shown in search engines, make sure to uncheck the box next to “Do not show in search engines” in the SEO section of the settings.
To learn more about Storefront Settings, please refer to a separate support article.
The popup that appears will ask you to give the new store a name, select the country and currency, and to select whether or not to import products and payment methods from the original store.
To learn more about the multi-store feature, please refer to a separate support article.
Once you’ve completed these tasks, this tab will disappear.
Let’s take a look at each task in more detail.
Set up payments
It shouldn’t come as a surprise that in order to sell anything, you need to accept payments, and in order to accept payments, you need to add payment methods. To setup payment methods, click on the blue button which will redirect you to the Payment Methods section of Settings.
At the top, there’s a list of added payment methods, each of which you can toggle on/off, change its visibility on the storefront or admin panel, and edit. The Store Credits payment methods is always added by default, but alone it does not enable to accept payments from customers.
Below that, you’ll see a list of available payment methods that you can add to your store.
Find the method you’d like to use and click ‘+ Add’. This will redirect you to the set up page for that particular payment method.
Important: to use any of these available payment methods, you are required to first set up an account with the associated payment service provider.
Simply follow the steps outlined for that payment method, click Create, and the payment method will be added to your store.
To learn more about Payment Methods, please refer to a separate support article.
Add products
Next on the list is adding products.
There are three ways to add products to your store:
- Adding products manually
- Importing products with CSV
- Inviting vendors (3rd party products)
Inviting 3rd party vendors to your marketplace is only available in the Spree Enterprise Edition.
Set customer support email
The next task is a simple one, but it plays a very important role.
You need to add a customer support email to display on your storefront. This email serves as a contact point for your customers to reach out to you if they have any queries or require support.
Simply type in the email address you’d like to use and click save.
Setup taxes collection
The last task to complete in the Getting Started is setting up taxes collection.
Follow the link in the description and you’ll be redirected to the Tax section of Settings.
To learn more about setting up taxes, please refer to a separate support article.
Shipping Methods
To allow customers to actually place orders, there must be shipping methods available for them to select on checkout. You can add shipping methods by navigating to the Shipping section in Settings.
To add a new shipping method, click the blue button in the top right corner. This will open to shipping method editor.
Here you can configure the settings of the shipping method, such as the shipping zones, calculator and costs, and estimated delivery time.
For more information about shipping methods, please refer to a separate support article.
Basic Storefront Setup
Now that you’ve configured payments, taxes, and shipping, and added some products, it’s time to configure your storefront. Spree comes with a drag and drop page builder with pre-built page sections that allows you to quickly and easily configure a storefront. This is a great option for MVPs or other projects that don’t require a lot of custom frontend features. If you’re planning on using Spree in headless mode and connect it to a separate storefront application, please refer to Spree developer documentation. The Storefront tab of the admin dashboard, found under Channels & Apps, contains four sections that manage various parts of your storefront.Theme
This is where you can modify the layout and look and feel of your storefront.
View Store
To view the live storefront, click on the View Store button on the top right corner. If you haven’t modified the theme at all, you’ll see what is essentially a blank slate with a few default page sections, and perhaps some products if you’ve made them Active.
With a little investment of your time, you can turn this into something presentable, shoppable, and on-brand without the need to hire developers (or even designers if it’s an MVP).
Connect Your Own Domain
At the top of the Theme section, you’ll notice a prompt to connect your own domain. Clicking on this will lead you to the Domains section of Settings where you can connect your domains and subdomains.
Theme Editor
To edit the store’s default Theme, simply click on it or click the three dots on the left and select Edit.
This will open the visual page builder UI that allows you to easily add or modify page sections, upload visual media, and change color schemes and fonts.
Themes are mobily-reponsive, and you can switch between views by clicking on the mobile or desktop icons in the top right corner.
Important: Whenever you make changes to the storefront, it’s important to publish them before backing out of the page builder otherwise all progress will be lost. To publish changes, click the blue button in the top right corner.
You can also preview changes you’ve made to the storefront without publishing them by clicking Preview in the top right corne.
For a comprehensive guide to using the page builder, please refer to a separate support article.
Pages
This where you can add static pages to your store, such as About Us, Contact Us, landing pages, etc.
To add a new page, simply click on the blue button in the top right corner, give the page a name, edit the SEO settings, and then click Create at the bottom of the page.
After creating the page, you’ll be redirected to the page builder where you can configure the layout and insert content for the new page.
Once you’re finished, click Publish and the new page will be added to your store.
You can edit pages at any time by simpling clicking on them, and you can delete the page by navigating to Page Settings at the top left of the page builder, and clicking Delete.
Posts
Here you can make use of Spree’s built-in blog to add blog posts to your store. Adding blog posts to your store is a great way to improve SEO, and the posts themselves can be used for social sharing or ads.
To add a new post, simply click on the blue button in the top right corner.
Note: If you’re using Spree Enterprise Edition, you can import blog posts in bulk from your previous site by uploading a CSV file.
This will redirect you to the blog post editor where you can add content, visual media, and modify SEO settings for the new post.
Make sure to add a Published At date, otherwise it won’t appear on the live site.
Once you’re done, click Create to add the new blog post to site.
You can edit old blog posts by simply clicking on them, making changes, and then clicking Update at the bottom of the page.
Here’s the new blog post on the storefront:
Storefront Settings
This is where you can configure some important settings for the storefront, such as SEO, security, favicon and social sharing images, and social media links.
Important: If you want your store to be shown in search engines, make sure to uncheck the box next to “Do not show in search engines” in the SEO section of the settings.
To learn more about Storefront Settings, please refer to a separate support article.
New Store
If you’d like to add multiple storefronts with completely different user experiences, product offerings, payment methods, etc., you can easily add a new store by clicking on the store name in the top left corner, and selecting New Store from the dropdown.
The popup that appears will ask you to give the new store a name, select the country and currency, and to select whether or not to import products and payment methods from the original store.
To learn more about the multi-store feature, please refer to a separate support article.
Home Screen
The home screen gives you an overview of your stores results over a time period of your choosing. It highlights some important sales KPIs and visitor metrics so you can see how business is going at a glance.
Key Sales KPIs
At the top of the page, there’s a chart that depicts some of the key sales KPIs over the defined time period. You change the time period by clicking on the date and then selecting the desired dates.
Top products
Below the KPIs, you’ll see a section that shows a list of the top selling products, with the option to view the full report.
Visitor Data
At the bottom of the page, there are four sections that provide data on your audience, specifically:- Referral site
- Top landing pages
- Visitor location
- Visitor devices