{"id":1,"date":"2019-04-26T20:10:41","date_gmt":"2019-04-26T20:10:41","guid":{"rendered":"https:\/\/emersoncode.com\/blog\/?p=1"},"modified":"2019-08-07T19:53:43","modified_gmt":"2019-08-07T19:53:43","slug":"migrate-an-existing-shopify-theme-to-a-slate-theme","status":"publish","type":"post","link":"https:\/\/emersoncode.com\/blog\/migrate-an-existing-shopify-theme-to-a-slate-theme\/","title":{"rendered":"Migrate An Existing Shopify Theme to a Slate Theme"},"content":{"rendered":"\n

Slate is a great tool for faster and more efficient Shopify theme development. 
However, if you want to bring a premium or existing Shopify theme to Slate, it requires a bit of extra work as the folder structure for Slate differs from the folder structure in the compiled Shopify theme.
<\/p>\n\n\n\n

Here is a guide for getting started with Slate theme development when you already have a pre-existing theme to work with, whether the theme was built from scratch or is from Shopify\u2019s theme store.  <\/p>\n\n\n\n

0: Assumptions<\/h4>\n\n\n\n
  1. You are using Mac OS X.<\/li>
  2. You are somewhat familiar with the Terminal and basic commands.<\/li>
  3. You will be using Slate v0.14 as at the time of writing this Slate 1.0.0 doesn\u2019t have the \u2019slate migrate\u2019 command. <\/li><\/ol>\n\n\n\n

    1: Requirements
    <\/h4>\n\n\n\n

    First things first, you must install:\n
    <\/p>\n\n\n\n

    1. NodeJS: Install it here<\/a>.<\/li>
    2. NPM: Install it here<\/a>.
      1. You can alternatively use Yarn, but for this guide I’ll stick to NPM.<\/li><\/ol><\/li><\/ol>\n\n\n\n

        2: Download your existing Shopify theme
        <\/h4>\n\n\n\n

        Once we have our pre-requisites installed, we now need to download the Shopify theme we want to use with Slate. <\/p>\n\n\n\n

        From your Shopify dashboard, navigate to Online Store > Themes. Find the theme you want and under actions select \u2018Download theme file.\u2019 <\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        The theme file will be sent to your Shopify account\u2019s email, where you can download and unzip it. <\/p>\n\n\n\n

        While you\u2019re there – You\u2019ll want to grab the Shopify theme ID for that theme as well. I typically go to Actions > Edit Code and you can easily see the theme ID in the URL of the Shopify Theme Editor page. Write this down for later.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        3: Get Shopify App API Token<\/h4>\n\n\n\n

        Next, we need to get API keys for our Shopify account so Slate can connect to our store and manage our theme\u2019s files.  <\/p>\n\n\n\n

        From the Shopify dashboard, let\u2019s go to Apps > Manage private apps.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        Create a new private app, name it whatever you\u2019d like, and under \u201cAdmin API\u201d, select \u201cRead and write\u201d option for the \u201cTheme templates and theme assets\u201d field.  <\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        After your new private app is created, you’ll be presented with some API keys. The only key you need is the password field. Show it and copy the API password for later.<\/p>\n\n\n\n

        \"\"<\/figure>\n\n\n\n

        4: Create a config.yml file within your Shopify theme folder root directory<\/h4>\n\n\n\n

        Open Terminal and cd into your Shopify theme folder. Once you’re within the main theme folder, create and open a file called config.yml<\/p>\n\n\n\n

        nano config.yml<\/code><\/pre>\n\n\n\n
        You’ll want to insert the following into the file, using your own password, theme_id, and store url data.<\/p>\n\n\n\n
        production:\n  password: b307811e1785b9fc811833e1a4fca991\n  theme_id: \"30872729910\"\n  store: production.myshopify.com\ndevelopment:\n  password: b307811e1785b9fc811833e1a4fca991\n  theme_id: \"30872729910\"\n  store: example.myshopify.com\n  ignore_files: config\/settings_data.json<\/code><\/pre>\n\n\n\n
        Now press, control-x for the exit command, making sure to press ‘Y’, followed by enter\/return to save.<\/p>\n\n\n\n
        5: Initialize NPM<\/h4>\n\n\n\n
        npm init<\/code><\/pre>\n\n\n\n
         Follow the prompts, and a new file will be generated in the root of your Shopify theme folder called package.json. You’ll want to open the package.json file with the text editor of your choice or with Terminal. (nano package.json)<\/p>\n\n\n\n
        \"scripts\": {\n    \"watch\": \"slate watch\",\n    \"start\": \"slate start --env development\",\n    \"deploy\": \"slate deploy --env development\",\n    \"build\": \"slate build\"\n}<\/code><\/pre>\n\n\n\n
        6:  Install Slate<\/h4>\n\n\n\n
        Within the root directory of your Shopify theme, run the following command in Terminal:<\/p>\n\n\n\n
        npm install @shopify\/slate@0.14.0 <\/code><\/pre>\n\n\n\n
        7:  Run Slate’s migration command<\/h4>\n\n\n\n
        \n\nWithin the root directory of your Shopify theme, run the following command in Terminal:<\/p>\n\n\n\n
        slate migrate<\/code><\/pre>\n\n\n\n
        Proceed through the prompts until the migration is finished.<\/p>\n\n\n\n
        8:  Turn Slate on and start developing<\/h4>\n\n\n\n
        Within the root directory of your Shopify theme, run the following command in Terminal:<\/p>\n\n\n\n
        npm run start<\/code><\/pre>\n\n\n\n
        If everything went right, you have now successfully converted your existing Shopify theme into a Slate theme which will allow you much faster development. <\/p>\n","protected":false},"excerpt":{"rendered":"
        Slate is a great tool for faster and more efficient Shopify theme development.  However, if you want to bring a premium or existing Shopify theme to Slate, it requires a bit of extra work as the folder structure for Slate differs from the folder structure in the compiled Shopify theme. Here is a guide for […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3,2],"tags":[],"_links":{"self":[{"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/posts\/1"}],"collection":[{"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/comments?post=1"}],"version-history":[{"count":28,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions"}],"predecessor-version":[{"id":50,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/posts\/1\/revisions\/50"}],"wp:attachment":[{"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/media?parent=1"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/categories?post=1"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/emersoncode.com\/blog\/wp-json\/wp\/v2\/tags?post=1"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}