The storefront is the customer-facing part of your Swell store. You can manage the settings, domains, content, and appearance of your storefront. Swell provides several options for storefronts: our pre-built storefront themes, using existing websites, or the ability to use third-party solutions such as Builder.io or Next.js Commerce.
Swell storefronts are deactivated by default. To activate your storefront, log in to the Swell dashboard and select the Storefront tab. Click on the large Activate storefront button in the middle of the page. This will launch your storefront with our basic theme, Origin.
If you intend to use a third-party or custom solution for your storefront, check out our developer content for more information.
Launching the storefront with the Install demo content checkbox selected will populate your storefront with some demo content to help get you started. This can assist in providing an idea of what you’ll need to add to your store to get it up and running.
You can also remove any demo content that does not suit your storefront’s needs. To do so, navigate to Storefront within the dashboard and then click the Edit theme button on the top right to open the editor.
Want to start with a blank canvas? No problem. Just be sure you leave the checkbox deselected when clicking Activate to launch your storefront.
Ensure your Swell storefront theme has the most recent improvements and fixes by updating it to the latest version. You can do so directly from the dashboard.
An update is available when a purple dot appears beside the theme version number. Selecting the version number displays a modal, where you can learn about the latest improvements and fixes and decide if you want to start the update.
Selecting the Update button begins the update process. While the theme is updating, you will not be able to use the storefront editor. Selecting the Not now button lets you update at a later time. Should you forget to update, the purple dot will act as a reminder until you do so.
You can always review the release notes of the latest update by selecting the theme version number—even after updating. 😉
Swell’s storefront settings are located within the Storefront > Settings page. These settings allow you to edit the homepage title and descriptions, as well as enable password protection. Continue reading to learn more about each storefront setting.
The store title and description provide users and search engines a summary of your Swell store. Be sure to update these to include keywords and clearly explain what customers can expect when visiting your store.
Once you activate your storefront, you can enable password protection to prevent users from landing on your website before it is ready. Once activated, you can enable/disable the password requirement via the toggle.
Swell’s storefront developer tools are located within Storefront > Developer tools. These tools include access to your Storefront API key, Git management, and SSH keys. Below is an overview of each of the areas within the storefront developer tools.
A storefront API key allows you to identify and authorize API requests made to your storefront theme. If you manage multiple storefronts, each one will have a different key.
In cases where you work with third-party teams to customize your store’s theme, you can share your storefront key by selecting the Copy button. This grants them access to make authorized changes your store’s theme. For storefronts that don’t have a key, you can add one by selecting the Add public key button.
Setting up a storefront repo provides more comprehensive control when it comes to editing the look and feel of your store. Take full control of your store’s design and structure by accessing the source code. You will need to add an SSH key before you can directly edit your storefront theme’s code. For more information, see our dedicated guide for theme git management.
You can also use the storefront editor to customize your theme. However, the editor’s functionalities are limited in scope—focusing more on aesthetic changes like creating and editing pages with various pre-designed content blocks.
SSH keys allow you to access and make changes to your Swell-hosted storefront through git. Add an SSH key to your storefront by selecting the Add SSH key button. You will need to provide the Public key and the Key name. Check out our guide for making updates to your storefront via git for more details.
When setting up a storefront repo, make sure you’re using valid Editor settings—each theme has its own by default. This is necessary in cases where you want to use both the storefront repo and the storefront editor to customize your storefront.
Already have a custom site? Swell supports a variety of storefront options, including using your own. From the dashboard, you can link an existing website or checkout. These settings are accessed by navigating to Storefront > Settings within the Swell dashboard.
You can use your own website as your storefront and sync to Swell by enabling the Custom storefront toggle. Once activated, provide the website URL you wish to use and save the changes.
Upon successfully syncing with your URL, the preview window will display a preview of your website under the Theme tab. You can also confirm that the sync was successful by clicking the Visit store button to go to your storefront.
Similarly to linking to a custom store site, you can utilize a customized checkout rather than using Swell’s standard checkout. Enabling the Custom checkout toggle will prompt a URL field for you to enter the domain for your customer checkout page.
Using a custom checkout prevents you from accessing features of Swell’s hosted checkout.
There are two options for customizing your Swell storefront: You can customize your theme right in the dashboard—you can also access the source code for even more control. Check out our documentation on storefronts to see more storefronts options, or read on to learn about what you can customize within the storefront visual editor.
The Origin storefront theme has everything you need to get your store running right out of the box. This pre-built template provides a solid foundation for any store, and it features several key functionalities that can be customized further to suit your specific ecommerce needs.
You can use the Storefront editor to customize Origin without the need for code or view our Origin developer documentation for additional information regarding hosting the theme and editing the code directly for a more comprehensive customization experience.
To initiate the Origin app for your storefront, you will need to ensure that you activate your storefront with the Install demo content checkbox selected. This can be done by navigating to the Storefront panel within the dashboard and clicking Activate storefront in the theme preview.
The Origin app is a full-fledged ecommerce website that is meant to serve as a base for your store. Take what you need and make it your own—without having to start from scratch. You will find a comprehensive list of Origin's features below:
Add pages and create content sections for your storefront to fit your design needs. Place your custom content sections within pages in the storefront editor. Use Origin's layout as a foundation to further build out your store.
Localize your store to support multiple languages and currencies. Use the storefront editor to translate your text to ensure accuracy.
Origin features a ready-to-use checkout experience that spans from the cart through to the completion of a purchase. It can be customized further or even replaced entirely with a different checkout flow should you already have your own.
Origin offers a quick add-to-cart functionality for products. The product options determine the type of interaction encountered by a customer. Products can be added to the cart by the quick add functionality if the product has two or fewer product options. A quick view feature is implemented for products with three or more options instead.
Create and manage promotions and coupons through the dashboard. Define various parameters to help track and maintain how they are redeemed.
Highlight your product's selling points by managing product features and customizing their icons. Specify product attributes to help customers filter product search results. You can also show these on individual product pages.
Classify product categories to group related products. Product search features sorting by category and segment products by category if not specified in the search query.
Create subscription plans that allow for product variations. Customers also have the ability to manage their subscription plans from their store account.
Origin includes customer accounts and enables customers to keep their information within their store account. Users can manage their orders, billing information, addresses, subscriptions, and more from within the account.
Manage store architecture and define navigation structures like headers, footers, and secondary menus through a visual interface within the editor.
Included with all Swell themes, the Storefront editor is a visual interface that allows you to design, add, and edit pages and content directly on your storefront without the need for code. The editor allows you to control various global design elements, page content, and styling and manage other content like navigation and localization for multiple languages.
After activating your theme in the dashboard, you access the storefront editor by clicking the Customize button within the Storefront section of the dashboard. The editor is where you can preview your store on different viewports, which approximates the appearance on desktop, tablet, or mobile. You can Preview any changes you make and Publish those changes when you're ready.
The storefront editor is only compatible with official Swell storefront themes like Origin or Horizon. While Swell supports custom or third-party storefront solutions, they are not compatible with the visual editor.
Within the editor, you can customize many aspects of your storefront. There are also various settings for page and content creation that allow you to control the flow and presentation of content within the pages on your storefront. Origin, our basic starter theme, includes all of the following outlined in this article, though other themes may expand the editor functionality.
Change your store's appearance by clicking Design and global settings. As you make changes, the preview will update accordingly, so you can always be sure what you're updating.
The settings sections and features outlined below are default settings included for all Swell storefront themes. Depending on which theme you are using, you may encounter a different set of options.
- Style settings include customization for colors, typography, and products previews.
- Header settings for editing the logo (and favicon), creating a promo bar, and managing the main menu navigation.
- Footer settings for the footer menu, an optional secondary footer menu, and the option to show social icons, contact info, and an email signup. You can also choose whether the footer should have a dark or light background.
- Social media and sharing settings include the ability to indicate any social media accounts you have, such as Twitter, Facebook, and Instagram.
- Product list includes the ability to enable features on items such as the quick add to cart feature.
- Subscriptions includes setting available actions for customers to edit their subscription plans, subscription frequency, and other subscription options from their profile.
- Cart includes the ability to specify the start shopping link endpoint—this is where the user is directed to begin shopping—for example, setting it to /categories/ will direct a user to the product categories page when they click Shop. You can also enable stock validation on products when added to a cart.
- Analytics includes an area to link a Google Tag Manager ID. For more information, see our article on configuring your storefront analytics.
- Global scripts is an area that allows adding global analytic scripts for both header and body.
- Checkout includes options for customizing the different checkout sections, such as the header, logo image, content, and cart area. You can also edit the background image, colors, and typography.
This section allows you to control the languages and additional copy (such as messages) found throughout your storefront’s pages. You can specify content for both your store’s default language and any additional languages your storefront supports. Each enabled language will have its own set of entries. See our multi-language guide for more information on enabling and managing multiple languages in your storefront.
This section allows you to specify product details for display on product pages. In addition to creating and editing various product benefits, you can enable social sharing for products and the ability to set and display the stock levels for products.
This is where you can customize the category detail page. Settings include the option to show a hero image and specify the text color, the number of products per row, and the number of rows displayed per page.
Here you can customize page content for existing pages of your store or add new pages and content to your storefront. Each page is built up of various content blocks, which can all be customized with various forms of content. Additionally, you can also clone and delete pages and designate your storefront homepage.
When creating or editing pages, additional content can be added in a variety of ways. Our pre-configured content blocks streamline the process for creating page sections and controlling the layout of your storefront pages. When viewing any page within the editor, you can add sections and style them to your preference.
Once a section has been added, the next step is to choose the type of content block to feature in the newly created section. Some of the styling options for content blocks are populated from your Style settings found under Design & global settings within the editor. Changes to your style settings will be reflected in your content blocks.
Below is a list of all basic content blocks available within the editor:
- Collection preview provides a preview of a product collection and its products. This allows for further customization, such as specifying how many items are displayed per row, the number of rows shown in the content block, text alignment for both products and title, and the title size. Additionally, you can choose to hide or show the content block title and product prices.
- Customer reviews showcase customer testimonials and ratings within a modal. Each review displays a star rating score (1 to 5 stars), the customer's name, location, and a quote. Clicking the arrow (left or right) within the content block will cycle through additional reviews created within the content block.
- Email signup allows customers to submit their email to be on a messaging list for things such as promotional emails or newsletters. For content, you can edit the heading and description text and the background image. Additionally, the style options allow you to specify the background color, spacing, position, and alignment.
- Full width media is a content block that can display an image, add text, and add a button or link to send users to other areas of your store. The style options allow you to specify the text and background color, spacing, position, and alignment for text within the media block. Inner and outer spacing options adjust the background image size and proportions. This content block is excellent for creating a call to action.
- Large media displays an image with a heading and description above the image rather than overlaying it. Each image within a large media content block can be linked to a URL of choice and feature an image description. You can also choose the background color for the content block.
- Multiple features display defined features accompanied by an icon. Each feature tile has its own icon—use these to showcase features for your store, products, services, and more.
- Multiple panels create a grid of panels two columns wide. Each panel can either hold an image or a text heading and description. Panels with text can feature links displayed as either a button or linked text, while media panels can embed a link to the photo to redirect when clicked. Alt text can also be designated for the images within panels.
- Press mentions are similar to reviews in that they are meant to showcase a quote, though press mentions are paired with a publication name and the publication's logo. These are displayed in a row rather than a carousel. If an icon is used, it will be displayed in the block—hovering over the logo reveals the publication quote and name. Each row fits four press mention blocks.
- Heading with text displays a heading accompanied by body text and a section label. The body text has many formatting options and also supports media embedding. Styling for this section includes setting the heading position—specifying single or double columns for body text, the text column width, and the background color.
Depending on your specific storefront theme, additional content blocks may be available to you in the storefront editor. If you are using Origin, the list above encompasses all content block options available to you. For more information on content blocks relevant to other storefront themes, see the list of resources below.
- Learn more about Horizon content blocks COMING SOON
Storefronts can support a variety of file formats for imagery—and some are better suited for particular purposes than others. Before we dive into the considerations for using each image type, let's explore the common file formats we use and support with Swell storefronts:
This file type is most often used to store digital images and photos. JPEGs go through a compression process to significantly reduce the image file size—making them ideal for use on web pages and reducing load times.
JPEG images use a rasterization process when compressing the file, meaning that depending on the original size of your file there will be a loss of quality when exporting a raw image to a JPEG. This compression depends and quality loss depends on the original image, the JPEG size, and the level of file compression. Additionally, JPEG images do not support background transparency like PNGs, so they are less suited for handling things like graphics.
These files are best suited for web graphics, feature a transparent background, and feature a lossless form of file compression—meaning the quality of the image won't be lost during compression. They can, however, still lose quality when being resized significantly.
PNG file sizes are larger than JPEGs, and this can potentially affect web page load speeds depending on the number of PNGs and their size. You'll often find PNGs being used for logos and other web graphics that benefit from having a transparent background. This allows for their usage in a variety of ways within a website without obscuring the image or background behind them.
Swell does not support the SVG image file type at this time.
When using imagery for your storefronts, you should also consider the various types of screen resolutions on which your site will be viewed. With the growing prominence of 4k and retina displays, utilizing higher-resolution imagery is key to providing a universally beautiful experience across all screen sizes and resolutions.
To ensure your imagery meets a minimum standard for compatibility at high resolutions, we recommend using JPEG images with a resolution of at least 2400px wide. This will ensure that the image itself does not appear blurry or pixelated if viewed on a display with a retina display or similar resolution.
For PNGs, both the PNG-8 and PNG-24 file formats work well—with the PNG-24 file type being the highest quality. This higher quality comes with a caveat, and the PNG-24 is also significantly larger than PNG-8 files. We recommend using PNG-8 files to prevent longer page loading speeds.
When uploading images through the dashboard, the image cropping tool allows you to edit and format your images.
Image thumbnails throughout the dashboard will feature a crop icon in the top left when hovering over a thumbnail. Click the crop icon to pull up the editor. From there, make your desired edits and press Save.
When formatting an image in the dashboard, there are several options for editing within the cropping tool:
- Free-form cropping—including preset aspect ratios: 16:9, 4:3, and 1:1
- Specify image dimensions in pixels
- Zoom-in and zoom-out
- Rotate image 90° clockwise and counterclockwise
- Flip image horizontally and vertically
- Reset image
The navigation of your Swell store can be edited by selecting Navigation under the storefront drop-down on the dashboard.
You can create a new store menu by clicking the New menu button. Give your menu a name and edit the alias, unless you wish to keep the default name Swell generates. Next, click the Add item button to begin adding pages, products, or links to the menu. For each menu item add a label, type, and content model then Save your menu item. When you are finished adding menu items, click Save menu to finalize your changes.
If you need to add or remove items from an existing menu, you can do so by clicking the item name under the menu list. You can edit, remove, or rearrange menu items as desired. To delete a menu, select the menu from your storefront navigation and click Delete menu.