Local Development

Start the dev server

Move into the theme folder


cd citera-shopify-theme

Run the dev server


shopify theme dev --store=citera-yhzgew4z.myshopify.com

Open the preview

The CLI serves the theme at:


http://127.0.0.1:9292

Edits to Liquid, CSS and JS hot-reload in the browser. Section and settings changes made in the local files reflect immediately.

What `theme dev` does

Serves your local files rendered against the live store’s data (products, collections, customers).
Creates a hidden development theme on the store so your local session is isolated from the live theme.
Syncs local edits up and remote editor edits down while running.

The development theme shown in shopify theme list (Development (…-MacBook-Pro), id 155731525822) is exactly this — a CLI-managed scratch theme. It’s safe; it is never customer-facing.

Useful flags

Flag	Effect
`--theme-editor-sync`	Two-way sync with the online theme editor
`--live-reload=hot-reload`	Default; injects changes without full reload
`--live-reload=full-page`	Force a full page refresh on change
`--port=9293`	Use a different local port
`--theme=<id>`	Bind the dev session to a specific theme

Recommended loop

shopify theme pull — get the latest (merchants may have edited settings).
Edit locally; watch it live via theme dev.
shopify theme check — lint.
shopify theme push --unpublished --theme="Citera QA" — stage for review.
Review the preview URL, then publish from the Shopify Admin.

Treat templates/*.json and config/settings_data.json with care — these hold merchant content and settings. Pulling before you work avoids clobbering changes made in the theme editor.