Shopify Local Development

Shopify Local Development: How To Develop Shopify Themes Locally

What is Shopify Development and Theme Kit?

The aim of Shopify is to make commerce simpler for all. But, Shopify is unable to provide its users with everything. And so it enables third-party developers, known as Shopify Partners, to create apps, themes, and other integrations that build on the foundation of Shopify.

Shopify development is normally performed by an online Shopify Theme Editor. The online editor is a decent starting point, but local Shopify production is always the preferred option when working on themes on a daily basis. Shopify Themes allow merchants to quickly control the look and feel of their online stores.

I’m going to show you in this blog how to install and use Theme Kit, a cross-platform tool that allows you to interact seamlessly with the Shopify platform while using all your own development tools. Continue reading to find out!!

What are the offline options for Shopify Development?

The online editor is great because you don’t need to install something on your computer. You can access the Theme Editor from the main “Shopify Admin” menu and enable simple tweaks to your theme that you can launch immediately.

Local Shopify production helps you to use any of your favorite development software to connect with the Shopify app.

You will need the Shopify Theme Kit to set up a local setting.

The Theme Kit is a cross-platform tool that runs on Windows, Linux, and macOS computers. Theme Package helps you to use workflow software like Git, use your favorite text editor, and collaborate with a team on your project.

How can Shopify themes be built locally?

Shopify themes can also be built locally. Take the following measures to set up a local planning environment:

  • Install the Store Theme Kit
  • Get access to the API
  • Using a new theme or customize an existing theme with a theme collection

The clarification of the steps alluded to above is as follows:

How to install the Shopify Theme Kit

Automatic installation

If you are on Mac or Linux, you can automatically download and update Theme Kit for you using the following installation script.

curl -s https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | sudo python

Homebrew

If you have your homebrew enabled, you can update Theme Kit by executing the following commands.

brew tap Shopify/shopifybrew install theme kit

Windows Installation

For Windows, you start by creating a new folder in C:\Program Files and call it Theme Kit.

Then download the Theme Kit, extract it, and copy it to the folder.

Add C:\Program Files\Theme Kit to the PATH setting

Test if the installation was successful by running theme in cmd.exe.

If you have some older versions of Theme Kit installed, first uninstall the gem from previous versions. You can do this with a gem uninstall Shopify-theme command. You can then upgrade the Theme Package with theme update –version=[version number]. You will find the new versions on Github.

How to set up API credentials

The second step in allowing local Shopify creation involves linking the local theme to your Shopify store. To do this, you need API credentials: key, password, and theme ID.

API credential allows Theme Kit access to your store and theme files that you have in your store. To receive an API credential, follow the simple steps:

  • Sign-in to your store and store the admin.
  • Browse to “Apps.”
  • Choose “Manage Private Apps” and then “Create a new private app.”
  • Enter the “Private App Name” title.
  • Please add your email address under “Emergency Developer Email.”
  • In the Admin API portion, go to “Theme templates and theme assets” and select “Read and write access.” Without this, you won’t be able to obtain the correct credential.
  • Finally, click the Save” button.

A prompt will tell you that you are about to create a new set of API credentials that can be used in your store and urge you to keep them secure. Click “I understand, create an app.” This will generate an API credential under the “Admin API” section.

How to get your Theme ID number

Go to the Theme Editor, click “Edit HTML/CSS,” and copy the theme ID number from the URL—the last few digits after ‘mystore.myshopify.com/admin/themes/.’ You can also run a command in the Theme Kit that lists all the themes associated with the shop, as well as their IDs:

theme get –list-p=[your-api-password]-s=[your-storemyshopify] .com]

How to download theme

Now that you have everything you need to start Shopify local growth you will need to create a config.yml file. This file is the key link between the local environment and the theme of your shop. You want to create a local directory first and step into it. Using the following commands:

Build a directory: mkdir [your theme-name]

Go to the directory: cd [your-theme-name]

If you are in the directory, execute the following command to construct a config file based on the theme ID and your credential:

Get –password=your-api-password-store=your-store.myshopify.com-themeid=your-theme-id

How to create a new theme

How to create a theme from scratch

If you want to create a theme from scratch, you can do this by running the following command line:

Theme new –password=your-password –store=your-store.myshopify.com –name=”New Blank Theme”

How to configure the existing theme

You need the theme ID number to link to an existing theme. The best way to get the theme ID number is to press Edit HTML/CSS in the Theme Editor and copy the theme ID number from the URL—the last few digits after mystore.myshopify.com/admin/themes/

Pushing Updates to Theme

Now that a link to the Shopify theme has been created, you can run the following command in your theme directory:

theme watch

This will instruct Theme Kit to log any changes you make locally and push them to the theme. Type Ctrl + C to disable this.

Conclusion

This blog is exactly what you need to set up a Shopify theme locally. Follow the guide, and you can more accurately monitor your version control code, collaborate with a team of developers, use your preferred text editor, set up shortcuts, use Shopify parts, and pretty much everything else you can usually do while developing locally.

Waqas Ahmed is a senior PHP & Shopify web developer at ClickySoft’s development team. When not coding or writing for the web he spends his time watching sports & enjoying good food.