HTML to Shopify Liquid — Key Replacements
/* HTML → Shopify Liquid replacements */
/* Page title */
<title>My Store</title> →
<title>{{ page_title }} | {{ shop.name }}</title>
/* CSS/JS assets */
href="style.css" → href="{{ 'style.css' | asset_url }}"
/* Product title */
<h1>Product Name</h1> →
<h1>{{ product.title }}</h1>
/* Product image */
src="product.jpg" →
src="{{ product.featured_image | img_url: '800x' }}"
/* Price */
<span>$99</span> →
<span>{{ product.price | money }}</span>
/* Navigation */
{% for link in linklists.main-menu.links %}
<a href="{{ link.url }}">{{ link.title }}</a>
{% endfor %}
Shopify Theme File Structure
your-theme/
├── layout/ ← theme.liquid (wrapper for all pages)
├── templates/ ← index.json, product.json, collection.json
├── sections/ ← header.liquid, footer.liquid, hero.liquid
├── snippets/ ← reusable partials (product-card.liquid)
├── assets/ ← CSS, JS, fonts, images
├── locales/ ← en.default.json (translatable strings)
└── config/ ← settings_schema.json (theme editor config)
Frequently Asked Questions
How do I convert an HTML template to Shopify?
Conversion approach: 1) Copy all CSS/JS to the assets/ folder. 2) Create layout/theme.liquid with your HTML head and body wrapper. 3) Add `{{ content_for_header }}` before and `{{ content_for_layout }}` in the body. 4) Replace static text with Liquid tags (product.title, product.price | money, shop.name). 5) Create sections/ for configurable blocks. Easier alternative: restyle Shopify's free Dawn theme.
What is Shopify Liquid?
Liquid is Shopify's open-source template language for rendering dynamic store data in HTML. Two types of tags: Output tags `{{ variable }}` — insert dynamic values like `{{ product.title }}` or `{{ shop.name }}`. Logic tags `{% if %}` / `{% for %}` — control flow and loops. Filters modify output: `{{ product.price | money }}` formats a number as currency. All HTML in Shopify themes is processed through Liquid before being sent to the browser.
What is a Shopify 2.0 theme?
Shopify 2.0 themes use JSON templates (templates/index.json instead of templates/index.liquid) and a section/block system that lets merchants drag-and-drop, show/hide, and configure every part of any page from the visual Theme Editor — without touching code. Legacy themes had merchant-editable sections only on the homepage. 2.0 themes: every page is fully customisable. All new themes submitted to the Shopify Theme Store must be 2.0.
Should I convert my HTML template to Shopify or use a pre-built theme?
Pre-built route (faster): Download Dawn (free) or purchase a Shopify theme ($140-$350) → restyle to match your HTML design. Better for most cases — all product, cart, checkout templates are pre-built and tested. Conversion route: better if you have a highly specific design that can't be achieved by restyling. UIXDraft HTML templates work well as a visual reference when restyling Dawn — same dark design system.
What tools do I need for Shopify theme development?
Essential tools: Shopify CLI (command line, free) — `shopify theme dev` for local development with live preview. Shopify Theme Inspector (Chrome extension) — profile Liquid rendering performance. Shopify GitHub integration — sync theme files via GitHub, deploy on push. VS Code with Liquid extension (Shopify official, VS Marketplace) — Liquid syntax highlighting and autocomplete. Free Shopify Partner account for unlimited development stores.