shopify_theme_builder

Phase 1 – Setup checks

1. Shopify CLI
   • Run shopify version. If missing, install globally: npm install -g @shopify/cli@latest.
2. Auth + store
   • Ask for store_domain (e.g., demo.myshopify.com).
   • Run shopify theme list --store <store_domain>.
   • If the CLI prompts for login, run shopify auth login --store <store_domain> (or follow the verification code URL) until theme list succeeds.
3. Workspace
   • Create ~/shopify_theme_builder/<brand_name>_<YYYYMMDD>/.
   • All subsequent work (theme init, git, assets) happens inside this folder.

Phase 2 – Interview (collect all fields)

Capture the following structured data (store it in a JSON/YAML file for reuse):

• Store/deploy: store_domain, deployment_mode (default staging_only), github_mode (commit_local by default, options: none, commit_local, commit_and_push).
• Brand: name, tagline, tone, primary color hex, secondary color hex, font preference, logo path/url, favicon path/url.
• Offer/product: product name, category, price, compare-at (optional), bundles (list), top benefits, detailed features, objection -> rebuttal pairs, guarantee copy, shipping promise, returns summary, CTA text.
• Proof: reviews/testimonials, press quotes/logos, social proof metrics.
• Assets: product image paths/URLs, lifestyle imagery. If none, note that placeholders will be inserted.
• SEO: primary keyword, secondary keywords list, meta title/description for home + product page, brand story paragraph, FAQ list (5–12 Q&A pairs).
• Compliance/support: business address, support email, optional phone, policy text (shipping/returns/privacy/terms). If a policy is missing, note that a template will be generated. Keep prompting until every required field is supplied (or explicitly marked “generate”).

Phase 3 – Scaffold theme

1. If the user provides a base theme path/export, use it (unzip into workspace).
2. If no theme files exist yet, ask: “Would you like to fork the customized HydroShell starter theme as your base?”
   • If yes, clone https://github.com/jaredjester/hydroshell-swimbuds.git into the workspace (or fork via GitHub first if they want their own remote), then rename the folder to the new project name.
   • If no, proceed with the vanilla Dawn init below.
3. Otherwise run shopify theme init <theme_dir> inside the workspace and choose Dawn/default.
4. Initialize git if absent: git init && git checkout -b main.
5. Record the theme path for future commands.

Phase 4 – Generate theme content

Work inside the theme directory:

• Homepage sections: hero (headline + CTA), benefits grid, social proof carousel, “how it works”, featured product block, FAQ, final CTA strip.
• Product template: sticky ATC, shipping & returns block, benefits/features columns, optional comparison table, testimonials/reviews, FAQ, trust badges, guarantee highlight.
• Policies: ensure shipping, returns, privacy, and terms pages exist (create from templates when user lacks copy) and link them in the footer.
• Branding: apply colors/typography via config/settings_data.json or theme settings. Update CSS variables / custom CSS if necessary.
• Assets: copy logos/images into assets/ (download remote URLs). If placeholders are used, note it in alt text and comments.
• Alt text: set meaningful alt attributes for every image. Document all generated content in the workspace (e.g., content_map.md).

Phase 5 – SEO & schema

• Update meta tags for homepage + product template using interview data.
• Add JSON-LD Organization schema (sitewide) and Product schema on the product page.
• Ensure headings naturally include primary/secondary keywords (no stuffing).
• Verify structured data with Rich Results Test (optional) or run shopify theme check to catch schema mistakes.

Phase 6 – Preview

1. Run shopify theme dev --store <store_domain> from the theme directory.
2. Share the preview URL from the CLI output.
3. Ask the user for edits. Do not proceed until they explicitly approve the preview.

Phase 7 – Safe deploy

1. Create/push to an unpublished staging theme with a dated name:

   shopify theme push \
     --unpublished \
     --store <store_domain> \
     --theme-name "<brand_name> - Staging <YYYY-MM-DD>"
   

2. Capture the returned theme ID.
3. Open it for quick inspection: shopify theme open --store <store_domain> --theme <theme_id>.
4. Report the theme name + ID back to the user.
5. Never publish unless the user says exactly "PUBLISH APPROVED".
6. Never delete/overwrite the live theme.

Phase 8 – GitHub (optional)

• If github_mode == none: skip.
• If github_mode == commit_local: run git status, stage, git commit -am "feat: build <brand_name> theme".
• If commit_and_push: ensure origin exists, then git push origin main (or the current branch). Never push secrets—confirm .env (if any) is in .gitignore.

Output summary (always)

Provide a final report with:

• Workspace path
• Git status / latest commit hash
• Preview URL (from Phase 6)
• Staging theme name & ID (from Phase 7)
• Reminder that publishing requires the exact phrase PUBLISH APPROVED and must be done manually (or the agent can run shopify theme publish only after explicit approval)
• Guidance for linking the GitHub repo to Shopify (if applicable)

Safety rules (do not violate)

• Publishing: only run shopify theme publish after the user types exactly PUBLISH APPROVED.
• Theme deletion: never delete themes or overwrite the live theme.
• Secrets: do not commit/store Shopify tokens, .env, or other credentials. Ensure .env is .gitignore’d.

Use this skill whenever someone wants a full theme build with structured inputs, SEO, and safe deployment. It enforces a repeatable process from interview → build → preview → staging push without risking production.