From 2a77d30340401dc8f0bed1041068a6ea86c16f02 Mon Sep 17 00:00:00 2001 From: freddie Date: Mon, 13 Apr 2026 19:37:46 +0100 Subject: [PATCH 1/4] feat: replace mock.shop with mockdotshop.myshopify.com The `mock.shop` domain is being deprecated. This migrates all default references to `mockdotshop.myshopify.com` while maintaining backwards compatibility for existing projects that still use `mock.shop` in their environment variables. Key decisions: - `isMockShop()` checks recognize both old and new domains during the transition period, so existing storefronts don't break - User-facing strings now display "Mock Shop" as a brand name rather than showing the raw domain - Magic string literals replaced with named constants (`MOCK_SHOP_DOMAIN`, `LEGACY_MOCK_SHOP_DOMAIN`) in both hydrogen-react and the CLI Co-Authored-By: Claude Opus 4.6 (1M context) --- .changeset/mock-shop-domain-migration.md | 8 ++++++++ e2e/envs/.env.mockShop | 4 ++-- packages/cli/oclif.manifest.json | 2 +- packages/cli/src/commands/hydrogen/init.ts | 2 +- packages/cli/src/lib/dev-shared.ts | 13 +++++++++---- packages/cli/src/lib/log.ts | 2 +- packages/cli/src/lib/onboarding/local.test.ts | 4 ++-- packages/cli/src/lib/onboarding/local.ts | 4 ++-- .../hydrogen-react/src/storefront-client.test.ts | 12 +++++++++++- packages/hydrogen-react/src/storefront-client.ts | 10 ++++------ .../src/analytics-manager/ShopifyAnalytics.tsx | 4 +++- packages/hydrogen/src/cart/cart-test-helper.ts | 2 +- .../src/vite/virtual-routes/routes/index.tsx | 6 +++++- 13 files changed, 50 insertions(+), 23 deletions(-) create mode 100644 .changeset/mock-shop-domain-migration.md diff --git a/.changeset/mock-shop-domain-migration.md b/.changeset/mock-shop-domain-migration.md new file mode 100644 index 0000000000..bc7b7e3417 --- /dev/null +++ b/.changeset/mock-shop-domain-migration.md @@ -0,0 +1,8 @@ +--- +'@shopify/hydrogen-react': minor +'@shopify/hydrogen': minor +'@shopify/cli-hydrogen': minor +'@shopify/create-hydrogen': minor +--- + +Replace deprecated `mock.shop` domain with `mockdotshop.myshopify.com` as the default demo storefront for newly scaffolded Hydrogen projects. Existing projects using `mock.shop` in their environment variables will continue to work — both domains are recognized during the transition period. diff --git a/e2e/envs/.env.mockShop b/e2e/envs/.env.mockShop index 805ea2b1f1..fa47c25876 100644 --- a/e2e/envs/.env.mockShop +++ b/e2e/envs/.env.mockShop @@ -1,5 +1,5 @@ SESSION_SECRET="mock-session" -PUBLIC_CHECKOUT_DOMAIN="mock.shop" -PUBLIC_STORE_DOMAIN="mock.shop" +PUBLIC_CHECKOUT_DOMAIN="mockdotshop.myshopify.com" +PUBLIC_STORE_DOMAIN="mockdotshop.myshopify.com" PUBLIC_STOREFRONT_API_TOKEN="" PUBLIC_STOREFRONT_ID="" diff --git a/packages/cli/oclif.manifest.json b/packages/cli/oclif.manifest.json index 6f56c8e604..11ab07718f 100644 --- a/packages/cli/oclif.manifest.json +++ b/packages/cli/oclif.manifest.json @@ -1018,7 +1018,7 @@ "type": "boolean" }, "mock-shop": { - "description": "Use mock.shop as the data source for the storefront.", + "description": "Use Mock Shop as the data source for the storefront.", "env": "SHOPIFY_HYDROGEN_FLAG_MOCK_DATA", "name": "mock-shop", "allowNo": false, diff --git a/packages/cli/src/commands/hydrogen/init.ts b/packages/cli/src/commands/hydrogen/init.ts index 2672fc336f..adffbcb860 100644 --- a/packages/cli/src/commands/hydrogen/init.ts +++ b/packages/cli/src/commands/hydrogen/init.ts @@ -39,7 +39,7 @@ export default class Init extends Command { }), ...commonFlags.installDeps, 'mock-shop': Flags.boolean({ - description: 'Use mock.shop as the data source for the storefront.', + description: 'Use Mock Shop as the data source for the storefront.', env: 'SHOPIFY_HYDROGEN_FLAG_MOCK_DATA', }), ...commonFlags.styling, diff --git a/packages/cli/src/lib/dev-shared.ts b/packages/cli/src/lib/dev-shared.ts index 30441a2cd1..77ed8df033 100644 --- a/packages/cli/src/lib/dev-shared.ts +++ b/packages/cli/src/lib/dev-shared.ts @@ -16,19 +16,24 @@ import {startTunnelPlugin, pollTunnelURL} from './tunneling.js'; import {getConfig} from './shopify-config.js'; import {getGraphiQLUrl} from './graphiql-url.js'; +const MOCK_SHOP_DOMAIN = 'mockdotshop.myshopify.com'; +const LEGACY_MOCK_SHOP_DOMAIN = 'mock.shop'; + export function isMockShop(envVariables: Record) { + const domain = envVariables.PUBLIC_STORE_DOMAIN; return ( - envVariables.PUBLIC_STORE_DOMAIN === 'mock.shop' || - // We fallback to mock.shop if the env var is falsy. + domain === MOCK_SHOP_DOMAIN || + domain === LEGACY_MOCK_SHOP_DOMAIN || + // We fallback to Mock Shop if the env var is falsy. // When it's undefined, it might be overwritten by remote variables. - envVariables.PUBLIC_STORE_DOMAIN === '' + domain === '' ); } export function notifyIssueWithTunnelAndMockShop(cliCommand: string) { renderInfo({ headline: - 'Using mock.shop with `--customer-account-push` flag is not supported', + 'Using Mock Shop with `--customer-account-push` flag is not supported', body: 'The functionalities of this flag are disabled.', nextSteps: [ 'You may continue knowing Customer Account API (/account) interactions will fail.', diff --git a/packages/cli/src/lib/log.ts b/packages/cli/src/lib/log.ts index 4a2bd2b187..d31cdd9a51 100644 --- a/packages/cli/src/lib/log.ts +++ b/packages/cli/src/lib/log.ts @@ -322,7 +322,7 @@ export function enhanceH2Logs(options: { if ( stringArg.startsWith('[h2:info:createStorefrontClient]') && - stringArg.includes('defaulting to mock.shop') + stringArg.includes('defaulting to Mock Shop') ) { // This message comes from hydrogen-react. Let's enhance it: stringArg += '\nRun `h2 link` to link your store.'; diff --git a/packages/cli/src/lib/onboarding/local.test.ts b/packages/cli/src/lib/onboarding/local.test.ts index ec57c0253e..9ef6ab1202 100644 --- a/packages/cli/src/lib/onboarding/local.test.ts +++ b/packages/cli/src/lib/onboarding/local.test.ts @@ -62,9 +62,9 @@ describe('local templates', () => { `"name": "${basename(tmpDir)}"`, ); - // Creates .env without mock.shop + // Creates .env without Mock Shop domain await expect(readFile(`${tmpDir}/.env`)).resolves.not.toMatch( - `mock.shop`, + `mockdotshop.myshopify.com`, ); const output = outputMock.info(); diff --git a/packages/cli/src/lib/onboarding/local.ts b/packages/cli/src/lib/onboarding/local.ts index dd720e12a1..235ff33278 100644 --- a/packages/cli/src/lib/onboarding/local.ts +++ b/packages/cli/src/lib/onboarding/local.ts @@ -52,7 +52,7 @@ export async function setupLocalStarterTemplate( choices: [ { label: - 'Use sample data from mock.shop (You can connect a Shopify account later)', + 'Use sample data from Mock Shop (You can connect a Shopify account later)', value: 'mock', }, {label: 'Link your Shopify account', value: 'link'}, @@ -74,7 +74,7 @@ export async function setupLocalStarterTemplate( if (!project) return; - if (templateAction === 'mock') project.storefrontTitle = 'Mock.shop'; + if (templateAction === 'mock') project.storefrontTitle = 'Mock Shop'; const abort = createAbortHandler(controller, project); diff --git a/packages/hydrogen-react/src/storefront-client.test.ts b/packages/hydrogen-react/src/storefront-client.test.ts index 2e1e6b8eb8..9f2a0ae683 100644 --- a/packages/hydrogen-react/src/storefront-client.test.ts +++ b/packages/hydrogen-react/src/storefront-client.test.ts @@ -116,7 +116,17 @@ describe(`createStorefrontClient`, () => { ); }); - it(`generates a URL correctly for mock.shop`, () => { + it(`generates a URL correctly for Mock Shop`, () => { + const client = createStorefrontClient( + generateConfig({storeDomain: 'mockdotshop.myshopify.com'}), + ); + + expect(client.getStorefrontApiUrl()).toBe( + `https://mockdotshop.myshopify.com/api/${SFAPI_VERSION}/graphql.json`, + ); + }); + + it(`generates a URL correctly for the legacy mock.shop domain`, () => { const client = createStorefrontClient( generateConfig({storeDomain: 'mock.shop'}), ); diff --git a/packages/hydrogen-react/src/storefront-client.ts b/packages/hydrogen-react/src/storefront-client.ts index fbdfdaac81..99be7f2ed3 100644 --- a/packages/hydrogen-react/src/storefront-client.ts +++ b/packages/hydrogen-react/src/storefront-client.ts @@ -17,9 +17,10 @@ export type StorefrontClientProps = { contentType?: 'json' | 'graphql'; }; -const MOCK_SHOP_DOMAIN = 'mock.shop'; +const MOCK_SHOP_DOMAIN = 'mockdotshop.myshopify.com'; +const LEGACY_MOCK_SHOP_DOMAIN = 'mock.shop'; const isMockShop = (domain: string): boolean => - domain.includes(MOCK_SHOP_DOMAIN); + domain.includes(MOCK_SHOP_DOMAIN) || domain.includes(LEGACY_MOCK_SHOP_DOMAIN); /** * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API. @@ -36,10 +37,7 @@ export function createStorefrontClient({ if (!storeDomain) { if (__HYDROGEN_DEV__) { storeDomain = MOCK_SHOP_DOMAIN; - warnOnce( - `storeDomain missing, defaulting to ${MOCK_SHOP_DOMAIN}`, - 'info', - ); + warnOnce(`storeDomain missing, defaulting to Mock Shop`, 'info'); } else { throw new Error( H2_PREFIX_ERROR + diff --git a/packages/hydrogen/src/analytics-manager/ShopifyAnalytics.tsx b/packages/hydrogen/src/analytics-manager/ShopifyAnalytics.tsx index 2cbc8b444f..4f7328421a 100644 --- a/packages/hydrogen/src/analytics-manager/ShopifyAnalytics.tsx +++ b/packages/hydrogen/src/analytics-manager/ShopifyAnalytics.tsx @@ -73,7 +73,9 @@ export function ShopifyAnalytics({ useCustomerPrivacy({ ...consent, locale: language, - checkoutDomain: !checkoutDomain ? 'mock.shop' : checkoutDomain, + checkoutDomain: !checkoutDomain + ? 'mockdotshop.myshopify.com' + : checkoutDomain, storefrontAccessToken: !storefrontAccessToken ? 'abcdefghijklmnopqrstuvwxyz123456' : storefrontAccessToken, diff --git a/packages/hydrogen/src/cart/cart-test-helper.ts b/packages/hydrogen/src/cart/cart-test-helper.ts index 978bc08b01..533f967829 100644 --- a/packages/hydrogen/src/cart/cart-test-helper.ts +++ b/packages/hydrogen/src/cart/cart-test-helper.ts @@ -8,7 +8,7 @@ export const BUYER_LOCATION_ID = 'gid://shopify/CompanyLocation/1'; export const CART_ID = 'gid://shopify/Cart/c1-123'; export const NEW_CART_ID = 'c1-new-cart-id'; export const CHECKOUT_URL = - 'https://demostore.mock.shop/cart/c/Z2NwLXVzLWNlbnRyYWwxOjAxSE5aSFBWVjhKSEc5NDA5MTlWM0ZTUVJE?key=66f3266a23df83f84f2aee087ec244b2'; + 'https://demostore.mockdotshop.myshopify.com/cart/c/Z2NwLXVzLWNlbnRyYWwxOjAxSE5aSFBWVjhKSEc5NDA5MTlWM0ZTUVJE?key=66f3266a23df83f84f2aee087ec244b2'; function storefrontQuery( query: string, diff --git a/packages/hydrogen/src/vite/virtual-routes/routes/index.tsx b/packages/hydrogen/src/vite/virtual-routes/routes/index.tsx index 48fafab7e3..de84055410 100644 --- a/packages/hydrogen/src/vite/virtual-routes/routes/index.tsx +++ b/packages/hydrogen/src/vite/virtual-routes/routes/index.tsx @@ -44,7 +44,11 @@ export async function loader({ context: AppLoadContext; }) { const layout = await storefront.query<{shop: Shop}>(LAYOUT_QUERY); - return {layout, isMockShop: storefront.getApiUrl().includes('mock.shop')}; + const apiUrl = storefront.getApiUrl(); + const isMockShop = + apiUrl.includes('mockdotshop.myshopify.com') || + apiUrl.includes('mock.shop'); + return {layout, isMockShop}; } export const HYDROGEN_SHOP_ID = 'gid://shopify/Shop/55145660472'; From dc2a1b483c56a7d7c06578cc5185f81fa304d0c9 Mon Sep 17 00:00:00 2001 From: freddie Date: Tue, 14 Apr 2026 13:53:01 +0100 Subject: [PATCH 2/4] refactor: remove LEGACY_MOCK_SHOP_DOMAIN backwards compat MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The `mock.shop` domain is an internal default, not a user-facing API contract. Both domains point to the same store, so existing projects with `mock.shop` in their `.env` still work at the API level — they just won't be detected as "mock shop" for cosmetic behaviors like the welcome page and warning suppression, which is a useful nudge to update. A clean cut is simpler than carrying a legacy constant that would need a second breaking change to remove later. Co-Authored-By: Claude Opus 4.6 (1M context) --- .changeset/mock-shop-domain-migration.md | 2 +- packages/cli/src/lib/dev-shared.ts | 2 -- packages/hydrogen-react/src/storefront-client.test.ts | 10 ---------- packages/hydrogen-react/src/storefront-client.ts | 3 +-- .../hydrogen/src/vite/virtual-routes/routes/index.tsx | 7 +++---- 5 files changed, 5 insertions(+), 19 deletions(-) diff --git a/.changeset/mock-shop-domain-migration.md b/.changeset/mock-shop-domain-migration.md index bc7b7e3417..cd2db35f0a 100644 --- a/.changeset/mock-shop-domain-migration.md +++ b/.changeset/mock-shop-domain-migration.md @@ -5,4 +5,4 @@ '@shopify/create-hydrogen': minor --- -Replace deprecated `mock.shop` domain with `mockdotshop.myshopify.com` as the default demo storefront for newly scaffolded Hydrogen projects. Existing projects using `mock.shop` in their environment variables will continue to work — both domains are recognized during the transition period. +Replace deprecated `mock.shop` domain with `mockdotshop.myshopify.com` as the default demo storefront. The `mock.shop` domain is no longer recognized as a mock shop — if you had it set explicitly in your `.env`, update it to `mockdotshop.myshopify.com` or remove it to use the new default automatically. diff --git a/packages/cli/src/lib/dev-shared.ts b/packages/cli/src/lib/dev-shared.ts index 77ed8df033..10a3967369 100644 --- a/packages/cli/src/lib/dev-shared.ts +++ b/packages/cli/src/lib/dev-shared.ts @@ -17,13 +17,11 @@ import {getConfig} from './shopify-config.js'; import {getGraphiQLUrl} from './graphiql-url.js'; const MOCK_SHOP_DOMAIN = 'mockdotshop.myshopify.com'; -const LEGACY_MOCK_SHOP_DOMAIN = 'mock.shop'; export function isMockShop(envVariables: Record) { const domain = envVariables.PUBLIC_STORE_DOMAIN; return ( domain === MOCK_SHOP_DOMAIN || - domain === LEGACY_MOCK_SHOP_DOMAIN || // We fallback to Mock Shop if the env var is falsy. // When it's undefined, it might be overwritten by remote variables. domain === '' diff --git a/packages/hydrogen-react/src/storefront-client.test.ts b/packages/hydrogen-react/src/storefront-client.test.ts index 9f2a0ae683..9a44b716a3 100644 --- a/packages/hydrogen-react/src/storefront-client.test.ts +++ b/packages/hydrogen-react/src/storefront-client.test.ts @@ -125,16 +125,6 @@ describe(`createStorefrontClient`, () => { `https://mockdotshop.myshopify.com/api/${SFAPI_VERSION}/graphql.json`, ); }); - - it(`generates a URL correctly for the legacy mock.shop domain`, () => { - const client = createStorefrontClient( - generateConfig({storeDomain: 'mock.shop'}), - ); - - expect(client.getStorefrontApiUrl()).toBe( - `https://mock.shop/api/${SFAPI_VERSION}/graphql.json`, - ); - }); }); describe(`getPrivateTokenHeaders`, () => { diff --git a/packages/hydrogen-react/src/storefront-client.ts b/packages/hydrogen-react/src/storefront-client.ts index 99be7f2ed3..9908d96413 100644 --- a/packages/hydrogen-react/src/storefront-client.ts +++ b/packages/hydrogen-react/src/storefront-client.ts @@ -18,9 +18,8 @@ export type StorefrontClientProps = { }; const MOCK_SHOP_DOMAIN = 'mockdotshop.myshopify.com'; -const LEGACY_MOCK_SHOP_DOMAIN = 'mock.shop'; const isMockShop = (domain: string): boolean => - domain.includes(MOCK_SHOP_DOMAIN) || domain.includes(LEGACY_MOCK_SHOP_DOMAIN); + domain.includes(MOCK_SHOP_DOMAIN); /** * The `createStorefrontClient()` function creates helpers that enable you to quickly query the Shopify Storefront API. diff --git a/packages/hydrogen/src/vite/virtual-routes/routes/index.tsx b/packages/hydrogen/src/vite/virtual-routes/routes/index.tsx index de84055410..624f71b355 100644 --- a/packages/hydrogen/src/vite/virtual-routes/routes/index.tsx +++ b/packages/hydrogen/src/vite/virtual-routes/routes/index.tsx @@ -44,10 +44,9 @@ export async function loader({ context: AppLoadContext; }) { const layout = await storefront.query<{shop: Shop}>(LAYOUT_QUERY); - const apiUrl = storefront.getApiUrl(); - const isMockShop = - apiUrl.includes('mockdotshop.myshopify.com') || - apiUrl.includes('mock.shop'); + const isMockShop = storefront + .getApiUrl() + .includes('mockdotshop.myshopify.com'); return {layout, isMockShop}; } From b36210b7294cb857f73a80edf0f22cf54e2d2e5e Mon Sep 17 00:00:00 2001 From: freddie Date: Tue, 14 Apr 2026 13:59:28 +0100 Subject: [PATCH 3/4] chore: fix test util domain --- packages/hydrogen/src/cart/cart-test-helper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/hydrogen/src/cart/cart-test-helper.ts b/packages/hydrogen/src/cart/cart-test-helper.ts index 533f967829..609bc63562 100644 --- a/packages/hydrogen/src/cart/cart-test-helper.ts +++ b/packages/hydrogen/src/cart/cart-test-helper.ts @@ -8,7 +8,7 @@ export const BUYER_LOCATION_ID = 'gid://shopify/CompanyLocation/1'; export const CART_ID = 'gid://shopify/Cart/c1-123'; export const NEW_CART_ID = 'c1-new-cart-id'; export const CHECKOUT_URL = - 'https://demostore.mockdotshop.myshopify.com/cart/c/Z2NwLXVzLWNlbnRyYWwxOjAxSE5aSFBWVjhKSEc5NDA5MTlWM0ZTUVJE?key=66f3266a23df83f84f2aee087ec244b2'; + 'https://mockdotshop.myshopify.com/cart/c/Z2NwLXVzLWNlbnRyYWwxOjAxSE5aSFBWVjhKSEc5NDA5MTlWM0ZTUVJE?key=66f3266a23df83f84f2aee087ec244b2'; function storefrontQuery( query: string, From cbe74e4f58f89a9c947ddc6f9e5da48904659163 Mon Sep 17 00:00:00 2001 From: freddie Date: Tue, 14 Apr 2026 14:07:48 +0100 Subject: [PATCH 4/4] fix: update create-hydrogen inline snapshot for Mock Shop title The success banner snapshot expected "Mock.shop" but we changed the storefront title to "Mock Shop" in onboarding/local.ts. Co-Authored-By: Claude Opus 4.6 (1M context) --- packages/create-hydrogen/integration.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/create-hydrogen/integration.test.ts b/packages/create-hydrogen/integration.test.ts index cfee0a10bd..ff0e24cda5 100644 --- a/packages/create-hydrogen/integration.test.ts +++ b/packages/create-hydrogen/integration.test.ts @@ -45,7 +45,7 @@ describe('create-hydrogen', () => { │ │ │ Storefront setup complete! │ │ │ - │ Shopify: Mock.shop │ + │ Shopify: Mock Shop │ │ Language: JavaScript │ │ Routes: │ │ • Home (/ & /:catchAll) │