Deploy and roll back

No CI deploys this theme. Every deploy is a person running a command from their own machine, so the checks below are the only checks that happen.

Before any deploy

git status                  # clean, and on the branch you mean
npm run typecheck
npm run build
npm run lint

Then check the two generated files:

grep -c "localhost:5173" snippets/vite-tag.liquid    # must be 0
git diff --stat snippets/vite-tag.liquid src/entrypoints/theme.styles.css

A vite-tag.liquid that holds dev server URLs breaks every bundle on the storefront. It is the most damaging change this repository can push to a theme.

List the store's themes and note the ID of the one you mean to write to:

npm run list

Push to an existing theme

npm run push builds the theme, then runs shopify theme push. shopify.theme.toml defines default and dev environments. Both point at store 6f637e-3, and neither names a theme.

Name the target theme by ID:

npm run push -- --theme <theme-id>

Without --theme, Shopify CLI asks you to pick a theme from a list that includes the live theme. Either way, the push overwrites that theme's files and creates no new theme.

Deploy a new versioned theme

npm run deploy creates a new theme instead of updating one. It:

Finds the live theme's ID.
Offers to change the theme name. The default comes from themeNameTemplate in package.json, with version filled in, currently Beauty Affairs Hong Kong v6.7.1.
Warns if a theme with that name already exists and asks whether to continue. --force skips the question.
Duplicates the live theme, which keeps the theme eligible for Theme Store updates.
Waits for Shopify to finish processing the duplicate.
Pushes the built files to the duplicate, with a 20-minute timeout.

npm run deploy
npm run deploy -- --name "Beauty Affairs Hong Kong v6.8.0"
npm run deploy -- --force

Bump version in package.json before deploying, so the generated name is right.

The new theme is unpublished. Publishing it is a separate step in Online Store > Themes.

If the push times out, the files may still have reached the theme. Check in Shopify before you run the command again, because a second run creates another duplicate.

Roll back

A bad publish. Republish the previous theme in Online Store > Themes. It is still there, unpublished. This takes effect at once, so do it first and investigate afterwards.

A bad push to a theme. Push the last good commit to the same theme:

git checkout <last-good-commit>
npm run build
npm run list
npm run push -- --theme <theme-id>

If the bad push went to the live theme and the previous theme is still unpublished, you can republish that theme first to restore the store, then push the fix.

Shopify cannot restore a whole theme to an earlier point. In Online Store > Themes > ... > Edit code, the Timeline view restores one Liquid, JSON or locale file at a time. It keeps no history for assets/ and cannot recover deleted files, so it does not help with compiled bundles.

The theme pull workflow

.github/workflows/theme-pull.yml pulls the live theme into the production branch. It runs on a daily schedule, on a repository_dispatch event of type theme_update, on manual dispatch, and on pushes to master.

The workflow brings changes made in Shopify into git. That includes merchant settings from the theme editor and edits made in Shopify's code editor.

Only the workflow writes to production. Do not branch from it or open pull requests against it.

A change someone makes in the theme editor appears as a commit on production within a day. When a setting changes unexpectedly, that commit history shows when.

The workflow needs the SHOPIFY_CLI_THEME_TOKEN secret and the SHOPIFY_FLAG_STORE and SHOPIFY_FLAG_LIVE repository variables, and it fails with a clear message when any of them is missing. SHOPIFY_FLAG_LIVE must be true, which makes the pull read the live theme.

Before it runs, the workflow checks that client_payload.repo matches the repository name. A dispatch meant for another store's repository is rejected, so it cannot pull the wrong theme.

Verify after deploying

Load the storefront and check the browser console for errors.
View source and confirm the script tags use hashed asset names, not localhost:5173.
Add a product to the cart and confirm the drawer opens and updates.
Load a Medispa treatment page and confirm the calendar renders.
Load the homepage and scroll to the bottom, checking the carousels and the sticky category bar.
Check one page from each of the three layouts, because they have diverged.