Format Theme (Prettier)

To improve performance, we’ve disabled the Prettier formatting step in our conversion process. This makes development faster, so you can iterate more quickly on your projects.

However, if you still want your code to be automatically formatted, you can use this GitHub Action. It sets up a workflow that runs Prettier every time you push changes to your live theme.

Here is a step-by-step guide on how to use it.

Installing in GitHub

1

Go to GitHub and open the repository where you want to add this workflow.

2

Create a file named package.json in your project’s root folder.

This file sets up the Prettier Liquid plugin. Copy the following JSON into your package.json file:

{
  "devDependencies": {
    "prettier": "^3.0.0",
    "@shopify/prettier-plugin-liquid": "^1.x.x"
  }
}

3

Create another file named .prettierrc

Copy this JSON code into your file:

{
  "plugins": ["@shopify/prettier-plugin-liquid"],
  "printWidth": 120,
  "tabWidth": 2,
  "singleQuote": false
}

4

Create another file named .prettierignore

This code tells Prettier which files or folders to ignore. In this example, we’re ignoring the .github and assets folders — but you can adjust it to fit your needs. Fewer files mean faster formatting. Copy the following JSON into your file:

node_modules
.github
assets

5

Create another file named package-lock.json

{
  "name": "starter-template-2-0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "devDependencies": {
        "@shopify/prettier-plugin-liquid": "^1.x.x",
        "prettier": "^3.0.0"
      }
    },
    "node_modules/@shopify/liquid-html-parser": {
      "version": "2.8.2",
      "resolved": "https://registry.npmjs.org/@shopify/liquid-html-parser/-/liquid-html-parser-2.8.2.tgz",
      "integrity": "sha512-g8DRcz4wUj4Ttxm+rK1qPuvIV2/ZqlyGRcVytVMbUkrr/+eVL2yQI/jRGDMeOamkRqB3InuoOjF7nARH+o9UYQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "line-column": "^1.0.2",
        "ohm-js": "^16.3.0"
      }
    },
    "node_modules/@shopify/prettier-plugin-liquid": {
      "version": "1.9.3",
      "resolved": "https://registry.npmjs.org/@shopify/prettier-plugin-liquid/-/prettier-plugin-liquid-1.9.3.tgz",
      "integrity": "sha512-XRRnwfONrzjW8AY/l39szH9OgCCg5Xx61QxxdrC3BT2RAqo229jomjhCEszGIUJ5YZYq1ewdyBwbvUVTUSTcTg==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@shopify/liquid-html-parser": "^2.8.2",
        "html-styles": "^1.0.0"
      },
      "peerDependencies": {
        "prettier": "^2.0.0 || ^3.0.0"
      }
    },
    "node_modules/html-styles": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/html-styles/-/html-styles-1.0.0.tgz",
      "integrity": "sha512-cDl5dcj73oI4Hy0DSUNh54CAwslNLJRCCoO+RNkVo+sBrjA/0+7E/xzvj3zH/GxbbBLGJhE0hBe1eg+0FINC6w==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/isarray": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
      "integrity": "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/isobject": {
      "version": "2.1.0",
      "resolved": "https://registry.npmjs.org/isobject/-/isobject-2.1.0.tgz",
      "integrity": "sha512-+OUdGJlgjOBZDfxnDjYYG6zp487z0JGNQq3cYQYg5f5hKR+syHMsaztzGeml/4kGG55CSpKSpWTY+jYGgsHLgA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "isarray": "1.0.0"
      },
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/line-column": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/line-column/-/line-column-1.0.2.tgz",
      "integrity": "sha512-Ktrjk5noGYlHsVnYWh62FLVs4hTb8A3e+vucNZMgPeAOITdshMSgv4cCZQeRDjm7+goqmo6+liZwTXo+U3sVww==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "isarray": "^1.0.0",
        "isobject": "^2.0.0"
      }
    },
    "node_modules/ohm-js": {
      "version": "16.6.0",
      "resolved": "https://registry.npmjs.org/ohm-js/-/ohm-js-16.6.0.tgz",
      "integrity": "sha512-X9P4koSGa7swgVQ0gt71UCYtkAQGOjciJPJAz74kDxWt8nXbH5HrDOQG6qBDH7SR40ktNv4x61BwpTDE9q4lRA==",
      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.12.1"
      }
    },
    "node_modules/prettier": {
      "version": "3.6.2",
      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
      "dev": true,
      "license": "MIT",
      "bin": {
        "prettier": "bin/prettier.cjs"
      },
      "engines": {
        "node": ">=14"
      },
      "funding": {
        "url": "https://github.com/prettier/prettier?sponsor=1"
      }
    }
  }
}

6

Now, go to the “Actions” tab in your repository. Click “New workflow” and choose “Simple workflow.”

7

Now copy the code below into the newly created workflow file.

name: Prettier Liquid

on:
  pull_request:
    branches:
      - main
  push:
    branches:
      - main

jobs:
  prettier:
    runs-on: ubuntu-latest
    permissions:
      contents: write

    steps:
      - name: Checkout code
        uses: actions/checkout@v4
        with:
          fetch-depth: 0
          ref: ${{ github.event.pull_request.head.ref || github.ref }}
          token: ${{ secrets.GITHUB_TOKEN }}

      - name: Set Git user
        run: |
          git config user.name 'github-actions[bot]'
          git config user.email 'github-actions[bot]@users.noreply.github.com'

      - name: Setup Node.js
        uses: actions/setup-node@v4
        with:
          node-version: "20"
          cache: 'npm'

      - name: Install dependencies
        run: npm install

      - name: Prettify Liquid files
        uses: creyD/[email protected]
        with:
          prettier_options: --write .

      - name: Commit and Push changes
        run: |
          if ! git diff --exit-code; then
            git add .
            git commit -m "Prettify code (automated)"

            if [[ "${{ github.event_name }}" == "pull_request" ]]; then
              TARGET_BRANCH="${{ github.event.pull_request.head.ref }}"
              echo "Pushing formatted code back to PR branch: $TARGET_BRANCH"
            elif [[ "${{ github.event_name }}" == "push" && "${{ github.ref }}" == "refs/heads/main" ]]; then
              TARGET_BRANCH="main"
              echo "Pushing formatted code to main branch..."
            else
              echo "Changes detected, but not pushing automatically for this event type or branch."
              exit 0
            fi

            git push origin HEAD:$TARGET_BRANCH
          else
            echo "No formatting changes detected. Nothing to commit."
          fi

8

The setup is complete! On your next push to the main branch, Prettier will automatically format your code.

Congrats 🎉 🎉