{"id":13477854,"url":"https://github.com/VienDinhCom/shopify-theme-customizer","last_synced_at":"2025-03-27T06:30:57.285Z","repository":{"id":48818993,"uuid":"368039907","full_name":"VienDinhCom/shopify-theme-customizer","owner":"VienDinhCom","description":"🛍  An effective development tool for customizing existing Shopify themes. It's built with Gulp, Theme Kit, Theme Check, LiveReload, ... and Passion.","archived":true,"fork":false,"pushed_at":"2021-07-14T11:47:23.000Z","size":153,"stargazers_count":9,"open_issues_count":1,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-21T11:51:28.451Z","etag":null,"topics":["eslint","gulp","javascript","liquid","livereload","prettier","sass","shopify","shopify-theme","shopify-theme-check","shopify-theme-customizer","shopify-theme-kit","vscode","vscode-extension"],"latest_commit_sha":null,"homepage":"","language":"Liquid","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/VienDinhCom.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":"2021-05-17T03:07:31.000Z","updated_at":"2023-12-28T09:30:36.000Z","dependencies_parsed_at":"2022-09-12T15:30:25.624Z","dependency_job_id":null,"html_url":"https://github.com/VienDinhCom/shopify-theme-customizer","commit_stats":null,"previous_names":["maxvien/shopify-theme-customizer"],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fshopify-theme-customizer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fshopify-theme-customizer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fshopify-theme-customizer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fshopify-theme-customizer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VienDinhCom","download_url":"https://codeload.github.com/VienDinhCom/shopify-theme-customizer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245797300,"owners_count":20673829,"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":["eslint","gulp","javascript","liquid","livereload","prettier","sass","shopify","shopify-theme","shopify-theme-check","shopify-theme-customizer","shopify-theme-kit","vscode","vscode-extension"],"created_at":"2024-07-31T16:01:48.527Z","updated_at":"2025-03-27T06:30:56.959Z","avatar_url":"https://github.com/VienDinhCom.png","language":"Liquid","funding_links":[],"categories":["Liquid"],"sub_categories":[],"readme":"# 🛍 Shopify Theme Customizer\n\nAn effective development tool for customizing existing Shopify themes. It's built with [Gulp](https://gulpjs.com/), [LiveReload](http://livereload.com/), [Shopify Theme Kit](https://github.com/Shopify/themekit), [Shopify Theme Check](https://shopify.dev/themes/tools/theme-check), [ESlint](https://eslint.org/), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode), ... and [Passion](https://www.urbandictionary.com/define.php?term=Passion).\n\n\u003e I archived this project and moved the code to this [repository](https://github.com/Maxvien/bootstrap-shopify-theme). You also can find new updates there.\n\n\n## Experience\n\nThese are my experience when I have been working on this tool:\n\n- Using [Gulp](https://gulpjs.com/) to Automate \u0026 Enhance the Development Workflow.\n- Using [Parcel](https://parceljs.org/) to Bundle all SCSS, JavaScript, Font, Image, ... Assets.\n- Using [LiveReload](http://livereload.com/) to Reload the Browser Automatically When Saving the Files.\n- Using [PostCSS](https://postcss.org/) to Make CSS Code Compatible with Old Browsers.\n- Using [CoreJS](https://github.com/zloirock/core-js) to Make JavaScript Code Compatible with Old Browsers.\n- Using [Shopify Theme Check](https://shopify.dev/themes/tools/theme-check), [ESlint](https://eslint.org/) to Follow Theme Best Practices.\n- Using [Shopify Theme Kit](https://github.com/Shopify/themekit) to Download, Develop and Deploy the Themes.\n- Using [Shopify Liquid](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode) \u0026 [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode) Visual Studio Code Extensions to Format the Source Code.\n\nIf you like this project, hit the **STAR** button to bookmark it ⭐️\n\n## Installation\n\nClone the source code into your computer.\n\n```bash\ngit clone https://github.com/maxvien/shopify-theme-customizer.git\n```\n\nInstall the project's dependencies.\n\n```bash\nyarn install\n```\n\n## Configuration\n\nTo config the project, you need to copy and rename the `config.yml.example` file to the `config.yml` file. Then update the `store`, `password`, `theme_id` properties.\n\nThere are sections in the `config.yml` file:\n\n- The `development` section is for your **development** branch.\n- The `production` section is for your **production** branch.\n- The `feature` section is for your **feature** branch.\n\n```yml\ndevelopment:\n  store: store-name.myshopify.com\n  password: store-admin-api-password\n  theme_id: store-theme-id\n\nproduction:\n  store: store-name.myshopify.com\n  password: store-admin-api-password\n  theme_id: store-theme-id\n\nfeature:\n  store: store-name.myshopify.com\n  password: store-admin-api-password\n  theme_id: store-theme-id\n```\n\n### Store Property\n\nTo fill the `store` property, you copy your store's **hostname** and paste it to the `config.yml` file.\n\n### Password Property\n\nTo fill the `password` property, please follow these steps:\n\n1. From your Shopify admin, click **Apps**.\n2. Near the bottom of the page, click **Manage private apps**.\n3. If private app development is disabled, then click **Enable private app development**. Only the store owner can [enable private app development](https://help.shopify.com/en/manual/apps/private-apps?#enable-private-app-development-from-the-shopify-admin).\n4. Click **Create new private app**.\n5. In the **App details** section, fill out the app name and your email address.\n6. In the **Admin API** section, click **Show inactive Admin API permissions**.\n7. Scroll to the **Themes** section and select **Read and write** from the dropdown.\n8. Click **Save**.\n9. Read the private app confirmation dialog, then click **Create app**.\n10. In the **Admin API** section of the **App**, copy the **password** and paste it into the `config.yml` file.\n\n### Theme ID Property\n\nTo fill the `theme_id` property, please follow these steps:\n\n1. From your Shopify admin, click **Online Store**.\n2. At the top of the **Online Store** menu, click **Themes**.\n3. In the **Current theme** section, click **Actions** and select **Duplicate** to backup your current theme.\n4. Next, click the **Customize** button.\n5. There is a link like this `https://store-name.myshopify.com/admin/themes/[theme_id]/editor` on your browser's address bar. Copy the **theme_id** and paste it into the `config.yml` file.\n\n## Usage\n\nTo work with theme, you need to follow the [**Configuration**](#configuration) section to config the `environments` in the `config.yml` file. The default environment is `development`.\n\n### Get\n\n```bash\nyarn get --env=environment\n```\n\n### Watch\n\n```bash\nyarn watch --env=environment\n```\n\nTo enable LiveReload, you need to install the [LiveReload](http://livereload.com/extensions/) extension on your browser.\n\n### Deploy\n\n```bash\nyarn deploy --env=environment\n```\n\n### Download\n\n```bash\nyarn download --env=environment --file=[your theme file]\n```\n\nFor example, you can run this command to download the `config/settings_data.json` file\n\n```bash\nyarn download --env=production --file=config/settings_data.json\n```\n\n### Lint\n\nFirst of all, you need to install [Shopify CLI](https://shopify.dev/apps/tools/cli/installation). Then you can run this command to analyze your code to find problems.\n\n```bash\nyarn lint\n```\n\nAutomatically fix problems\n\n```bash\nyarn lint --fix\n```\n\n### Open\n\n```bash\nyarn open --env=environment\n```\n\n### Build\n\n```bash\nyarn build\n```\n\n## Visual Studio Code Extensions\n\nTo speed up your productivity, you can install these extensions:\n\n- [Eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)\n- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n- [Shopify Liquid](https://marketplace.visualstudio.com/items?itemName=Shopify.theme-check-vscode)\n- [IntelliSense for CSS](https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion)\n- [Material Icon Theme](https://marketplace.visualstudio.com/items?itemName=PKief.material-icon-theme)\n- [Visual Studio IntelliCode](https://marketplace.visualstudio.com/items?itemName=VisualStudioExptTeam.vscodeintellicode)\n\n## Related Projects\n\n- **[Next Shopify Storefront](https://github.com/Maxvien/next-shopify-storefront)** • A real-world Shopping Cart built with TypeScript, NextJS, React, Redux, Apollo Client, Shopify Storefront GraphQL API, ... and Material UI.\n- **[Bootstrap Shopify Theme](https://github.com/Maxvien/bootstrap-shopify-theme)** • A free Shopify Theme built with Bootstrap, BEM, Theme Tools, Swiper, Gulp, Parcel, Liquid, SASS, PostCSS, ESNext, ... and Passion.\n- **[Shopify Data Faker](https://github.com/Maxvien/shopify-data-faker)** • A Shopify development tool for generating dummy store data.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVienDinhCom%2Fshopify-theme-customizer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FVienDinhCom%2Fshopify-theme-customizer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FVienDinhCom%2Fshopify-theme-customizer/lists"}