Design your theme with Claude or ChatGPT

You ask an AI assistant to edit your theme code on your own computer, using Claude Code in the Claude app or Codex in the ChatGPT app. You say what you want to change, and the assistant runs the commands and pushes the result to a draft.

Customers see nothing until you preview the draft and publish it yourself in the Theme library.

Check that your store has Hosting

1. In the sidebar, click Online Store.
2. Click the name of your current theme, on the image at the top of the page.
3. Click Edit code to open this section.
4. If it says your current plan does not include hosting, click Upgrade plan.
5. Choose a plan with Upload custom storefront code.

If this section says Hosting is not turned on, contact EcomWeb to turn it on for your store. If you see no message, the store is usually ready.

Get your computer ready

1. Download and install the Claude or ChatGPT desktop app.
2. Install Node.js version 24 or later, pnpm and Git if your computer does not have them yet. The assistant can also install them for you.
3. Open Claude Code in the Claude app, or Codex in the ChatGPT app.

Get your store code and theme code

The prompt needs two codes. You find them in the Edit code section of your current theme, as above.

1. In Use the CLI, find the line that starts with ecomweb auth login –store-ref. What follows –store-ref is the store code.
2. Find the line that starts with ecomweb storefront init –theme. What follows –theme is the theme code.

Have the assistant build a draft

1. Copy the prompt below.
2. Paste it into Claude Code or Codex.
3. Replace the parts in square brackets with your store name, the two codes and what you want to change.
4. Send the prompt.

Approve the CLI sign-in

When the assistant runs the sign-in command, your browser opens the Sign in to ecomweb CLI? page.

1. Compare the Code on the page with the code in the assistant’s window.
2. If the two codes match, click Approve.
3. Go back to the app so the assistant can continue.

If you did not just ask the assistant to sign in, click Deny.

Preview the draft

The first time the assistant deploys, EcomWeb creates a theme in the Theme library with the name of your current theme and “(bản nháp)” after it. Later deploys go into that same draft. When the build finishes, the assistant sends you a preview link that works for 24 hours.

1. Open the preview link on your computer and on your phone.
2. Tell the assistant what else to change, if anything.

To open the preview again later:

1. Go to Online Store.
2. On the draft’s row in the Theme library, click the three-dot icon.
3. Choose Preview. The preview can take a moment to start.

Publish the draft

1. Go to Online Store.
2. On the draft’s row in the Theme library, click Publish.
3. In the Publish this theme? box, click Publish.

Your old theme moves to the Theme library. If the new one has a problem, publish the old theme again, see Choose and change your theme.

Frequently asked questions