Skip to content

Setup

Git setup

  • Login to Bitbucket and open the relevant project
  • Find the clone link
  • Navigate to your projects directory in terminal e.g. cd /Users/your-username/Projects/
  • Run the git clone command e.g. git clone https://your-username@bitbucket.org/troop/local-theme.git
  • If you don't have the Pivot repository already repeat the steps above to grab a copy
  • From your theme root directory run: ln -s ../pivot-framework/ framework
  • Also if the destination framework folder has already been created it will cause an error, you'll need to remove it before creating the symbolic link

Install node modules

  • In terminal run: yarn install
  • If you don't have yarn, can install with homebrew: brew install yarn

Setting up Shopify upload

  • Create a file: config/upload.js
  • Paste this in:
var theme = 'troop-dev-you',
  config = {
    name: 'Local',
    api_key: '',
    password: '',
    theme_id: '',
    shop_name: theme,
    url: theme + '.myshopify.com'
  };

switch (theme) {
  case 'troop-dev-you':
    config.api_key = '';
    config.password = '';
    config.theme_id = '';
    break;
}

global.config = config;
  • Replace troop-dev-you with your .myshopify.com sub-domain, there's two instances.
  • Now go to your private apps page in your dev store https://troop-dev-you.myshopify.com/admin/apps/private
  • Create a new app, name can be whatever you like and can have all access granted with read and write
  • Go back to your upload.js and paste in the apps api_key, and password into config.api_key and config.api_password
  • Go to your theme directory https://troop-dev-you.myshopify.com/admin/themes click the relevant theme and find the id in the url
  • Paste that id into config.theme_id in the upload.js file

Gulp

  • First, copy pivot-framework files into the new workspace: gulp copy-framework

  • Then run the main Gulp command: gulp

    • This will open BrowserSync in a new Chrome tab. If you wish to change browsers modify the browser-sync task locally in gulpfile.js
    • *.scss and *.coffee files will be built when changed, and theme.scss.liquid, theme.js and liquid templates will then upload to Shopify. When the upload is finished, the browser will refresh

If you experience SSL/HTTPS errors in Chrome, do the following:

  • Double-click on /config/localhost.crt inside Finder (macOS) to open 'Keychain Access'
  • Click “Add”. If you only have one keychain, your certificate might be added to your keychain without a prompt. Regardless if you have to accept a prompt or not, a Keychain Access window should show up
  • Now, search for the previously added certificate and double-click on it. A window will open with the certificate details. Expand the 'Trust' section. Change the 'When using this certificate:' select box to 'Always Trust'
  • When exiting, be sure to enter your password to authenticate the change

Tip

if you wish to manually refresh the browser but still use the build and upload tools, run: gulp watch-and-upload

Setting up text editor

Add the below to your *.code-workspace. If you use Sublime (instead of VS Code) change this file to *.sublime-project.

{
  "folders": [
    {
      "file_exclude_patterns": [
        "*.code-workspace",
        "plugins.js",
        "theme.js",
        "theme.scss.liquid",
        "npm-debug.log",
        "src/theme/assets/theme.min.js",
        "src/theme/config/settings_schema.json",
        "src/scripts/_framework*",
        "src/styles/_framework*",
        "src/theme/snippets/framework*",
        "src/theme/sections/framework*"
      ],
      "folder_exclude_patterns": [
        "node_modules",
        "bower_components",
        ".sass-cache"
      ],
      "path": "/Users/your-username/Projects/local-theme/"
    }
  ]
}

Replace the "path" with your relevant directory.