https://github.com/javigong/shopify-theme
Creating a Shopify theme for an Online Store 2.0 (JSON Templates) using Shopify CLI, Liquid, & TailwindCSS
https://github.com/javigong/shopify-theme
liquid-templating-engine shopify-cli shopify-theme tailwindcss
Last synced: 24 days ago
JSON representation
Creating a Shopify theme for an Online Store 2.0 (JSON Templates) using Shopify CLI, Liquid, & TailwindCSS
- Host: GitHub
- URL: https://github.com/javigong/shopify-theme
- Owner: javigong
- Created: 2022-10-04T23:07:39.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-10-21T02:38:56.000Z (over 3 years ago)
- Last Synced: 2025-01-26T08:15:16.462Z (over 1 year ago)
- Topics: liquid-templating-engine, shopify-cli, shopify-theme, tailwindcss
- Language: CSS
- Homepage:
- Size: 386 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# How To Create a Shopify Theme
Creating a Shopify theme for an Online Store 2.0 (JSON Templates) using Shopify CLI, Liquid, & TailwindCSS.
## Initial Theme Setup
- Create a basic theme structure:
`shopify theme init ThemeName --clone-url RepositoryThemeUrl`
- Login Shopify Store:
`shopify login --store UrlOfShopifyStoreAdmin`
- Select partner organization
- Update/Sync theme to your development store
`shopify theme serve`
## Tailwind CSS 2.2.7 setup
- Check if you are logged in
`shopify whoami`
- Update/Sync theme to your development store
`shopify theme serve`
- Initialize npm package manager
`npm init -y`
- Install Tailwind CSS
`npm install -D tailwindcss postcss autoprefixer`
- Create a new postcss.config.js file adding the following code
```jsx
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
```
- Initialize tailwind.config.js
`npx tailwindcss init`
- Create new folder src
- Create new file src/tailwind.css injecting the following tailwind features
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Delete /assets/application.css.liquid file
- Setup the Tailwind input and output css files
`npx tailwindcss -i ./src/tailwind.css -o ./assets/application.css`
- Edit layout/theme.liquid file adding this code to the header
```liquid
{{ content_for_header }}
{{ 'application.css' | asset_url | stylesheet_tag }}
```
## Tailwind CSS 3.0 setup
- Check if you are logged in
`shopify whoami`
- Update/Sync theme to your development store
`shopify theme serve`
- Initialize npm package manager
`npm init -y`
- Install Tailwind CSS
`npm install -D tailwindcss postcss autoprefixer`
- Create a new postcss.config.js file adding the following code
```jsx
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
```
- Initialize tailwind.config.js
`npx tailwindcss init`
- Add the following code to tailwind.config.js
```js
module.exports = {
content: [
"./assets/*.liquid",
"./layout/*.liquid",
"./sections/*.liquid",
"./snippets/*.liquid",
"./templates/*.liquid",
"./templates/**/*.liquid",
// you can also directly select all the liquid and json files
// "./**/*.{liquid,json}",
],
theme: {
extend: {},
},
plugins: [],
};
```
- Create new folder src
- Create new file src/tailwind.css injecting the following tailwind utility classes
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
- Delete /assets/application.css.liquid file
- Setup the Tailwind input and output css files with the utility classes with the watch flag
`npx tailwindcss -i ./src/tailwind.css -o ./assets/application.css --watch`
- Edit layout/theme.liquid file adding this code to the header
```liquid
{{ content_for_header }}
{{ 'application.css' | asset_url | stylesheet_tag }}
```
## JSON Templates
https://shopify.dev/themes/architecture/templates/json-templates