Storefronts are the customer-facing part of your Swell store. Swell offers an official storefront app, Proxima, that comes out of the box with a default theme, Sunrise, as well as and numerous ways to build your own storefront apps or link to externally hosted sites.
To view and customize your storefront, navigate to Storefront → Settings within the Swell dashboard.
For more information on developing your own storefront solution, check out our developer docs.
In Swell, storefronts are powered by specialized apps that imply the structure and functionality of your online store. Unlike other platforms, where there is only one standard setup, there's no limit to the kind of customer experiences you can offer.
Proxima is Swell's default storefront app that supports themes and customization with the Swell Theme Editor. It's installed automatically when creating a new Swell store, along with our default theme, Sunrise.
To make adoption and migration easier, Proxima has the ability to use Shopify themes, which you can upload from the dashboard in Online Store → Storefront → Add storefront. Proxima is also open-source, allowing developers to extend and customize core functionality.
If you're working with a developer, they have the ability to build custom storefront apps, and even link to external (headless) applications designated as your online store within Swell.
To create a storefront linked to an external application, navigate to Online Store → Storefront → Add storefront, select Build your own and choose the option to add a headless storefront.
To view and manage your storefront settings in the dashboard, navigate to Online Store → Storefront, where you'll find your primary storefront as well as a list of any development storefronts you've created. In this view, you'll see a recent screenshot of what your the storefront looks like to visitors, and additional actions to perform.
Your primary storefront is what visitors see when they visit your swell.store URL or your custom domain, if configured. When publishing a development storefront, it then becomes your primary storefront.
At the top of the page, you'll find buttons to View store, that will open a window to view the current live version of the storefront, and Domains, which takes you to the configuration page for custom domains.
The current live URL of the storefront is displayed in the top-left corner of this section.
You may create development storefronts for different reasons, such as upgrading your theme, or while making significant changes to your store it may be desirable to do it in a completely separate instance. You can duplicate any storefront, resulting in a copy of it being added to the Development storefronts list.
You can publish a development storefront by accessing the kebab menu on the right-side of the page, then clicking Publish. When this is done, it will replace your existing Primary storefront and move the previous Primary down to the Development storefronts list.
You can also Rename the storefront to anything you like, as this name is only used for internal purposes and will not be visible to customers.
To delete a development storefront, access the kebab menu on the right-side of the page, then click Delete storefront. This action cannot be undone.
Depending on the type of storefront, there may be general settings to adjust the behavior of the store. For example, headless storefronts typically configure an external URL, while a storefront app may have any number of settings.
To access these settings, either click on the name of the storefront in the list, or the kebab menu on the right-side of the page, then click Settings.
Menus can be configured and used by storefronts in different ways. Proxima for example, makes navigation menus available to themes which are often rendered as Header and Footer menus.
Each storefront has its own menu configuration, meaning that editing menus of a Development storefront will not affect your Primary storefront.
External storefronts also have access to these menus and can be trieved and used as content for those applications.
The platform is only concerned with the structure and content of your navigation menus, while the storefront app itself is responsible for rendering them properly.
There are several ways to access navigation menus from the Swell dashboard.
- From the Storefront list, access the kebab menu on the right-side of the page, then click Navigation.
- From the storefront detail page, click the Navigation tab.
- From the Swell Theme Editor, you can directly access menus from individual settings defined by the theme.
Changes made to navigation menus will take affect immediately in the designated storefront.
Swell Checkout is included with every Swell store. You can customize several aspects of how your store handles checkouts—and you can always implement your own custom checkout solution should you wish to. You can manage your checkout settings by navigating to Online Store → Checkout in the dashboard.
Changes to the visual styling of the checkout interface can be made through the Swell Theme Editor. To access the checkout theme editor, navigate to Online Store → Checkout and then click Edit theme. You can also access it from the storefront theme editor in the dropdown menu in the header.
There are several settings to configure how Swell Checkout behaves, such as requiring customer login, email opt-in, required and option form fields, scripts that can be loaded and store policies that are displayed to customers.
You can choose whether to require a customer to log in to their account on your store to complete a checkout. By making it optional, you allow guest checkouts, which can increase conversion for first-time customers and decrease the number of account sign-ups. You can also disable accounts entirely if your needs are simple enough not to benefit from the customer accounts feature.
Requiring that a customer be logged in helps identify repeat customers for promotions and business analytics and for customers to track order history, subscriptions, account credit, etc.
You can choose whether to display an email opt-in during checkout and whether its default state is opt-in or opt-out. A customer who opts in permits you to send promotional emails, which can be a helpful sales and communication tool for your store.
Different jurisdictions and business requirements have different needs for collecting data from customers. Swell makes it easy to configure these inputs when customers are completing their checkout.
It is often smoother and more accessible for customers depending on the information you wish to capture during the checkout process. It is recommended to require only what is necessary in order to provide a seamless checkout experience—there is a higher chance of conversion when requiring minimal input from the customer.
The field display options are as follows:
- You can require a customer to enter their last name, or their first and last name.
- For accounting and shipping reasons, it is often necessary to require that a customer enter their company name. This field can be required, optional, or hidden.
- Phone numbers can also be required, optional, or hidden. Many shipping carriers require a phone number, so they can contact the address to which they are delivering.
- For addresses, some customers will expect to be able to split their address into two lines (such as “Unit 42” on the second line), but this is not always needed and can be set to hidden (it can also be optional or required).
- You can optionally provide a place for customer comments on orders. This is sometimes used by vendors to customize orders and could be used for other purposes such as recording delivery instructions or a space to say “Thanks!”.
Swell provides a field for entering custom JavaScript to the order confirmation page. Scripts can be used for many purposes—vendors often use them to track that an order has been completed through analytics tooling, such as campaign tracking in Google Tag Manager.
By default, the checkout return URL is set to your store’s homepage. This can be changed by enabling the custom return link, then entering the desired return URL in the input field. Doing this allows you to specify where the user is taken within your store after they checkout.
By enabling the custom order receipt page, you can add the URL for a custom receipt page to be displayed to the user in place of the default Swell receipt page. This dynamically generates the receipt page by referencing a Swell order id.
You can specify your store’s Refund policy and Privacy policy, as well as your Terms of service. If added, they will be displayed to the customer (as linked pages) at checkout. For more information on how to populate these, see our articles in the Privacy and security section.
Use this setting to configure the amount of time before a customer's cart expires. Since checkout URLs can be accessed by anyone with the link, it's a good idea to ensure that carts eventually expire if they are never accessed by the customer after the initial experience.
By default, your online store is made accessible on the swell.store domain, however you'll likely want to use a custom domain purchased through a provider such as Namecheap or GoDaddy. Once you've purchased a domain, it's easy to configure on Swell using our guided interface.
To configure a custom domain, navigate to Online Store → Domains and click Connect domain. Following the steps in the popup window, you'll be able to login to your domain provider and Swell will automatically configure it to point to Swell servers.
There's also an option to manually configure your domain if preferred, or if your domain provider is not yet supported for automatic configuration.
The Swell Theme Editor is a standalone part of the dashboard that can be used to customize themes, with support from a given storefront app such as Proxima.
To access the Theme Editor for a storefront that supports themes, navigate to Online Store → Storefront and click Edit theme on the right side of the storefront of your choice. The same action is available for Development storefronts in the kebab menu on the right-side of the page.
Theme templates are used to define the structure of your website, with each template employed by the storefront app for a particular part of your store. Navigate to each template using the dropdown menu in the left-side panel of the editor, or by clicking navigation links in the center preview window.
Page settings are available for each template from the right-side panel under the Page tab, allowing you to edit page titles and descriptions, as well as to manage alternate templates used for content such as products and categories.
Each storefront app may have a different set of templates to serve its purpose. Proxima, being the default storefront app installed when you create a Swell store, supports the same templates that you would find in a Shopify store.
Visually edit and organize content using sections and blocks, each having their own settings defined by a theme. To make changes to sections and blocks, click on the target section in the center preview window of the editor and find their related sections in the right-side panel.
A theme may define a number of global settings that can affect the entire storefront. Find these settings in the right-side panel of the editor under the Theme tab.
To keep your storefront's design consistent, theme can define color schemes which are easily applied to various sections and blocks, allowing you to make broad changes without editing each application of the color individually. Locate your theme's color schemes in Theme settings.
Managing your store's navigation, such as links in the header and footer of the website, are easily done using the Navigation menu editor, accessible from individual theme settings, or globally from the dropdown menu in the header bar of the editor.
All text content in a theme can be localized for each language configured in your store's settings. Find the Language editor in the dropdown menu in the header bar of the editor.
As you customize your storefront, the editor is applying changes to code files in your theme. View and edit the code of your theme with the Code editor, located from the dropdown menu in the header bar of the editor.
You're able to make changes to content and settings in editor mode, without affecting your live site. Before publishing changes, preview the storefront by clicking the Preview button in the top-right corner. Finally, publish changes by clicking the Publish button in the top-right corner of the editor. In just a few seconds, your changes will be made live.