{"componentChunkName":"component---src-templates-post-tsx","path":"/blog/shopify-themes-local-development-and-version-control/","result":{"data":{"site":{"meta":{"url":"https://danny.codes"}},"avatar":{"childImageSharp":{"fluid":{"aspectRatio":1,"src":"/static/6137cbd05c96f9cdd3741126cb5c8acf/2f9e0/avatar.png","srcSet":"/static/6137cbd05c96f9cdd3741126cb5c8acf/016c3/avatar.png 37w,\n/static/6137cbd05c96f9cdd3741126cb5c8acf/47a78/avatar.png 74w,\n/static/6137cbd05c96f9cdd3741126cb5c8acf/2f9e0/avatar.png 148w,\n/static/6137cbd05c96f9cdd3741126cb5c8acf/cd543/avatar.png 222w,\n/static/6137cbd05c96f9cdd3741126cb5c8acf/62ca7/avatar.png 296w,\n/static/6137cbd05c96f9cdd3741126cb5c8acf/497c6/avatar.png 400w","sizes":"(max-width: 148px) 100vw, 148px"}}},"post":{"fields":{"slug":"shopify-themes-local-development-and-version-control"},"frontmatter":{"date":"March 5, 2020","title":"Shopify Themes: Local Development & Version Control","tags":"Shopify, Liquid, Tutorial","lede":"This is the first in a series of posts for developers getting started building Shopify themes. In this post, we'll review local theme development and git version control.","category":"Tutorials","theme":{"header":"#141f18"},"image":{"alt":"Row of mailboxes","attribution":{"text":"Photo by Marcus Loke on Unsplash","link":"https://unsplash.com/photos/xXJ6utyoSw0"},"full":{"childImageSharp":{"fluid":{"base64":"data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAALABQDASIAAhEBAxEB/8QAFwABAQEBAAAAAAAAAAAAAAAABAADBf/EABUBAQEAAAAAAAAAAAAAAAAAAAEC/9oADAMBAAIQAxAAAAHmOG8c5kV//8QAGhAAAgIDAAAAAAAAAAAAAAAAAAIDMwESMv/aAAgBAQABBQLHSqymkhHa9in/xAAXEQADAQAAAAAAAAAAAAAAAAAAAQIR/9oACAEDAQE/AYnRwf/EABcRAAMBAAAAAAAAAAAAAAAAAAABAhH/2gAIAQIBAT8Bp4Kj/8QAGxAAAgEFAAAAAAAAAAAAAAAAAAEQESFBUXH/2gAIAQEABj8CGrV1C6N5Gf/EABwQAAICAgMAAAAAAAAAAAAAAAABMVEhoUGRwf/aAAgBAQABPyGQ4BrZGx10aIVKqkfbw//aAAwDAQACAAMAAAAQWw//xAAXEQEBAQEAAAAAAAAAAAAAAAABABEh/9oACAEDAQE/EBfYBy//xAAWEQEBAQAAAAAAAAAAAAAAAAABABH/2gAIAQIBAT8QwSIN/8QAHRABAAMAAQUAAAAAAAAAAAAAAQARITFRYZHB8P/aAAgBAQABPxCyAWqARJANqCM6XETnY0hsnj3kMxSF+BGdv0T/2Q==","aspectRatio":1.8079763663220088,"src":"/static/1adab48dde1590d571509ea4d66d9622/4fb49/header.jpg","srcSet":"/static/1adab48dde1590d571509ea4d66d9622/b2c4b/header.jpg 480w,\n/static/1adab48dde1590d571509ea4d66d9622/1789c/header.jpg 960w,\n/static/1adab48dde1590d571509ea4d66d9622/4fb49/header.jpg 1920w,\n/static/1adab48dde1590d571509ea4d66d9622/c762e/header.jpg 2448w","srcWebp":"/static/1adab48dde1590d571509ea4d66d9622/62477/header.webp","srcSetWebp":"/static/1adab48dde1590d571509ea4d66d9622/6d2ae/header.webp 480w,\n/static/1adab48dde1590d571509ea4d66d9622/1dd6e/header.webp 960w,\n/static/1adab48dde1590d571509ea4d66d9622/62477/header.webp 1920w,\n/static/1adab48dde1590d571509ea4d66d9622/3bc5a/header.webp 2448w","sizes":"(max-width: 1920px) 100vw, 1920px"}}}}},"timeToRead":1,"excerpt":"Shopify Theme Series Part 1: Local Development & Version Control Part 2: Automated Deployments with GitHub Actions (coming soon) Environment…","tableOfContents":{"items":[{"url":"#shopify-theme-series","title":"Shopify Theme Series"},{"url":"#environment-setup","title":"Environment Setup"},{"url":"#shopify-theme-cli","title":"Shopify Theme CLI","items":[{"url":"#installation","title":"Installation"}]}]},"body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Shopify Themes: Local Development & Version Control\",\n  \"date\": \"2020-03-05T00:00:00.000Z\",\n  \"category\": \"Tutorials\",\n  \"status\": \"draft\",\n  \"tags\": \"Shopify, Liquid, Tutorial\",\n  \"lede\": \"This is the first in a series of posts for developers getting started building Shopify themes. In this post, we'll review local theme development and git version control.\",\n  \"theme\": {\n    \"header\": \"#141f18\"\n  },\n  \"image\": {\n    \"src\": \"./shopify-themes-local-development-and-version-control/header.jpg\",\n    \"alt\": \"Row of mailboxes\",\n    \"attribution\": {\n      \"text\": \"Photo by Marcus Loke on Unsplash\",\n      \"link\": \"https://unsplash.com/photos/xXJ6utyoSw0\"\n    }\n  }\n};\n\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\n\nvar layoutProps = {\n  _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"h2\", {\n    \"id\": \"shopify-theme-series\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#shopify-theme-series\",\n    \"aria-label\": \"shopify theme series permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Shopify Theme Series\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Part 1: Local Development & Version Control\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Part 2: Automated Deployments with GitHub Actions (coming soon)\")), mdx(\"h2\", {\n    \"id\": \"environment-setup\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#environment-setup\",\n    \"aria-label\": \"environment setup permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Environment Setup\"), mdx(\"p\", null, \"Before we can get started, you'll need a few things in order to follow along:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://github.com\"\n  }), \"GitHub account\"), \" with \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://help.github.com/en/enterprise/2.15/user/articles/adding-a-new-ssh-key-to-your-github-account\"\n  }), \"an SSH key configured\"), \" to store our theme.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://www.shopify.com/partners\"\n  }), \"Shopify Partner Program\"), \" account with access to your desired Store/theme so we can grant API permissions to sync our local work with the remote server.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"One of \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://brew.sh/\"\n  }), \"Homebrew\"), \" or \", mdx(\"a\", _extends({\n    parentName: \"li\"\n  }, {\n    \"href\": \"https://chocolatey.org/\"\n  }), \"Chocolatey\"), \" package managers. If you're a Mac user like myself, Homebrew should be preinstalled and available in Terminal.\")), mdx(\"h2\", {\n    \"id\": \"shopify-theme-cli\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h2\"\n  }, {\n    \"href\": \"#shopify-theme-cli\",\n    \"aria-label\": \"shopify theme cli permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Shopify Theme CLI\"), mdx(\"h3\", {\n    \"id\": \"installation\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", _extends({\n    parentName: \"h3\"\n  }, {\n    \"href\": \"#installation\",\n    \"aria-label\": \"installation permalink\",\n    \"className\": \"anchor before\"\n  }), mdx(\"svg\", _extends({\n    parentName: \"a\"\n  }, {\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }), mdx(\"path\", _extends({\n    parentName: \"svg\"\n  }, {\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  })))), \"Installation\"), mdx(\"p\", null, \"Shopify has a number of tools to support different developer workflows. For theme development, we will need at least the \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://github.com/Shopify/themekit\"\n  }), \"Shopify Theme Kit CLI\"), \" installed and authenticated.\"), mdx(\"p\", null, \"Follow \", mdx(\"a\", _extends({\n    parentName: \"p\"\n  }, {\n    \"href\": \"https://shopify.github.io/themekit/\"\n  }), \"the instructions here\"), \" to install the CLI (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"themekit\"), \") and any supporting libraries (\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"shopify/shopify\"), \").\"), mdx(\"p\", null, \"Once complete, running the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"theme --help\"), \" command should print a message like the following:\"), mdx(\"pre\", null, mdx(\"code\", _extends({\n    parentName: \"pre\"\n  }, {\n    \"className\": \"language-bash\"\n  }), \"$ theme --help\\nTheme Kit is a tool kit for manipulating shopify themes\\n\\nTheme Kit is a fast and cross platform tool that enables you to build shopify themes with ease.\\n\\nComplete documentation is available at https://shopify.github.io/themekit/\\n\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"id":"8835b9e3-4850-580e-81aa-9f18d7c8e902"}}}