How to Fix Prettier Not Working with Liquid Files in Shopify

Shopify Prettier Not Working

How to Auto-Format Liquid Code with the Prettier Plugin

liquid file formatting theme development shopify liquid shopify dev tools Shopify theme development coding productivity Shopify theme prettier config liquid prettier plugin web development prettier plugin prettier prettier not working code formatter Shopify

If you've been struggling to get Prettier to format your .liquid files inside a Shopify theme, you're not alone. As seen in the screenshot below, Prettier doesn't automatically work with Liquid syntax out of the box:

Prettier NOT WORKING in liquid file

Thankfully, Shopify provides an official plugin that enables Liquid file formatting with Prettier. You can read more about it on their documentation:
👉 Shopify Liquid Prettier Plugin


🧩 Step 1: Install the Shopify Prettier Plugin

You can install the plugin using either npm or yarn:

Using npm:

npm install --save-dev prettier @shopify/prettier-plugin-liquid

Using yarn:

yarn add --dev prettier @shopify/prettier-plugin-liquid

Shopify Liquid Prettier Plugin NPM


⚙️ Step 2: Configure Prettier

For Prettier v3 and above, you’ll need to declare the plugin explicitly in a .prettierrc file at the root of your project.

Create a .prettierrc file and add the following configuration:

{
  "plugins": ["@shopify/prettier-plugin-liquid"]
}

Creating prettierrc file and configuration to configure prettier for liquid


✅ Step 3: Save Your File and Let Prettier Do the Work

After adding this configuration, try editing and saving any .liquid file. Prettier should now automatically format your Liquid code.

Prettier in NOW WORKING in liquid file