This is a starter Shopify 2.0 Theme using
- Tailwind CSS for styling
- JSON templates
- Alpine js for navigation state changes, it's much lighter than using something like Vue.
-
First you need to have Shopify ClI installed requires Ruby 2.7 or higher Install Shopify Cli
-
You will need a Shopify partner account
-
In the Shopify Admin set up your development store
-
Note you will eventually have to add products in store admin.
-
Once you have your development environment setup you will need to initialize a new theme with the following Shopify ClI command
shopify theme init [ NAME OF YOUR THEME ] --clone-url https://github.com/Ongomobile/ShopifyStarter.git-
Run npm install to install dependencies
-
Next you will need to log into you Shopify Store on the command line
shopify login --store store-name.myshopify.com-
It will open a browser window follow prompts to login
-
Next run
shopify theme serve-
After theme serve runs it will have a section in terminal with links to
-
A local url this is where you view the local theme
-
The theme editor for this theme
-
A preview link for this theme. Note this is not the local them unless it's published, by default the Dawn theme is published by default.
-
Note the first time you go to the preview url shown in the terminal you will need to enter the password you can find it by going to the shopify admin page for your development store, click on online store in left pannel and you will see see store password button at the top of page.
-
If you have trouble with theme serve command you may need Log out shopify admin in browser & shopify cli then log in your-store.myshopify.com/admin & login with cli shopify login --store your-store.myshopify.com & finally run shopify theme serve again
- Tailwind Docs
- To watch & compile Tailwind in this theme you will need to open another terminal and run
npx tailwindcss -i ./src/tailwind.css -o ./assets/application.css --watch