Skip to content

Commit 3dcf026

Browse files
dengjeffreydengjeffrey
authored
Merge pull request #6890 from Shopify/jd/quick-preview
[Feature] Add Theme previews via JSON
2 parents a97a9e1 + 962e932 commit 3dcf026

18 files changed

Lines changed: 1153 additions & 5 deletions

File tree

‎.changeset/slick-humans-enjoy.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@shopify/theme': minor
3+
'@shopify/cli': minor
4+
---
5+
6+
Add support for theme previews using a JSON via `theme preview`. Pass a JSON via --override to quickly preview overrides on a live theme. Also adds a --preview-id flag to to handle in-place updates for previews created from an override JSON.

‎docs-shopify.dev/commands/examples/theme-preview.example.sh‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
shopify theme preview [flags]

‎docs-shopify.dev/commands/interfaces/theme-preview.interface.ts‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
// This is an autogenerated file. Don't edit this file manually.
2+
export interface themepreview {
3+
/**
4+
* The environment to apply to the current command.
5+
* @environment SHOPIFY_FLAG_ENVIRONMENT
6+
*/
7+
'-e, --environment <value>'?: string
8+
9+
/**
10+
* Disable color output.
11+
* @environment SHOPIFY_FLAG_NO_COLOR
12+
*/
13+
'--no-color'?: ''
14+
15+
/**
16+
* Automatically launch the theme preview in your default web browser.
17+
* @environment SHOPIFY_FLAG_OPEN
18+
*/
19+
'--open'?: ''
20+
21+
/**
22+
* Path to a JSON overrides file.
23+
* @environment SHOPIFY_FLAG_OVERRIDES
24+
*/
25+
'--overrides <value>': string
26+
27+
/**
28+
* Password generated from the Theme Access app or an Admin API token.
29+
* @environment SHOPIFY_CLI_THEME_TOKEN
30+
*/
31+
'--password <value>'?: string
32+
33+
/**
34+
* The path where you want to run the command. Defaults to the current working directory.
35+
* @environment SHOPIFY_FLAG_PATH
36+
*/
37+
'--path <value>'?: string
38+
39+
/**
40+
* An existing preview identifier to update instead of creating a new preview.
41+
* @environment SHOPIFY_FLAG_PREVIEW_ID
42+
*/
43+
'--preview-id <value>'?: string
44+
45+
/**
46+
* Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).
47+
* @environment SHOPIFY_FLAG_STORE
48+
*/
49+
'-s, --store <value>'?: string
50+
51+
/**
52+
* Theme ID or name of the remote theme.
53+
* @environment SHOPIFY_FLAG_THEME_ID
54+
*/
55+
'-t, --theme <value>': string
56+
57+
/**
58+
* Increase the verbosity of the output.
59+
* @environment SHOPIFY_FLAG_VERBOSE
60+
*/
61+
'--verbose'?: ''
62+
}

