Storefronts

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 GitHub's SSH key docs 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 Storefront section within your dashboard. Within the code block directly underneath the storefront preview. It will look something like this:

git clone git@swell.store:your-store-id.git

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

cd your-store-id/

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.

git push

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.

Copy the Clone HTTPS URL, and add a remote theme with the copied URL for your storefront repo. For example, if we are updating Origin, we'd use https://github.com/swellstores/origin-theme.git.

git remote add theme (paste the URL here)

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

git fetch theme

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:

git merge theme/master

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

code . 
👉

This command may need to be installed. Press Shift + Cmd+ P (or Shift + Ctrl + P) to open the Command Palette. Search 'Install command' and install the code command in PATH.

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:

git log

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

Merge remote-tracking branch 'theme/master'

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

git push

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.

💡

You may encounter a scary 500 message, but refreshing the instance of the editor will resolve this and display your new, up-to-date storefront.

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.