Shopify Local Development - How to Develop Locally with Shopify (2024)

Shopify development is usually done in the online Shopify Theme editor. The online editor is a good starting point, but local Shopify development is often the preferred choice when working on themes regularly.

Offline Shopify Development Options

The online editor is convenient because you don’t have to install anything on your device. You can access the Theme editor from the main “Shopify Admin” menu, and it allows you quick tweaks to your theme you can deploy immediately.

Local Shopify development lets you use all of your preferred development tools and interact with the Shopify platform on a more efficient & professional level.

To set up a local environment, you will need the Shopify Theme Kit.

The Theme Kit is a cross-platform tool that works for older themes on Windows, Linux, and macOS. Theme Kit allows you to use workflow tools like Git, use your preferred text editor, and work on your theme with a team.

For 2.0 stores, there is a new tool that can be used as well called Shopify CLI which is a better option for 2.0 stores.

Shopify Local Development - How to Develop Locally with Shopify (1)Shopify Development Done Locally: What You Need

Before you can develop Shopify themes locally, there are a few prerequisites to take care of. Here are the steps you need to take before you can start working on your local Shopify development.

1. For Local Shopify Development, You Will Need to Install the Shopify Theme Kit

The Shopify Theme kit is the official command line created by Shopify. It can be used on machines running Windows, Linux, or macOS, and the setup is straightforward.

Automatic installation options include the following:

  • For macOS and Linux, there’s the option to install it with a simple script from the terminal. The script you will need is:

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python

  • For macOS with Homebrew you’ll need the following script is what you need:

brew tap shopify/shopify

brew install themekit

  • For Windows with Chocolatey, you’ll need this script:

choco install themekit

Manual installation options include the following:

  • For Linux and macOS, you will need to find the Theme Kit binary specifically for the system you use, and download it. You can find all available versions on the Shopify Github.
    • After that, you will run the md5 theme to compare checksums.
    • Then, with the binary on the path, preferably /usr/local/bin
    • Finally, test if it’s working by running theme version
  • For Windows, you will start by creating a new folder in C:\Program Files and name it Theme Kit
    • After that, download the Theme Kit, extract it, and copy it to that folder
    • Add C:\Program Files\Theme Kit to your PATH environment
    • Test whether the installation was successful by running theme in cmd.exe

Important Note: If you have any older versions of Theme Kit installed, uninstall the gem from previous versions first. You can do that with gem uninstall shopify-theme command. After that, you can update Theme Kit with theme update –version=[version number]. You can find the latest versions on Github.

2. Taking Care of API Credentials

The second step to enable local Shopify development involves connecting the local theme to your Shopify store. For that, you need API credentials: a key, password, and theme ID.

You can now generate the store password via the Shopify app Theme Kit Access, the following steps you would need to take are:

