The best Structure for Shopify Projects

Initially, after we start creating the project in Shopify, we create an API that allows us to communicate the project file locally. We do this through the Themekit platform.

ThemeKit is a cross-platform command-line tool that you can use to build Shopify themes. Through this platform, we take the project locally and connect it to the API that we create in the project’s Private app.

To download a specific theme, and create the config.yml file that connects this theme with a local version in the directory you just created, run the following command:

Terminal

theme get --password=[your-password] --store="[your-store.myshopify.com]" --themeid=[your-theme-id]

Once the project is downloaded in the local version, we create a Repository on Github and also link it to the previous project. The reason we do this is that Github enables us to back up Files for any changes we have made. The advantage of this is that through Github, more than two people at a time can work, where there can be no file conflict and where the work of each can be easily managed.

From the moment we start the project locally, we first need to install the package manager for the Node JavaScript platform, where this platform places all the modules so that the node can find them and manage the conflicts.

Terminal

npm init

npm i

Once we have installed the NPM platform, we continue with The theme watch command instructs ThemeKit, to check for any changes made to your local files. This procedure automatically pushes changes to your theme in the connected Shopify store.

Terminal

theme watch –allow-live

After we have created the project in Shopify and also connected it to Github, we start installing some frameworks that we use in many projects which enables us to work easier and with professionalism. Additionally, these frameworks enable you to best facilitate your work, which will surely affect your time-saving. Some of them are:

· Tailwind CSS
· Alpine JS
· Swiper JS.

All these frameworks are installed with a very simple command by adding only the word “npm install”, prior to the things we want to install, e.g.:

Terminal

npm install tailwindcss

npm install alpinejs

npm install swiper

Correspondingly, in each project we install Webpackmix, this enables us to create a file called “webpack.mix.js”, this way we can build all CSS files in one, and also all files of JavaScript in a single file. A webpack.mix.js file might look like this:

Examples: in the mix.styles section we have decided that all CSS files ex: application.css, custom.css, and swiper-bundles.min.css be processed into a single file called “main.css”.

The same goes for mix.scripts where we have built all the JavaScript files into a single file called “main.js”. Why we use this method is another reason to boost SEO page health score, performance, page speed, and also the code is more legible and easier to edit.

If you want to know more about e-commerce development platforms or apps, read our blog posts for Shopify and Shopware. Our dedicated outsourcing team can be your collaborator in ecommerce.