Local Setup

Theme Development, Github & Local Setup

1. Prerequisites:

  1. Shopify Cli:

    • Installation Guide : (https://shopify.dev/themes/tools/cli/installation)
    • Gettings started : (https://shopify.dev/themes/tools/cli/getting-started)
    • Core Commands: (https://shopify.dev/themes/tools/cli/core-commands)
    • Theme Commands (Optional) : (https://shopify.dev/themes/tools/cli/theme-commands)
  2. Collaborator Access: (https://shopify.dev/themes/tools/collaborator-accounts)

2. Git + Shopify Setup:

  1. Create an empty git repository.
  2. Clone the same repository on your local machine.
  3. Setup the Shopify store with a theme of your choice.
  4. Connect to store from terminal using Shopify CLI from your local git repository with the command:
    shopify login --store example.myshopify.com
  5. Pull theme from your store using the command:
    shopify theme pull
  6. Push the same code to the GitHub base branch: master
  7. Clone same repository with name staging and push to the same repository.
  8. Go to your development store => themes => Them Librabry => Add theme
  9. Select -> Connect to Github Account
  10. Select your repository and base branch name master. Publish your master theme and rename the theme id to Store name | Live
  11. Again follow steps 8 and 9 and now select branch staging and rename that theme id to Store name | Staging
    **Note: This theme id will remain unpublished.

3. Starting Local Development Server + GIT (Pull Request and merge):

  1. Local Setup
    1. Always clone branch from staging branch
      shopify login --store example.myshopify.com
    2. Connect to store using command
      shopify theme serve
    3. Start local development server using command
    4. You will get the link for both theme editor and link for development theme.
    5. If you make any changes in the theme editor and you want to merge those changes as well use the command shopify theme pull and select your local theme id.
  2. GIT (Pull Request and merge):
    1. Always make Make PR for staging branch so that your changes will be synced with theme id to “Store name | Staging ”
    2. To make final changes live, staging branch should be merged to base branch which is master so that all the changes are synced with “Store name | Live ”

      **Note: Only after development is done.
  3. For QA
    1. In development store always duplicate “Store name | Staging ” and rename it to “Store name | QA ”
    2. Once QA is done delete the theme id and follow step 1 for newer QA tests.