Log in to your Store and Shopify Admin
Install the Theme Kit Access app (https://apps.shopify.com/theme-kit-access)
Open the app and click Create password

Shopify Local Development - How to Develop Locally with Shopify (2)

Fill in the information and click Create password

Shopify Local Development - How to Develop Locally with Shopify (3)

You will receive an email shorty that will provide you with a single use link

Shopify Local Development - How to Develop Locally with Shopify (4)

Click Show password and then copy. Keep that password safe until you add it to the theme get command – as once you close that link the password cannot be retrieved again.

Shopify CLI is the other option and once installed using the Shopify CLI installation instructions you can connect and manage themes relatively easily.

The benefits of Shopify CLI is that you don’t need to worry about managing potentially vulnerable api keys (accidently exposing them via a public repository or via email/messaging apps) and that you gain access to some very useful commands like shopify share which will generate a preview link and shopify check that will verify the liquid code and return any errors. These can all be incorporated into your personal buildpacks.

If you hop between stores a lot, have a collaborator account on a store, or not accessing the store via your dashboard then Theme Kit might be a quicker option for you. Shopify CLI does allow you to switch between stores with the Shopify switch command, however some stores that are used via a collaborator account will be required to log into the store directly using the Shopify logout and Shopify login commands.

3. Finding the Theme ID

Every Shopify Theme has its own ID number, and you need this number every time you want to connect an already existing theme to Shopify Theme Kit.

  • The simplest way to get this number is to find it via the Theme Editor:
    • Go to your store, navigate to “Themes.”
    • Choose the theme you want the ID from, click the button with 3 dots on the top right, and choose “Edit HTML/CSS” from the drop-down menu.
    • The theme number will appear in the URL: https://your_store.myshopify.com/admin/themes/numberswillbehere.
  • You can also run a command in the Theme Kit that will list all the themes associated with the store, as well as their IDs:

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

4. Downloading the Theme for Local Development

Now that you have everything you need to start local Shopify development, you will need to create a config.yml file. This file is the main connection between the local environment and your store’s theme.

First you want to create a local directory and step into it. Use these commands:

  • Create a directory: mkdir [your-theme-name]
  • Step into the directory: cd [your-theme-name]

Once you’re in the directory, run the following command to create a config file based on the theme ID and your credentials:

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

5. Creating a New Theme

If you want a completely new theme, you can create it in the directory of your choice. Note that the command you use for it will also upload a copy of the new theme to your store (you’ll find it under the name you specify) and link the store theme and local directory theme via config.yml.

This is the command you need:

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

6. Pushing Updates to Your Theme

Finally, you want all changes you do in the local Shopify development environment to automatically be reflected on the theme in your Shopify store. To do that, navigate to your theme directory in the Theme Kit and run the command theme watch.

This will instruct Theme Kit to register any changes you make locally and push them to the theme. To disable this, type ctrl + c.

Things to Consider When Choosing the Shopify Theme Kit

The Shopify Theme Kit is not a fully local Shopify development platform; you still need to connect to Shopify servers when you compile and render Liquid. Yet, the Theme Kit is the best option to get as close to local development as possible.

If you want a fully offline Shopify development option, it’s best to look at Motifmate.com, which provides a true offline environment. Be aware, however, that Motifmate is not maintained by Shopify, which could result in bugs and errors in your theme.

Need Help?

Need help with custom Shopify theme development? Contact our experts today –we are one of the highest rated Shopify experts in the world.

Tags:

Local Shopify Developmentshopify development

Shopify Local Development - How to Develop Locally with Shopify (2024)

FAQs

How do I set up a Shopify development environment? ›

  1. Step 1: Install Theme Kit. If you're using OSX or Linux, run this command in Terminal: $ curl https://raw.githubusercontent.com/Shopify/themekit/master/scripts/install | python. ...
  2. Step 2: Set up API Access. To authorize Theme Kit with your Shopify store, you'll need to create a Private App. ...
  3. Step 3: Set up Your config. yml.
Nov 15, 2016

How does Shopify development work? ›

A development store is a free Shopify account that comes with a few limitations. You can use a development store to test any themes or apps that you create, or to set up a Shopify account for a client. Setting up a development store and transferring it to a client gives you a recurring commission.

How do I add a dynamic source in Shopify? ›

Click + Add block, and then connect a dynamic source:
  1. If the connect dynamic source icon is displayed, then click to select a single metafield:
  2. If the connect dynamic source icon displays a +, then click to select up to 20 metafields by adding them one at a time:

What is CLI in Shopify? ›

Shopify CLI is a command-line interface tool that helps you build Shopify apps and themes. It quickly generates Shopify apps, themes, and custom storefronts. You can also use it to automate many common development tasks.

Can you develop Shopify locally? ›

Shopify development is usually done in the online Shopify Theme editor. The online editor is a good starting point, but local Shopify development is often the preferred choice when working on themes regularly.

How do I run my Shopify store locally? ›

To install Shopify locally, we use Themekit.
  1. type brew tap shopify/shopify & hit enter.
  2. type brew install themekit & hit enter.
  3. create a development store in Shopify. ...
  4. wherever you store your local projects, create a new directory to store the files we are getting from shopify.
Feb 5, 2018

How much does it cost to hire a Shopify developer? ›

The median rate of Shopify developers on Upwork is $15/hour to $29/hour. Many of the developers also charge a fixed rate depending on the project. The average rate of hiring a Shopify developer for your store may range from $500 to $25,000, depending on the customization required.

How much does Shopify charge developers? ›

Beginner: $15 per hour. Intermediate: $33 per hour. Expert: $95 per hour.

Do I need a Shopify developer? ›

To build a truly unique and functional store, you must hire Shopify developers. However, while Shopify is a user-friendly platform and you can experiment with all of the readily available themes and apps, it may take you some time to build a site that is capable of attracting and engaging buyers.

What is a dynamic source in Shopify? ›

Dynamic sources link the data stored as a metafield to section input settings, which allows merchants to add metafields to pages straight from the theme editor. Once a metafield is created for a specific resource on the Shopify admin, you can access it as a dynamic source from the theme editor.

What does dynamic source mean on Shopify? ›

Metafields and Dynamic sources are Shopify features that allow you to store and display unique content for products, collections, blogs, and pages. These features are perfect for displaying specific product information — such as size guides or part numbers — for different products that use the same template.

How many subdomains can you have on Shopify? ›

You can add up to 20 domains or subdomains to your Shopify store, in addition to your . myshopify.com domain name. If your store is on the Shopify Plus plan, then you can add up to 1,000 domains or subdomains.

Is CLI better than GUI? ›

Higher precision of work can be obtained using CLI. GUI offers a lower level of precision. It works at a higher speed as compared to the GUI. It works at a much slower speed as compared to the CLI.

What are three different types of CLI? ›

Types of CLI commands include the following:
  • system commands that are encoded as part of the operating system interface;
  • executable programs that, when successfully invoked, run text-based or graphical applications; and.
  • batch programs (or batch files or shell scripts) which are text files listing a sequence of commands.

Why is CLI still used? ›

However, CLI is still used by software developers and system administrators to configure computers, install software, and access features that are not available in the graphical interface.

Can you self host a Shopify on your own server? ›

Shopify is a hosted platform, which means you can't download and install it on your own server. You'll need to sign up for a Shopify plan to use the platform.

How much does the average Shopify owner make? ›

Research has shown that an average Shopify merchant in the United States makes about $72 of profit from each customer–high-earning merchants on Shopify earn about $149 on a per-client basis, while low-earning merchants make a profit of about $44 per-client.

Can someone run my Shopify store? ›

Yes. However, collaborators must log in to your store at least once through the Stores page in their Partner Dashboard before they can log in using the Shopify app.

How does local pick up work on Shopify? ›

You can set up the option for customers to pick up their online orders at your retail store, curbside, or any location that you choose. To do this, enable the local pickup option for each location where customers can go to get their orders. The shipping rate for local pickup is set to Free and can't be changed.

Is LLC required for Shopify? ›

The short answer is: no. You don't need an LLC to start a Shopify store; however, there are two major benefits of having an LLC that you should consider. The first is personal liability protection and the other is tax reduction–if you're the sole owner of your business, an LLC can provide personal liability protection.

How much does a Shopify developer make per hour? ›

Find out what the average Shopify salary is

The average shopify salary in India is ₹ 500,000 per year or ₹ 200 per hour. Entry-level positions start at ₹ 360,000 per year, while most experienced workers make up to ₹ 1,428,000 per year.

How much does it cost to have 2 Shopify stores? ›

You can create unlimited online stores to sell in different currencies and languages and to make your site accessible for global audiences. Your main store and 9 expansion stores are all part of your monthly platform fee, with an additional cost of $250 USD per month for each extra store.

How do developers make money on Shopify? ›

In order to make money as a Shopify developer, you will need to create high-quality themes and apps that store owners will want to use. You can also create free themes and apps, but you will need to include in-app purchases or other forms of monetization in order to make money.

What percentage does Shopify take from a sale? ›

There are no transaction fees for stores using Shopify Payments. If you choose a third-party payment provider, there will be additional fees of 2%, 1% or 0.5% for our Basic Shopify, Shopify, and Advanced Shopify plans, respectively.

How many apps should a Shopify store have? ›

Whilst every business has different needs and requirements from its apps, 25 is a sensible amount for any comprehensive Shopify store.

Why you should hire a Shopify developer? ›

Shopify developers can do much more than just customize themes or build them from scratch. By leveraging the power of the Shopify APIs, they can also create custom functionality and integrate third-party services into online stores, optimize performance, create custom apps to meet unique business needs, and much more.

What a Shopify developer should know? ›

First and foremost, a Shopify expert worth hiring needs to have in-depth knowledge about PHP, JavaScript, and jQuery. In addition to that, they must also understand and know how to work with Shopify APIs. They must also be familiar with using version control for Shopify theme development.

What should you not do on Shopify? ›

Top 20 Common Mistakes to Avoid While Creating a Shopify Store
  • Thinking If you have an online store, traffic will follow. ...
  • Not knowing who your ideal customer is. ...
  • Not having a solid marketing plan. ...
  • Having improper branding. ...
  • Having non-optimized images. ...
  • Having empty about us & contact us page. ...
  • Keeping SEO options as default.

Do I have to report my Shopify income? ›

Whether or not you get a Form 1099-K from Shopify, you'll likely still have to report your earnings to the IRS.

What is a meta field in Shopify? ›

Metafields enable you to customize the functionality and appearance of your Shopify store by letting you save specialized information that isn't usually captured in the Shopify admin. You can use Metafields for internal tracking, or to display specialized information on your online store in a variety of ways.

What is direct source in Shopify? ›

'Direct' traffic is when the source is unknown. But for Shopify's report this means where the source of the last session is unknown – the user most probably visited a search ad or product review previously.

Is it possible to create subcategories on Shopify? ›

Shopify does not impose any restrictions on adding or creating sub-categories. So you can create anything in any way you want, depending on the quality of the product and how your website is designed. You can also choose to add sub-categories manually or add them according to specific criteria.

What are the two types of collections possible with Shopify? ›

You can create two types of collections:
  • An automated collection uses selection conditions to automatically include matching products. You can add up to 60 selection conditions. ...
  • A manual collection includes only the products that you choose individually.

What is schema setting in Shopify? ›

Sections support the section-specific Liquid tag {% schema %} . This tag allows you to define various attributes of a section, such as the section name, any section blocks, and settings to allow for theme editor customization options.

How do I change my schema on Shopify? ›

You can create settings in the following places:
  1. config > settings_schema. json.
  2. Section files in the sections folder, using the the section's {% schema %} tag.

Do subdomains cost extra money? ›

Because subdomains are regarded as separate websites by Google, they also need to be hosted on separate hosting plans. This means that you will need to pay a separate hosting fee for each subdomain.

How much does a domain cost on Shopify? ›

You can buy a Shopify domain name for $14.95/year, and Shopify will take care of the rest. If you're unsure of what domain name to choose, consider using a branded subdomain. A branded subdomain is a domain name connected to your shop but that doesn't include the . shop extension.

What is the difference between Domains and subdomains? ›

Regular domains are your standard URLs like splashthat.com or splashthat. events. Subdomains are a unique URL that lives on your purchased domain as an extension in front of your regular domain like support.splashthat.com or blockparty.splashthat.com.

Why do people prefer GUI over CLI? ›

GUIs offer better multitasking and control

Being more user-friendly than a command line (especially for new or novice users), a visual file system is utilized by more people. GUI users have windows that enable a user to view, control, manipulate, and toggle through multiple programs and folders at same time.

Is Python CLI or GUI? ›

Most Python codes are written as scripts and command-line interfaces (CLI).

Why is CLI difficult to use? ›

CLI - Due to a higher degree of memorization and familiarity needed for operation and navigation, new users find operating a command line interface more difficult than a GUI. GUI - Because a GUI is visually intuitive, users learn how to use a GUI faster than a CLI.

What is the difference between API and CLI? ›

Differences between CLI and API :

A CLI is the text-driven command line used to access the operating system. API helps the programmers with an efficient way to develop their software programs and to make program easier and simpler.

What are two differences between a GUI and a CLI? ›

The notable difference is that GUI users depend on graphical elements such as icons, menus, and windows to interact with the operating system. CLI relies more on text inputs to perform the operating system functions. GUI stands out being a user-friendly option, while CLI is more powerful and advanced.

What is the difference between CLI and shell? ›

A shell is a user interface for access to an operating system's services. Most often the user interacts with the shell using a command-line interface (CLI). The terminal is a program that opens a graphical window and lets you interact with the shell.

What are the disadvantages of CLI? ›

Disadvantages Command Line Interface (CLI):

For someone who has never used a CLI, it can be very confusing. Commands have to be typed precisely. If there is a spelling mistake then the command will not respond or fail. If user can mis-type an instruction, it is often necessary to start from scratch again.

How long does it take to learn command line? ›

Of course, there are more advanced topics that will take longer to master, but understanding the syntax and how it works should only take a few weeks. For example, Codecademy's Learn the Command Line takes eight hours to complete.

Is CLI and CMD the same? ›

It's much like Windows Explorer or Finder on the Mac, but without the graphical interface. Other names for the command line are: cmd, CLI, prompt, console or terminal.

How do you set up a development environment? ›

Android development environment
  1. Install Android Studio. Download and install Android Studio. ...
  2. Install the Android SDK. Android Studio installs the latest Android SDK by default. ...
  3. Configure the ANDROID_HOME environment variable. ...
  4. Add platform-tools to Path.
3 days ago

How do I set up my dev environment? ›

Dev Environments is available as part of Docker Desktop 3.5. 0 release. Download and install Docker Desktop 3.5.
...
Download and install Docker Desktop 3.5. 0 or higher:
  1. Git. Make sure add Git to your PATH if you're a Windows user.
  2. Visual Studio Code.
  3. Visual Studio Code Remote Containers Extension.

How do I setup my local dev environment? ›

A local development environment allows you to use your own machine to run your website, instead of using one provided by a web hosting (opens in new tab) company.
...
  1. Install Homebrew. ...
  2. Install PHP. ...
  3. Install Composer. ...
  4. Move to your PATH. ...
  5. Check your PATH. ...
  6. Require Valet globally. ...
  7. Install Valet. ...
  8. Park/unpark directories.
Jul 25, 2019

How do I create a Salesforce development environment? ›

Authorize Your Dev Hub
  1. In Visual Studio Code, press Command + Shift + P on macOS or Ctrl + Shift + P on Windows or Linux.
  2. Type sfdx.
  3. Select SFDX: Authorize a Dev Hub.
  4. Log in using your Dev Hub org credentials.
  5. Click Allow.
  6. After you authenticate in the browser, the CLI remembers your Dev Hub credentials.
Feb 21, 2019

How does a local development server work? ›

The local development server is a command line tool that sets up a test server on your computer, allowing you to see changes to your template before making them "live."

What is local website development? ›

What is Local Web Development? Visitors access your website to browse products, learn about your brand and contact your team. Web development is the process of creating and refining everything that end-users see on your site — from contact forms to images, text, menus, and videos.

Which tools will be required to setup your development environment? ›

To actually do work as a developer, you'll need four main things to set up your integrated development environment: a code editor, command line interface (CLI), version control system, and package manager.

Should I use Docker for local development? ›

Docker is great at setting up a local development environment because it easily adds the running process without duplicating the virtualized resource. Second, it's more modular. Docker makes it easy to run multiple versions or instances of the same program without configuration headaches and port collisions.

Do you need a dev environment? ›

You should use a development environment if you want to make sure not to break anything on your live environments that your users see. By using a development environment for your website, you'll have a place to make all of the changes you want, without the users of your website will notice.

How many environments do I need for software development? ›

We typically have four environments along any software's lifecycle.

What is the difference between Dev and Staging environment? ›

The development server is where you work. You should be the only one working on the machine. Code is constantly in flux and the site may or may not be up, depending on how much coffee you have in. The staging server is where you deploy your work for folks to look at - before it goes to production.

What is the need for local development environment? ›

A local development environment is the source code and infrastructure needed to develop your application, available locally on your laptop or desktop. It's usually one or more checked-out Git repositories combined with the means to run your application.

How do I land my first dev job? ›

Table of Contents
  1. Build a Portfolio Site.
  2. Do Freelance Projects.
  3. Put Your Code on GitHub.
  4. Contribute to an Open Source Project.
  5. Participate in a Hackathon.
  6. Network with Other Web Developers.
  7. Follow Industry News.
  8. Learn New, Relevant Skills.

Which language is used in Salesforce development? ›

To start coding in Salesforce using its programming language Apex (custom code) and Visualforce (user interface) you should start with Java. Java is a programming language that is widely used over multiple platforms and operating systems including Windows, Linux and Mac OS.

What IDE do Salesforce developers use? ›

“Our strategy is to have one set of IDE extensions that customers can access from either [Microsoft Visual Studio Code] or Code Builder,” Shrivastava continued.

Is Salesforce free for developers? ›

A Salesforce Developer Environment gives you access to have a full-featured copy of Force.com, for free, that you can use indefinitely. Use the Developer Organization to keep up with the newest features, build your own apps, and test functionalities before you purchase them.

Top Articles
Latest Posts
Article information

Author: Kelle Weber

Last Updated:

Views: 5917

Rating: 4.2 / 5 (73 voted)

Reviews: 88% of readers found this page helpful

Author information

Name: Kelle Weber

Birthday: 2000-08-05

Address: 6796 Juan Square, Markfort, MN 58988

Phone: +8215934114615

Job: Hospitality Director

Hobby: tabletop games, Foreign language learning, Leather crafting, Horseback riding, Swimming, Knapping, Handball

Introduction: My name is Kelle Weber, I am a magnificent, enchanting, fair, joyous, light, determined, joyous person who loves writing and wants to share my knowledge and understanding with you.