Origin is a full-fledged and functional ecommerce web app for Swell that utilizes modern JavaScript and front-end tooling. It's intended as a reference example and starter project for building custom storefronts powered by Swell. Take what you need and make it your own—without having to start from scratch.

Built with Nuxt.js (the Vue equivalent of Next.js).

Uses Tailwind CSS, so it's easy to change the design.

Connects to a hosted git repo for syncing code and settings with your live store.

Supports editable custom content types and fields in Swell's dashboard and visual storefront editor.

Includes page templates, sections, and components for common use cases.

Multi-currency and multi-language support.

Subscriptions for physical and digital products

Add your Swell store ID, public key, and url to 

Connecting to Swell

Installation

If you aren't already familiar with Vue, Nuxt, Tailwind, or Swell, these resources will get you up to speed:

For more advanced usage and packages you can use in your project:

Sentry integration for error reporting is provided by the 

 module. All you need to do is add your DSN, either as a 

, so you don't need to explicitly import them.

Common cart methods are implemented as Vuex actions in 

Swell.js is initialized and injected into the Nuxt context as 

For a detailed explanation of how these things work, check out 

 defines the settings fields available in the 'Design & global settings' section of the theme editor in the Swell dashboard.

 contains the values of those settings fields, plus a read-only 

 object with things like your store name and currency.

 defines locations/slots in the theme that can display a navigation menu and the shape of each menu tier. This config is used in the dashboard (under storefront > navigation) to show admins a menu editing UI.

 contains all navigation menus that have been set up in the dashboard.

Whenever store settings, theme settings, or navigation menus are changed in the dashboard, 

 will be updated in the remote repo. You can edit this file locally for testing purposes, but keep in mind that pulling from the remote will overwrite your changes.

 are treated as style properties, with their child keys and values converted to CSS variables at build time in 

. If you have additional fields that you want to generate variables for, add the keys to the module options.

 is configured as a style property, that will generate the CSS variable 

, the following config would convert any properties on the 

trogdor style

The resulting object is turned into a list of root CSS variables by the 

 module. You can reference these variables in 

 or anywhere else you need to change how components are displayed.

In dev mode, these will be injected as an inline stylesheet for rapid prototyping. For production, a stylesheet will be written to 

 during the build process and loaded as a global CSS file.

If you want admins to be able to choose from several predefined style sets for colors, typography, and other design parameters, you can define them in 

. All properties of the active style set will be merged into 

 folder stores content type definitions. Each JSON file represents a content type, which can also be referenced in other content types.

If a content type doesn't need to be referenced in multiple types (e.g., a repeatable item in a media slider), you can define the type object in the 

: Human-friendly label displayed in the dashboard.

: Explanation of what the content type is intended for.

: If a content type is only used inside another type and doesn't need to be fetched by itself, you can leave this attribute out.

There are two situations where you'll need to specify a 


If the content type is standalone and needs to have its own endpoint for fetching data (like pages or blog posts), the 

Content types can be used to add fields to system models like 

 attribute with the system model ID as the value will add a 

 object to each instance, with content type field nested inside. This way, custom content fields won't ever conflict with standard fields.

: An array of field definition objects (see below for details)

As you'd expect from a CMS, there are many different field types you can use to model and edit your content. Each field on a content type is an object containing the following attributes:

: A unique field ID for referencing the field in code. IDs may be specified as an object path, enabling values to be nested together for convenience and clarity.

 is the type of field to use for storing the value.

 (optional) is the interface displayed in the dashboard, allowing for a more appropriate editing experience and specific formatting. If omitted, the default UI for the field type will be used.

: For breaking up a set of fields in the dashboard. Not included in API responses.

heading example

: For a small amount of plain text that fits on one line.

short_text example

: For a larger amount of text that spans multiple lines and may include special formatting.

long_text example

number example

: For binary values that are true or false.

boolean example

: For choosing from a list of predefined values.

select example

lookup example

: For uploading files like images and documents.

asset example

