The storefront is the customer-facing part of your Swell store. Swell provides several options for storefronts using existing websites or the ability to use third-party solutions such as Builder.io or Next.js Commerce starter kit.
From the dashboard, you can link an existing website or checkout. These settings are accessed by navigating to Storefront > Settings within the Swell dashboard.
If you intend to use a third-party or your own solution for the storefront, check out our developer content for more information.
You can use your own website as your storefront and sync to Swell. Once activated, provide the website URL you wish to use and save the changes.
Upon successfully syncing with your URL, the preview card will display a preview of your website under the Storefronts dashboard. You can also confirm that the sync was successful by clicking the preview URL in the storefront card.
We will continue to service any stores that are using a hosted Swell theme. You can manage the settings, domains, content, and appearance of your storefront through the Swell’s dashboard. 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.
Every storefront that is defined comes with its own unique settings that can be accessed by going to the "Actions" dropdown menu and selecting "Settings". Within these settings, you can make changes to the storefront name and the storefront's URL.
The store title helps you differentiate among several storefronts.
The storefront URL connects your storefront to your store.
A storefront API key allows you to identify and authorize API requests made to your storefront 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 front-end, you can share your storefront key by selecting the Copy button. This grants them access to make authorized changes your store’s storefront. For storefronts that don’t have a key, you can add one by selecting the Add public key button.
Your public and secret keys will be automatically generated once you save your new storefront. They can be accessed through the Storefront settings or through the main menu under Developer > API keys dashboard.
Hosted storefront themes are no longer supported for new stores. The code will remain available on GitHub as starter kits for reference, and you can deploy them on your JAMstack hosting service of choice. If you are currently using a hosted theme, please be aware this service will be deprecated sometime in 2023.
Enabling a password
If you're using a Swell storefront theme, you can enable password protection to prevent users from landing on your website before it is ready. You can enable/disable the password requirement via the toggle.
Adding SSH Keys
You can also access your SSH keys from within the Storefront > Settings page. This allows you to access and make changes to your storefront through git. Select Add SSH key to enter an SSH Key for your storefront. 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.
Hosted storefront themes are no longer supported for new stores. The code will remain available on GitHub as starter kits for reference, and you can deploy them on your JAMstack hosting service of choice. If you are currently using a hosted theme, please be aware this service will be deprecated sometime in 2023.
There are two options for customizing your Swell storefront: Origin and Horizon. 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.
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.
Hosted storefront themes are no longer supported for new stores. The code will remain available on GitHub as starter kits for reference, and you can deploy them on your JAMstack hosting service of choice. If you are currently using a hosted theme, please be aware this service will be deprecated sometime in 2023.
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.
If your store is using a Swell theme, you can still access the visual editor. Under your storefront preview card, click on the dropdown button Actions > Edit theme. 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 through the Storefront editor. Inside your editor, click on Design & global settings > Header. Under "Navigation menu", click Edit menu.
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, click on the menu from your navigation, and inside the modal popup click "..." and select Delete.