Theme Kit, automatically upload theme files

 These instructions can be found on the Theme Kit website, but our focus is purely automatic file deployment for our theme. The initial installation for operating systems are different, but after that instructions are the same.

Initial Installation

Mac OS

  1. Open up the command line tool, Terminal found in Applications folder.
  2. Install homebrew. Using the provided link, follow instructions on installation.
  3. Run commands brew tap shopify/shopify and brew install themekit

Windows

  1. Install chocolatey. Using the provided link, follow instructions on installation.
  2. Open up the command line tool, your choice on Windows, PowerShell is popular.
  3. Run command choco install themekit

We are done with initial setup. Now it's time to install Theme Kit private app to your Shopify store.

  1. Go to your Shopify dashboard click Apps in the sidebar.
  2. Click Manage private apps at the bottom of the page.
    Manage private apps link
  3. Click Create new private app.
    Create new private app button
  4. Fill out the app information 
    • Private app name: Themekit
    • App details - Private app name
    • Emergency developer email: use your email
    • Admin API: Click "Show inactive Admin API permissions"
    • Go to Themes and select Read and write
    • Themes - Read and Write permissions
    • Click Save
    • Click Create App
  5. Copy your newly generated API Password
  6. Paste into your text editor of choice to use later
  7. Go to the customize screen on the theme you want to upload your files
  8. In the url, find and save the Theme ID number right before the end of the url. For example, https://yourshopifystore.myshopify.com/admin/themes/108575916200/editor 
  9. Inside your theme, create a config.yml file and add the following contents: 
    • development:
       password: api_password
       theme_id: "108575916200"
       store: yourshopifystore.myshopify.com
       ignores:
       - themekit_ignores.txt
  10. Inside your theme, create themekit_ignores.txt file and add the following contents:
    • # plain file names
      config/settings_data.json
      config.yml
  11. In your command line application, use cd to go to your theme folder destination and use command theme watch
  12. You will have the message "Watching for file changes to theme 108575916200"
  13. Now you can start saving files and they will automatically upload to your Shopify theme

Notes:

The themekit_ignores.txt file ignores files to upload to the theme. We ignore config/settings_data.json because this is where our theme settings from the Shopify customization page are stored and we don't want to overwrite them. We ignore the config.yml file to not upload our Theme Kit settings.

If you run theme watch in a directory that doesn't have a config.yml file you will get an error.

That's it! In the next blog we will start adding components for the Shopify blog.

Joe Pichardo | Shopify Developer

About Joe Pichardo

Joe Pichardo is a Shopify Developer creating themes and apps to help other programmers succeed on the ecommerce platform.

Leave a comment

Please note, comments must be approved before they are published