: For lists of items that can be manually ordered. Ideal for flexible and repeatable content like landing pages or media sliders.

collection example

: For inputting dates and times; saved as an ISO 8601 date string.

date example

: For inputting a color using a color picker UI; saved as a hex code.

color example

: For Adding one or more text tags; features autocomplete.

tags example

Origin

Horizon is an upcoming Swell storefront theme designed entirely around subscription-based commerce. We are excited to announce a new theme that leverages the powerful subscription features we have recently implemented on Swell. 

, we have introduced more subscription-related features to Horizon in order to provide users with a solution for subscription-based business models. 

Ability to separate billing and fulfillment on subscription plans.

Manage subscriptions, invoices, orders all through our dashboard. 

Suggest products with a customizable quiz buying flow.

Templated membership and product feature pages.

Assortment of style presets to jumpstart your storefront.

Learn more about Swell Subscriptions and Horizon.

Horizon

With the addition of new features and functionality within Swell, we make periodic updates to our storefronts to support these new features. Implementing updates to your storefront can be done with the use of git and your terminal. Configuring your git repo will also enable you to directly edit your storefront theme's code—allowing further customization than what's possible within the storefront's visual editor.

In order for you to directly access and change the code of your theme, you will need to create a repo for your storefront's theme and make changes to the code from within the repo. From there, you can push your changes live as well as use your repo to get the latest updates to support storefront updates and new functionalities. 

The first step will be generating your SSH key. See 

 for additional information on generating your SSH key. Once generated, add the key and a key name to your SSH keys.

After adding the SSH key, from within your terminal clone your personal storefront repo—this will clone all of your current settings that have been configured within your dashboard.

You can find the command to clone your store repo on the 

 section within your dashboard. Within the code block directly underneath the storefront preview. It will look something like this:

To view your recently cloned storefront repo, use the following command (this is also listed on your Storefront section within the dashboard).

You will see your store configuration and settings reflected within your cloned storefront. Additionally, you can further customize your storefront's theme code from your git repository and push updates from your repo now that it has been created.

You can push any changes made you your theme's repo live with the following command. You will also need to view and publish the changes live from within the storefront editor once the updates have been pushed to your storefront.

Once you have published the changes within the editor, your storefront will reflect your most recent updates to the theme. 

In addition to setting up your repo for customization, you can also merge it with the Swell theme's public project to receive updates that may have been released for your storefront theme. This could include new functionality, bug fixes, and other similar changes to the base theme that will need to be added through a merge to your master branch.

Get Swell theme's public project HTTPS URL

Copy the Clone HTTPS URL, and add a remote theme with the copied URL for your storefront repo. For example, if we are updating 

https://github.com/swellstores/origin-theme.git.

Fetch the theme to get the most up to date branches and commits from the Swell public repo:

Now that we've got the current Swell storefront theme, we're ready to merge with our master branch.

Merge the Swell theme to your store's master branch:

You may encounter conflicts depending on how recent your Origin version is. If this is the case, resolve the conflicts to facilitate the merge.

Open the code editor to resolve the conflicts with the following command

Review and accept the changes to continue the merge process and save. Your repo will be up to date once the merge completes. 

Performing a git log will confirm the merge was completed successfully:

You should see a result within your log like this one:

Now let's get the new storefront version live. Initiate the update with the following command:

This may take a moment to finish—usually about 5 minutes or so. You should see a success message along with some additional instructions within the console once the process has been completed.

The last step here is to go to your storefront editor to publish the updates to your live storefront. Navigate to the storefront editor and press publish.

Once your updates have been published, you're all set. Your storefront will have retained your settings and configurations along with having the most recent build.

Learn how to clone your theme to a git repo and also merge theme updates from Swell's public project.

Updating Swell themes

Vue is compatible with the Swell.js SDK—learn more about the Swell.js SDK with our 

