How to set up a shopify local development environment. Shopify is an interesting platform – they allow you to create and edit your own tempaltes (using liquid) but there isnt a way to run an instance locally, like you would for wordpress for example. As a developer, you want to be able to test out your code before committing it and launching to a live running site – so how do you set up a workflow which allows you to edit and test your code before sending to the live website?
In short, the process is:
Clone the running theme > download > make edits > upload > preview the store with the cloned theme.
To do this, we need to install the shopify themekit code:
#on mac:
brew tap shopify/shopify
brew install themekit
on linux:
curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
on windows:
choco install themekitOnce you have that installed, log in to shopify and get an API key
Navigate to Shopify admin > Apps > Manage private apps.
If you see a notice that “Private app development is disabled”, then click “Enable private app development”. (Only the store owner can enable private app development).
Click Create new private app.
In the App details section, fill out the app name and your email address.
In the Admin API section, click Show inactive Admin API permissions.
Scroll to the “Themes” section and select “Read and write” from the dropdown.
Click Save > Create app.
You’ll return to the app detail page. Your new, unique access credentials are visible in the Admin API section. Copy the password. You’ll use it in the next step.
Shopify local development – Create a new theme.
If you are starting from scratch and want to get a quick start, run the following:
theme new --password=[your-password] --store=[your-store.myshopify.com] --name=[theme name]This will:
- generate a basic theme template locally
- create a theme on shopify
- upload the new files to shopify
- Create/update your config file with the configuration for your new theme.
Modify an existing theme.
To connect an existing theme, you need the theme’s ID number. The easiest way to get your theme’s ID number is to use the get command like this:
theme get --list -p=[your-password] -s=[you-store.myshopify.com]Then once you have noted your theme ID, run the following command to generate a config and download the theme from shopify:
theme get -p=[your-password] -s=[you-store.myshopify.com] -t=[your-theme-id]
** this will download into the current folder.https://shopify.github.io/themekit/
https://liquify.design/all/local-shopify-development/
At this stage, you are ready for the workflow:
Download theme, tinker, upload theme.
This is fine, but what if you want to make sure all your changes are correct before deploying to a production site?
In that case, you need a staging site – Shopify doesn’t really have the concept of a staging environment, but you can work on a clone of the main site, or you can work on a duplicate of the theme.
I’d recommend the ‘duplicate theme, work on that, use preview’ workflow (though its not my preferred way of working, it will get you through most things on shopify if you have to make some changes)
Its easy enough to duplicate the theme – just log into your shopify partner (request access to the store if you haven’t got access already) and go to store > themes > on the ‘action’ button for the active theme, select ‘duplicate’
You’ll now see a copy of the theme, which you can download and work on (and you can preview the results when needed with the preview button)
https://help.shopify.com/en/manual/online-store/os/using-themes/managing-themes/duplicating-themes
I would recommend signing up as a shopify partner, its free and you get access to a ‘development store’ where you can build your themes and transfer over to the store owner once completed (and you make a recurring referral fee for doing it that way)
