Today we will explore the process in which you can create your very own Shopify e-commerce template. Doesn’t matter if you want a complicated design or you are looking to build a minimalist shopify e-commerce theme, this guide is for you.
Stick with us as we will explore a very easy way of starting your Shopify theme development.
- A text editor (VScode, Sublime Text, Textmate)
- Liquid engine knowledge – Shopify uses liquid language for it’s logic behind the templates, don’t worry if you never worked with it, if you have a solid background let’s say working with nodejs or php and wordpress this should come very easy to you.
First things first – Create a development shop
You cannot work with shopify offline. Everything is done online, but I know what you are thinking…”But, how in the heck am I going to upload every change I do onto the server?”
The answer is that we will connect with the online development shop from your local machine and every change you will make it will automatically be uploaded onto the server.
So, let’s head on over to the partner app and create our account. This will enable us to create a development shop that will allow us to build our custom template.
After you have successfully logged in into the development shop then it’s time to move on and install our local environment.
Step 2 – Shopify theme kit
All of the magic that will connect our online development shop with our local machine is done trough the Shopify theme kit. So first let’s download it.
If you are on Mac or Linux you can install the theme kit but typing (copy/pasting) the following command inside a terminal window:
curl -s https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | sudo python
Also there is a homebrew installation available:
brew tap shopify/shopify brew install themekit
If you are on windows the official steps to installing this are available on the themekit official documentation.
Now that we installed themekit it’s time to connect your local environment with your online store. You can do this by navigating on your shopify store admin and the you need to go to apps and generate a new API secret for your app so the full path is:
Shopify Admin -> Apps -> View private apps -> Generate API credentials
Here you give your app a name then navigate to the “Theme templates and theme assets” and give it full read & write access.
Once this is done you will need to write down the password secret. You will need that later.
Now open up your terminal and bootstrap your template kit by writing the following. Keep in mind to be in a created document when you do this like your work docs or something and don’t do it like me in the root.
theme bootstrap --password=your-password --store=your-store.myshopify.com
Just replace your password with the secret from before and your store URL.
Importing dummy data into your development shopify store
The next important thing we need to to is have some sort of dummy data that we can manipulate and showcase in our development store. You cannot build a shopify template without this so download this, and then go to your shopify admin -> products -> click on the 3 dots button -> browse and import:
Next thing is to enable our theme and then watch for changes on our local environment. So navigate to your development store then Online store -> Themes and activate your newly created template.
Next thing is to start working on our custom template by watching for changes:
theme watch --notify=/tmp/theme.update
This will watch your directory for changes and ultimately upload them to your shopify store.
For the next steps I encourage you to begin the learn how to build themes for Shopify course on tutsplus. You will learn the basics of template development with the Liquid engine and you will be able to create full fledged shopify templates in no time.
Ready made shopify templates
Is creating a template too much for you? You are actually in luck, you can choose from already made shopify themes like the ones below:
Just click on any of them to see more about them.