Recently, the project wanted to build a separate site on Shopify, and found that the free theme template of the official store could not meet the needs, so I studied the source code of the free template for a few days, here is a record.

1. Register an account

First go to the official website to register an account www.shopify.com/

Enter the developer store background, create a new dedicated application, fill in the name of the dedicated application, email address, and open the template read and write permission, save, you can get the API key and password, which will be used for local modification code synchronization later.

2. Install the theme development kit

Shopify Theme Kit is a command line development Kit for Shopify Theme development. The main features of this Kit are as follows:

Upload and download theme code

Monitor local file changes and upload them automatically to Shopify and update the site in real time

Mac users can use the following installation methods:

brew tap shopify/shopify
brew install themekit
Copy the code

Windows installation mode:

choco install themekit
Copy the code

Linux installation mode:

curl -s https://shopify.github.io/themekit/scripts/install.py | sudo python
Copy the code

Note: If the Mac installation fails, use the Linux installation method

3. Create a theme or get the source code for the theme

To create a new project folder, run: theme new –password=[your-password] –store=[your-store.myshopify.com] –name=[theme name]

Note: Password is the API password mentioned above, Store is the store address you created, and name is the topic name. Remove the [] from the command

Generate the basic theme template framework locally and create a new theme on the Shopify Developer shop. Upload the local template file to the Shopify Developer shop

Theme get -p=[your-password] -s=[your-store.myshopify.com] -t=[theme ID] Theme get -p=[your-password] -s=[your-store.myshopify.com]

To get a list of store themes, run: theme get –list –password=[your-password] –store=[your-store.myshopify.com]

Local development debugging can use Theme Watch to modify code locally and synchronize it to the online store in real time

————-article over————-