Shopify Liquid Snippets for Visual Studio Code

A simple but powerful extension to write Liquid in a fast and efficient way.

Features

• {%- liquid -%} support
• Latest Filters
• Latest Schema settings
• Latest Tags
• Predefined Shopify values (Choice lists)

Requirements

• Shopify Liquid

Extensions to be uninstalled

• Liquid
• Liquid Languages Support
• Shopify Liquid Template Snippets

Emmet

Since Liquid is considered HTML, Emmet needs to know that they need to be associated with each other.

1. Open the Command Palette (Shift+Command+P (Mac) / Ctrl+Shift+P (Windows/Linux))
2. Type Open User settings (JSON) and press enter

Add the following

"emmet.includeLanguages": { "liquid": "html" },

Snippets

• Filters

  • Array
  • Cart
  • Collection
  • Color
  • Customer
  • Default
  • Font
  • Format
  • Hosted file
  • HTML
  • Localization
  • Math
  • Media
  • Metafield
  • Money
  • Payment
  • String
  • Tag

• Schema

  • Content
  • Input settings
  • Sidebar settings

• Tags

  • Conditional
  • HTML
  • Iteration
  • Syntax
  • Theme
  • Variable