Shopify Liquid Development: Beyond Basics

The Template vs. Section Dilemma

Most Shopify developers start by creating templates—product-template.liquid, page-template.liquid. But Shopify 2.0's section system changes everything.

Templates should be minimal. Sections should be reusable. When you build functionality into sections, merchants can drag-and-drop to customize. When you build into templates, you lock them in.

Section Architecture Best Practices

Every section needs a schema. The schema defines what merchants can customize—colors, images, text content, layout. Don't hardcode values. Let the Shopify admin control them.

Use presets for common configurations. A "Featured Product" section might have presets for "Horizontal Layout" and "Vertical Layout". This gives merchants pre-built starting points they can tweak.

Metafields: The Game Changer

Metafields allow you to attach custom data to products, collections, variants, and more. Want a custom product specification table? Metafields. Want additional product images beyond the standard 250? Metafields.

The mistake most developers make: not structuring metafields. They create dozens of disparate fields. The right approach: namespaces and keys organized by functionality.

JavaScript in Shopify: The Right Way

Don't embed JavaScript in your templates. Create separate .js files. Shopify automatically minifies and caches them. Better performance, easier debugging.

Use Shopify's event listeners: shopify:section:load, shopify:section:unload, shopify:section:select, shopify:section:deselect. These fire when merchants interact with the theme editor—your JavaScript should respond appropriately.

Performance Optimization in Liquid

Avoid Excessive API Calls

Don't loop through collections on every page. Use {percent render } with params to avoid redundant processing.

Lazy Load Sections

Use defer loading or JavaScript to load sections below the fold only when needed.

Optimize Images

Use img_url with size parameters. Don't load full-size images when you only need thumbnails.

Cache Expensive Computations

Use assign to store computed values. Reuse them instead of recomputing.

Theme App Extensions

Shopify's Theme App Extensions allow you to embed app functionality directly into themes without touching theme code. Better for updates, better for merchants who want to switch themes later.

If you're building custom functionality, consider making it a theme app extension instead of hardcoding it. It's more work initially, but pays dividends in maintainability.

Testing Shopify Code

Use Theme Kit or Shopify CLI for local development. Don't edit code directly in the browser. Version control your theme with Git.

Test on multiple devices and browsers. Shopify's mobile checkout behaves differently than desktop. Test on real devices, not just browser devtools.