‎docs-shopify.dev/commands/theme-preview.doc.ts‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
// This is an autogenerated file. Don't edit this file manually.
2+
import {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'
3+
4+
const data: ReferenceEntityTemplateSchema = {
5+
name: 'theme preview',
6+
description: `Applies a JSON overrides file to a theme and creates or updates a preview. This lets you quickly preview changes.
7+
8+
The command returns a preview URL and a preview identifier. You can reuse the preview identifier with \`--preview-id\` to update an existing preview instead of creating a new one.`,
9+
overviewPreviewDescription: `Applies JSON overrides to a theme and returns a preview URL.`,
10+
type: 'command',
11+
isVisualComponent: false,
12+
defaultExample: {
13+
codeblock: {
14+
tabs: [
15+
{
16+
title: 'theme preview',
17+
code: './examples/theme-preview.example.sh',
18+
language: 'bash',
19+
},
20+
],
21+
title: 'theme preview',
22+
},
23+
},
24+
definitions: [
25+
{
26+
title: 'Flags',
27+
description: 'The following flags are available for the `theme preview` command:',
28+
type: 'themepreview',
29+
},
30+
],
31+
category: 'theme',
32+
related: [
33+
],
34+
}
35+
36+
export default data

‎docs-shopify.dev/generated/generated_docs_data.json‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7157,6 +7157,132 @@
71577157
"category": "theme",
71587158
"related": []
71597159
},
7160+
{
7161+
"name": "theme preview",
7162+
"description": "Applies a JSON overrides file to a theme and creates or updates a preview. This lets you quickly preview changes.\n\n The command returns a preview URL and a preview identifier. You can reuse the preview identifier with `--preview-id` to update an existing preview instead of creating a new one.",
7163+
"overviewPreviewDescription": "Applies JSON overrides to a theme and returns a preview URL.",
7164+
"type": "command",
7165+
"isVisualComponent": false,
7166+
"defaultExample": {
7167+
"codeblock": {
7168+
"tabs": [
7169+
{
7170+
"title": "theme preview",
7171+
"code": "shopify theme preview [flags]",
7172+
"language": "bash"
7173+
}
7174+
],
7175+
"title": "theme preview"
7176+
}
7177+
},
7178+
"definitions": [
7179+
{
7180+
"title": "Flags",
7181+
"description": "The following flags are available for the `theme preview` command:",
7182+
"type": "themepreview",
7183+
"typeDefinitions": {
7184+
"themepreview": {
7185+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7186+
"name": "themepreview",
7187+
"description": "",
7188+
"members": [
7189+
{
7190+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7191+
"syntaxKind": "PropertySignature",
7192+
"name": "--no-color",
7193+
"value": "\"\"",
7194+
"description": "Disable color output.",
7195+
"isOptional": true,
7196+
"environmentValue": "SHOPIFY_FLAG_NO_COLOR"
7197+
},
7198+
{
7199+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7200+
"syntaxKind": "PropertySignature",
7201+
"name": "--open",
7202+
"value": "\"\"",
7203+
"description": "Automatically launch the theme preview in your default web browser.",
7204+
"isOptional": true,
7205+
"environmentValue": "SHOPIFY_FLAG_OPEN"
7206+
},
7207+
{
7208+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7209+
"syntaxKind": "PropertySignature",
7210+
"name": "--overrides <value>",
7211+
"value": "string",
7212+
"description": "Path to a JSON overrides file.",
7213+
"environmentValue": "SHOPIFY_FLAG_OVERRIDES"
7214+
},
7215+
{
7216+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7217+
"syntaxKind": "PropertySignature",
7218+
"name": "--password <value>",
7219+
"value": "string",
7220+
"description": "Password generated from the Theme Access app or an Admin API token.",
7221+
"isOptional": true,
7222+
"environmentValue": "SHOPIFY_CLI_THEME_TOKEN"
7223+
},
7224+
{
7225+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7226+
"syntaxKind": "PropertySignature",
7227+
"name": "--path <value>",
7228+
"value": "string",
7229+
"description": "The path where you want to run the command. Defaults to the current working directory.",
7230+
"isOptional": true,
7231+
"environmentValue": "SHOPIFY_FLAG_PATH"
7232+
},
7233+
{
7234+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7235+
"syntaxKind": "PropertySignature",
7236+
"name": "--preview-id <value>",
7237+
"value": "string",
7238+
"description": "An existing preview identifier to update instead of creating a new preview.",
7239+
"isOptional": true,
7240+
"environmentValue": "SHOPIFY_FLAG_PREVIEW_ID"
7241+
},
7242+
{
7243+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7244+
"syntaxKind": "PropertySignature",
7245+
"name": "--verbose",
7246+
"value": "\"\"",
7247+
"description": "Increase the verbosity of the output.",
7248+
"isOptional": true,
7249+
"environmentValue": "SHOPIFY_FLAG_VERBOSE"
7250+
},
7251+
{
7252+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7253+
"syntaxKind": "PropertySignature",
7254+
"name": "-e, --environment <value>",
7255+
"value": "string",
7256+
"description": "The environment to apply to the current command.",
7257+
"isOptional": true,
7258+
"environmentValue": "SHOPIFY_FLAG_ENVIRONMENT"
7259+
},
7260+
{
7261+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7262+
"syntaxKind": "PropertySignature",
7263+
"name": "-s, --store <value>",
7264+
"value": "string",
7265+
"description": "Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).",
7266+
"isOptional": true,
7267+
"environmentValue": "SHOPIFY_FLAG_STORE"
7268+
},
7269+
{
7270+
"filePath": "docs-shopify.dev/commands/interfaces/theme-preview.interface.ts",
7271+
"syntaxKind": "PropertySignature",
7272+
"name": "-t, --theme <value>",
7273+
"value": "string",
7274+
"description": "Theme ID or name of the remote theme.",
7275+
"environmentValue": "SHOPIFY_FLAG_THEME_ID"
7276+
}
7277+
],
7278+
"value": "export interface themepreview {\n /**\n * The environment to apply to the current command.\n * @environment SHOPIFY_FLAG_ENVIRONMENT\n */\n '-e, --environment <value>'?: string\n\n /**\n * Disable color output.\n * @environment SHOPIFY_FLAG_NO_COLOR\n */\n '--no-color'?: ''\n\n /**\n * Automatically launch the theme preview in your default web browser.\n * @environment SHOPIFY_FLAG_OPEN\n */\n '--open'?: ''\n\n /**\n * Path to a JSON overrides file.\n * @environment SHOPIFY_FLAG_OVERRIDES\n */\n '--overrides <value>': string\n\n /**\n * Password generated from the Theme Access app or an Admin API token.\n * @environment SHOPIFY_CLI_THEME_TOKEN\n */\n '--password <value>'?: string\n\n /**\n * The path where you want to run the command. Defaults to the current working directory.\n * @environment SHOPIFY_FLAG_PATH\n */\n '--path <value>'?: string\n\n /**\n * An existing preview identifier to update instead of creating a new preview.\n * @environment SHOPIFY_FLAG_PREVIEW_ID\n */\n '--preview-id <value>'?: string\n\n /**\n * Store URL. It can be the store prefix (example) or the full myshopify.com URL (example.myshopify.com, https://example.myshopify.com).\n * @environment SHOPIFY_FLAG_STORE\n */\n '-s, --store <value>'?: string\n\n /**\n * Theme ID or name of the remote theme.\n * @environment SHOPIFY_FLAG_THEME_ID\n */\n '-t, --theme <value>': string\n\n /**\n * Increase the verbosity of the output.\n * @environment SHOPIFY_FLAG_VERBOSE\n */\n '--verbose'?: ''\n}"
7279+
}
7280+
}
7281+
}
7282+
],
7283+
"category": "theme",
7284+
"related": []
7285+
},
71607286
{
71617287
"name": "theme profile",
71627288
"description": "Profile the Shopify Liquid on a given page.\n\n This command will open a web page with the Speedscope profiler detailing the time spent executing Liquid on the given page.",

‎packages/cli-kit/src/private/node/session.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ interface AppManagementAPIOauthOptions {
8080
/**
8181
* A scope supported by the Storefront Renderer API.
8282
*/
83-
export type StorefrontRendererScope = 'devtools'
83+
export type StorefrontRendererScope = 'devtools' | 'graphql'
8484
interface StorefrontRendererAPIOAuthOptions {
8585
/** List of scopes to request permissions for. */
8686
scopes: StorefrontRendererScope[]

‎packages/cli-kit/src/private/node/session/scopes.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ function defaultApiScopes(api: API): string[] {
4848
case 'admin':
4949
return ['graphql', 'themes', 'collaborator']
5050
case 'storefront-renderer':
51-
return ['devtools']
51+
return ['devtools', 'graphql']
5252
case 'partners':
5353
return ['cli']
5454
case 'business-platform':

‎packages/cli/README.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -85,6 +85,7 @@
8585
* [`shopify theme metafields pull`](#shopify-theme-metafields-pull)
8686
* [`shopify theme open`](#shopify-theme-open)
8787
* [`shopify theme package`](#shopify-theme-package)
88+
* [`shopify theme preview`](#shopify-theme-preview)
8889
* [`shopify theme profile`](#shopify-theme-profile)
8990
* [`shopify theme publish`](#shopify-theme-publish)
9091
* [`shopify theme pull`](#shopify-theme-pull)
@@ -2542,6 +2543,41 @@ DESCRIPTION
25422543
(https://shopify.dev/docs/storefronts/themes/architecture/config/settings-schema-json) file.
25432544
```
25442545
2546+
## `shopify theme preview`
2547+
2548+
Applies JSON overrides to a theme and returns a preview URL.
2549+
2550+
```
2551+
USAGE
2552+
$ shopify theme preview --overrides <value> -t <value> [-e <value>...] [--no-color] [--open] [--password <value>]
2553+
[--path <value>] [--preview-id <value>] [-s <value>] [--verbose]
2554+
2555+
FLAGS
2556+
-e, --environment=<value>... [env: SHOPIFY_FLAG_ENVIRONMENT] The environment to apply to the current command.
2557+
-s, --store=<value> [env: SHOPIFY_FLAG_STORE] Store URL. It can be the store prefix (example) or the full
2558+
myshopify.com URL (example.myshopify.com, https://example.myshopify.com).
2559+
-t, --theme=<value> (required) [env: SHOPIFY_FLAG_THEME_ID] Theme ID or name of the remote theme.
2560+
--no-color [env: SHOPIFY_FLAG_NO_COLOR] Disable color output.
2561+
--open [env: SHOPIFY_FLAG_OPEN] Automatically launch the theme preview in your default web
2562+
browser.
2563+
--overrides=<value> (required) [env: SHOPIFY_FLAG_OVERRIDES] Path to a JSON overrides file.
2564+
--password=<value> [env: SHOPIFY_CLI_THEME_TOKEN] Password generated from the Theme Access app or an Admin
2565+
API token.
2566+
--path=<value> [env: SHOPIFY_FLAG_PATH] The path where you want to run the command. Defaults to the
2567+
current working directory.
2568+
--preview-id=<value> [env: SHOPIFY_FLAG_PREVIEW_ID] An existing preview identifier to update instead of
2569+
creating a new preview.
2570+
--verbose [env: SHOPIFY_FLAG_VERBOSE] Increase the verbosity of the output.
2571+
2572+
DESCRIPTION
2573+
Applies JSON overrides to a theme and returns a preview URL.
2574+
2575+
Applies a JSON overrides file to a theme and creates or updates a preview. This lets you quickly preview changes.
2576+
2577+
The command returns a preview URL and a preview identifier. You can reuse the preview identifier with `--preview-id`
2578+
to update an existing preview instead of creating a new one.
2579+
```
2580+
25452581
## `shopify theme profile`
25462582
25472583
Profile the Liquid rendering of a theme page.

0 commit comments

Comments
 (0)