Nuxt is a popular, modern web development framework built with Vue.js. Its balance of performance and approachability is a core reason we chose it to build our first storefront theme. So whether you're looking to update your Swell-hosted storefront with our built-in editor or craft the newest ecommerce experience, you get the latest JAMstack experience with Swell and Nuxt.

Swell's Origin storefront theme is a comprehensive ecommerce starter kit built with Vue and Nuxt—making it a great starting point for anyone looking to use Vue/Nuxt for their storefront. This kit includes most core functionalities of an ecommerce site—with the flexibility to customize it as you see fit. 

Looking for a frontend solution using React? Pair React with our Swell.js SDK in order to build out your storefront. Learn more with our

Next.js is the leading React framework. We're currently developing a brand-new, subscription-focused storefront with Next.js and React—showcasing the power of a truly headless ecommerce backend that's combined with lightning-fast frameworks.

We've also released two developer starter kits built with Next.js, the 

, so you can get started building with Swell and Next.js.

Along with our Swell.js compatibility, there is a community-based 

We're constantly adding new libraries and developer kits. Even if you don't see your preferred technology listed above, rest assured that any Javascript framework can be used using our 

. This includes, but is not limited to the following frameworks:

A quick glimpse of supported frameworks that can be used for building a Swell storefront.

Frameworks

Builder.io

Next.js Commerce

Storefront apps

Hosting Swell storefronts

Like Netlify and Vercel, Cloudflare Pages is another JAMstack oriented deployment platform with room for advanced collaboration on projects through unlimited seats. 

Storefronts on Cloudflare Pages

A seasoned veteran in the cloud hosting space, Heroku is renowned for its ease of use, scalability, and flexibility in building web apps.

Storefronts on Heroku

Offering hosting and serverless backend services, Netlify specializes in automating the deployment of static websites.

Storefronts on Netlify

Built and designed with the developer experience (DX) and performance in mind, Vercel is a serverless backend hosting platform for web applications. 

Storefronts on Vercel

Swell supports the use of custom domains for your storefront—with the ability to auto-generate SSL certificates for your custom domains. SSL, or Secure Sockets Layer, certificates ensure that information such as personal data entered on your site is secure. This provides peace of mind for your customers.

From the Swell dashboard, enter custom domains from 

within the Storefront section. You can configure and generate SSL certificates through Swell for multiple custom domains and remove any domains you wish to disassociate with your storefront.

Once you have added the custom domain you wish to use for your storefront, the next step will be verifying that domain—this will need to be done before the domain can route traffic to your storefront through the custom domain.

This step is accomplished through your domain provider. For example, if your domain is through 

, you will need to log in to manage the domain settings on Namecheap's side. From the domain provider's dashboard, you will need to find the DNS settings (sometimes the Advanced DNS settings), which allow you to add host records.

After finding where to add the record, we want to create two new records for your storefront. They will both need to be CNAME type records. They should look something like this:

In addition to setting both records' types to CNAME, you will need to create one record with a 

 inputs will be your storefront's current name. You can find this in the Swell dashboard by clicking 

 on the domain (the result is illustrated in the screenshot above). For example, if 'CNAME: storefront-demo.apps.swellstores.com' is displayed in the Swell Verify domain window, we'd use 

 as the Value for the CNAME record. This input will be the same on both records.

to automatic if it is not already populated. Then save your changes to the DNS records, and navigate back to the Swell dashboard.

From there, you can click Verify connection to verify your custom domain has been successfully linked to your storefront. Once successful, your domain's status will say Verified, and you will be able to enable the SSL certificate generation for the verified domain.

In addition to generating SSL certificates for your custom domains directly within Swell, you can also accomplish this through Cloudflare. See our Cloudflare guide for custom domain and SSL generation for more information. 

Custom domains and SSL with Cloudflare

Swell supports the use of custom domains for your storefront—with the ability to auto-generate SSL certificates for your custom domains.

Custom domains and SSL

Information relating to Swell themes, third-party storefront apps, hosting, and configuration for storefronts. 

Filter

Horizon

Coming soon

Overview

Features

Subscriptions

Additional features