{"id":26457827,"url":"https://github.com/akillmer/shopify-theme-sync-plugin","last_synced_at":"2025-03-18T23:52:40.004Z","repository":{"id":57375365,"uuid":"254305744","full_name":"akillmer/shopify-theme-sync-plugin","owner":"akillmer","description":"Webpack plugin with BrowserSync to help streamline your Shopify theme development","archived":false,"fork":false,"pushed_at":"2020-04-09T09:11:04.000Z","size":79,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2023-12-25T04:02:15.259Z","etag":null,"topics":["browsersync","shopify","webpack"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/akillmer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-09T07:48:39.000Z","updated_at":"2021-05-23T12:17:52.000Z","dependencies_parsed_at":"2022-09-07T13:40:11.139Z","dependency_job_id":null,"html_url":"https://github.com/akillmer/shopify-theme-sync-plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":null,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akillmer%2Fshopify-theme-sync-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akillmer%2Fshopify-theme-sync-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akillmer%2Fshopify-theme-sync-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akillmer%2Fshopify-theme-sync-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akillmer","download_url":"https://codeload.github.com/akillmer/shopify-theme-sync-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244236105,"owners_count":20420752,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["browsersync","shopify","webpack"],"created_at":"2025-03-18T23:52:39.379Z","updated_at":"2025-03-18T23:52:39.997Z","avatar_url":"https://github.com/akillmer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shopify Theme Sync Plugin\n\n_**NB:** This `webpack` plugin is not officially endorsed, sponsored, or provided by Shopify Inc._\n\n`ShopifyThemeSyncPlugin` helps keep your new theme perfectly in sync with your Shopify store during active development. It uses [Browsersync](https://browsersync.io) to watch for file changes and to provide live reloading. [Shopify's Theme Kit](https://shopify.github.io/themekit/) is used to push these changes directly to your store \u0026mdash; `theme` must be available on your `$PATH` and have [API access to your store](https://shopify.github.io/themekit/#get-api-access).\n\n## Getting Started\n\nInstall `browser-sync` (2.18.8 or higher) if you're not using it already.\n\n```\nnpm install browser-sync shopify-theme-sync-plugin --save-dev\n```\n\n\u0026mdash; _or_ \u0026mdash;\n\n```\nyarn add browser-sync shopify-theme-sync-plugin --dev\n```\n\nMake sure that `theme` from [Shopify's Theme Kit](https://shopify.github.io/themekit/) is available on your `$PATH` and has [access to your store's API](https://shopify.github.io/themekit/#get-api-access).\n\n### webpack.config.js\n\n```javascript\nconst ShopifyThemeSyncPlugin = require('shopify-theme-sync-plugin');\n\nmodule.exports = {\n  // ...\n  plugins: [\n    new ShopifyThemeSyncPlugin({\n      storeUrl: 'https://[your-store-url]',\n    }),\n  ],\n};\n```\n\n### Run `webpack --watch`\n\nYou access your store via Browsersync's proxy at `https://localhost:3000` (default). Browsersync's UI can also be accessed at `http://localhost:3001` (default). Any changes you make to the contents of your theme's directories will trigger Browsersync to reload all connected browsers, but only after the changes have been pushed to Shopify via `theme`.\n\nMake sure to configure `webpack` to use `assets/` as its output directory.\n\n## Proxying Shopify Store URLs\n\nThe only configuration required is `storeUrl`, so that Browsersync's proxy can function. This plugin's behavior will depend on which of the two acceptable Shopify URLs you provide.\n\n### https://*.myshopify.com\n\nThis URL is used to access your _live_ Shopify store. Browsersync's proxy will insert its snippet right before `\u003c/body\u003e` (default behavior).\n\n### https://*.shopifypreview.com\n\nIt's ideal to [create and use a theme preview link](https://help.shopify.com/en/manual/using-themes/adding-themes#share-a-theme-preview-with-others) for any unpublished theme during development. With this link, however, Shopify will insert an `iframe` for its _Preview Bar_ at the bottom of each page. Due to Browsersync's proxy this _Preview Bar_ will not always function properly, it may even throw errors. In response this plugin will prevent the _Preview Bar_ from initializing and Browsersync's snippet will be inserted into the document's `\u003chead\u003e` instead.\n\n## Watched Directories\n\n`ShopifyThemeSyncPlugin` will only watch directories that Shopify supports for [developing theme templates](https://shopify.dev/tutorials/develop-theme-templates). The plugin will ignore subdirectories, besides `templates/customers`, because Shopify doesn't allow new subdirectories to be created anyway.\n\nThese are the directories that are watched:\n\n- `assets`\n- `config`\n- `layout`\n- `locales`\n- `sections`\n- `snippets`\n- `templates`\n  - `customers`\n\n## Configuration Options\n\nThe only required configuration is `storeUrl` , but you can also pass these configuration options:\n\n|     Name      |    Type    |    Default    | Description                                                                                                                                                                                                                                                               |\n| :-----------: | :--------: | :-----------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n|  `storeUrl`   | `{String}` |    \u0026mdash;    | Required. Points to your live Shopify store or theme preview.                                                                                                                                                                                                             |\n|    `port`     | `{Number}` |    `3000`     | Use a specific port with Browsersync.                                                                                                                                                                                                                                     |\n|     `env`     | `{String}` | `development` | Specify which [theme environment](https://shopify.github.io/themekit/commands/#using-environments) you're syncing with.                                                                                                                                                   |\n|    `delay`    | `{Number}` |    `2000`     | Time, in milliseconds, before your browser is instructed to reload. A default duration of two seconds should give Shopify enough time to have your new assets available for loading. If the duration is set too low then you will need to manually reload to see changes. |\n| `browsersync` | `{Object}` |     `{}`      | Pass along any [Browsersync options](https://www.browsersync.io/docs/option) to be used for its initialization. This will overwrite any configuration options that was provided by the plugin.                                                                            |\n\nHere's an example `webpack` config showing how to use these options:\n\n### webpack.config.js\n\n```javascript\n{\n  // ...\n  plugins: [\n    new ShopifyThemeSyncPlugin({\n      storeUrl: 'https://some-id.shopifypreview.com',\n      port: 8080,\n      env: 'production',\n      delay: 500,\n      browsersync: {\n        ui: false,\n        logLevel: 'silent',\n        ignore: ['*.json'],\n      },\n    },\n  ],\n}\n```\n\n## Invalid Security Certificates\n\nYour web browser will warn you that your connection is _not secure_ when connecting to Browsersync's proxy over `https`. In most cases you can explicitly proceed without issue. If problems persist, such as not being able to connect over WebSockets to Browsersync, then there's a couple things you can try:\n\n- Change your `storeUrl` from `https://...` to `http://...`\n- Configure your browser to allow mixed content from the proxy server\n- Explicitly enable `https` with Browsersync: `{ browsersync: { https: true } }`\n\nIf you're still having issues then please create a new issue so we can figure it out together.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakillmer%2Fshopify-theme-sync-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakillmer%2Fshopify-theme-sync-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakillmer%2Fshopify-theme-sync-plugin/lists"}