{"id":15180403,"url":"https://github.com/viendinhcom/bootstrap-shopify-theme","last_synced_at":"2026-04-07T04:31:31.269Z","repository":{"id":47610792,"uuid":"348215722","full_name":"VienDinhCom/bootstrap-shopify-theme","owner":"VienDinhCom","description":"A responsive Shopify theme using Bootstrap, BEM, Liquid, Sass, ESNext, Theme Tools, and Webpack for flexibility.","archived":false,"fork":false,"pushed_at":"2025-03-22T04:31:37.000Z","size":980,"stargazers_count":153,"open_issues_count":0,"forks_count":124,"subscribers_count":4,"default_branch":"v1","last_synced_at":"2025-03-27T06:34:51.953Z","etag":null,"topics":["bem","bootstrap","bootstrap-shopify-theme","eslint","javascipt","liquid","postcss","sass","shopify","shopify-theme","shopify-theme-check","shopify-theme-cli","shopify-theme-development","shopify-theme-scripts","shopify-themes","stylelint","swiper","theme","webpack","webpack-encore"],"latest_commit_sha":null,"homepage":"https://github.com/maxvien/bootstrap-shopify-theme#demonstration","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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-03-16T04:41:09.000Z","updated_at":"2025-03-26T01:25:33.000Z","dependencies_parsed_at":"2025-03-20T03:45:43.651Z","dependency_job_id":null,"html_url":"https://github.com/VienDinhCom/bootstrap-shopify-theme","commit_stats":null,"previous_names":["maxvien/shopify-base-theme","maxvien/bootstrap-shopify-theme"],"tags_count":33,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fbootstrap-shopify-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fbootstrap-shopify-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fbootstrap-shopify-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/VienDinhCom%2Fbootstrap-shopify-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/VienDinhCom","download_url":"https://codeload.github.com/VienDinhCom/bootstrap-shopify-theme/tar.gz/refs/heads/v1","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247608150,"owners_count":20965952,"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":["bem","bootstrap","bootstrap-shopify-theme","eslint","javascipt","liquid","postcss","sass","shopify","shopify-theme","shopify-theme-check","shopify-theme-cli","shopify-theme-development","shopify-theme-scripts","shopify-themes","stylelint","swiper","theme","webpack","webpack-encore"],"created_at":"2024-09-27T16:04:50.430Z","updated_at":"2026-04-07T04:31:31.252Z","avatar_url":"https://github.com/VienDinhCom.png","language":"Liquid","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 🛍 Bootstrap Shopify Theme\n\nA free [**Shopify Theme**](https://github.com/maxvien/bootstrap-shopify-theme) built with [**Bootstrap**](https://getbootstrap.com/), [BEM](http://getbem.com/), [Liquid](https://shopify.github.io/liquid/), [Sass](https://sass-lang.com/), [ESNext](https://en.wikipedia.org/wiki/ECMAScript#ES.Next), [Theme Tools](https://shopify.dev/tools/themes), ... and [Webpack](https://webpack.js.org/).\n\n---\nDiscover [Next Shopify Storefront](https://github.com/VienDinhCom/next-shopify-storefront)—A modern Shopping Cart built with ESMate, Next.js, React.js, ShadCN, ESLint, Prettier, GraphQL, and Shopify Hydrogen.\n---\n\n## Experience\n\nWhen I started building this Shopify theme, I thought it would be simple. But as I got deeper, I realized there was more to it.\n\nI build themes from scratch, using [Bootstrap](https://getbootstrap.com/) to create a clean, user-friendly interface. I follow the [BEM Methodology](http://getbem.com/), which helps keep my code minimal and reusable.\n\nI work with [Liquid](https://shopify.github.io/liquid/), [SASS](https://sass-lang.com/), [ESNext](https://en.wikipedia.org/wiki/ECMAScript#ES.Next) to keep the theme modern and flexible. When problems arise, [Shopify Theme Scripts](https://github.com/Shopify/theme-scripts) help me solve them faster. I also use [Shopify Metafield](https://shopify.dev/docs/admin-api/rest/reference/metafield) to add extra details where needed.\n\nFor visuals, I rely on [Swiper](https://swiperjs.com/) to create smooth, touch-friendly sliders and [CSS Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) to ensure a responsive, mobile-first design.\n\nTo streamline development, I use the [Shopify Theme CLI](https://shopify.dev/themes/tools/cli) for deployment and [Webpack Encore](https://github.com/symfony/webpack-encore) to bundle assets. [PostCSS](https://postcss.org/) and [CoreJS](https://github.com/zloirock/core-js) help keep the theme compatible with older browsers.\n\nAnd of course, I follow best practices with [Shopify Theme Check](https://shopify.dev/themes/tools/theme-check), [ESlint](https://eslint.org/), [Stylelint](https://stylelint.io/), [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)—because clean code makes everything easier.\n\nIt’s a process. A learning curve. But in the end, it’s about crafting themes that work beautifully—for both the store owner and the customer.\n\nIf you like this project, hit the **STAR** button to bookmark it ⭐️\n\n## Demonstration\n\n- **Store Link**: https://maxvien-bootstrap.myshopify.com\n- **Store Password**: `maxvien`\n\n## Installation\n\nClone the source code into your computer.\n\n```bash\ngit clone https://github.com/VienDinhCom/bootstrap-shopify-theme.git\n```\n\n**This project was developed with Node 18 and NPM 10.**\u003cbr\u003e\n\nTo set up a compatible environment, please download [Volta](https://github.com/volta-cli/volta) and run `volta setup`.\n\nThen, install the project's dependencies.\n\n```bash\nnpm install\n```\n\n## Usage\n\nFirst of all, you need to install [Shopify CLI](https://shopify.dev/apps/tools/cli/installation) and login into your online store.\n\n```bash\nshopify login --store=your-store.myshopify.com\n```\n\nThen you can run the below commands to work with the theme.\n\n### Serve\n\nRun `webpack watch` and `serve` the theme in development mode.\n\n```bash\nnpm run serve\n```\n\n### Push\n\nRun `webpack build` and `push` the theme to your online store in production mode.\n\n```bash\nnpm run push\n```\n\n### Pull\n\nSafely `add` the current project files to the git staging area, then `pull` the theme from your online store, and `clean` untracked asset files.\n\n```bash\nnpm run pull\n```\n\n### Test\n\nRun unit `test` with jest and make sure the files are following the project workflow.\n\n```bash\nnpm run test\n```\n\n### Lint\n\nAnalyze the code to find problems with `shopify theme check`, `eslint`, `stylelint` and `prettier`.\n\n```bash\nnpm run lint\n```\n\nAutomatically fix problems.\n\n```bash\nnpm run fix\n```\n\n## Notes\n\n### Theme Assets\n\nAll files inside the `theme/assets` directory are ignored by `git`, except files starting with the `static` keyword in their filename.\n\n### Webpack Encore\n\n[Symfony Webpack Encore](https://symfony.com/doc/current/frontend.html) is a simpler way to integrate Webpack into your application. It wraps Webpack, giving you a clean \u0026 powerful API for bundling JavaScript modules, pre-processing CSS \u0026 JS and compiling and minifying assets. Encore gives you professional asset system that’s a delight to use.\n\nIf you want to use [React](https://symfony.com/doc/current/frontend/encore/reactjs.html) or [Vue](https://symfony.com/doc/current/frontend/encore/vuejs.html) in the theme, you can follow the documentation [here](https://symfony.com/doc/current/frontend.html).\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- [Stylelint](https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint)\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 Shopping Cart built with TypeScript, Tailwind CSS, Headless UI, Next.js, React.js, Shopify Hydrogen React,... and Shopify Storefront GraphQL API.\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%2Fbootstrap-shopify-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fviendinhcom%2Fbootstrap-shopify-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fviendinhcom%2Fbootstrap-shopify-theme/lists"}