├── sections ├── .gitkeep ├── footer-group.json ├── navigation.liquid ├── footer.liquid ├── navigation-group.json ├── accordions.liquid └── announcement-bar.liquid ├── templates ├── 404.liquid ├── blog.liquid ├── cart.liquid ├── page.liquid ├── search.liquid ├── article.liquid ├── collection.liquid ├── gift_card.liquid ├── password.liquid ├── product.liquid ├── customers │ ├── login.liquid │ ├── order.liquid │ ├── account.liquid │ ├── addresses.liquid │ ├── register.liquid │ ├── activate_account.liquid │ └── reset_password.liquid ├── list-collections.liquid ├── page.contact.liquid └── index.liquid ├── locales └── en.default.json ├── .gitignore ├── config ├── settings_data.json └── settings_schema.json ├── postcss.config.js ├── src └── entrypoints │ ├── theme.css │ └── theme.js ├── tailwind.config.js ├── .shopifyignore ├── snippets ├── accordion.liquid └── vite-tag.liquid ├── README.md ├── vite.config.js ├── package.json └── layout └── theme.liquid /sections/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/404.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/blog.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/cart.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/page.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/search.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/article.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/collection.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/gift_card.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/password.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/product.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /locales/en.default.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /templates/customers/login.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/customers/order.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/list-collections.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/page.contact.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/customers/account.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/customers/addresses.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/customers/register.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/customers/activate_account.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/customers/reset_password.liquid: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /templates/index.liquid: -------------------------------------------------------------------------------- 1 | {{ content_for_index }} 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | ._* 3 | .Trashes 4 | node_modules 5 | assets/manifest.json 6 | assets/theme.* -------------------------------------------------------------------------------- /config/settings_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "current": "Default", 3 | "presets": { 4 | "Default": {} 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /src/entrypoints/theme.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | [x-cloak] { display: none !important; } -------------------------------------------------------------------------------- /src/entrypoints/theme.js: -------------------------------------------------------------------------------- 1 | import "vite/modulepreload-polyfill"; 2 | import Alpine from 'alpinejs'; 3 | 4 | window.Alpine = Alpine; 5 | 6 | Alpine.start(); -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: ["./**/*.liquid", "./src/**/*.js"], 4 | theme: { 5 | extend: {}, 6 | }, 7 | plugins: [], 8 | }; 9 | -------------------------------------------------------------------------------- /sections/footer-group.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Footer", 3 | "type": "footer", 4 | "sections": { 5 | "footer": { 6 | "type": "footer", 7 | "settings": { 8 | } 9 | } 10 | }, 11 | "order": [ 12 | "footer" 13 | ] 14 | } -------------------------------------------------------------------------------- /.shopifyignore: -------------------------------------------------------------------------------- 1 | .gitignore 2 | .prettierignore 3 | .prettierrc.json 4 | .theme-check.yml 5 | .vscode/ 6 | .git/ 7 | .github/ 8 | src/ 9 | vite.config.js 10 | tailwind.config.js 11 | jsconfig.json 12 | postcss.config.js 13 | package.json 14 | package-lock.json 15 | node_modules 16 | *.md 17 | -------------------------------------------------------------------------------- /sections/navigation.liquid: -------------------------------------------------------------------------------- 1 |
2 |
3 | {% for link in linklists.main-menu.links %} 4 | {{ link.title }} 5 | {% endfor %} 6 |
7 |
-------------------------------------------------------------------------------- /config/settings_schema.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "theme_info", 4 | "theme_name": "Boilerplate", 5 | "theme_version": "1.0.0", 6 | "theme_author": "THEME_AUTHOR", 7 | "theme_documentation_url": "https://THEME_DOCUMENTATION_URL.com/", 8 | "theme_support_url": "https://THEME_SUPPORT_URL.com/" 9 | } 10 | ] 11 | -------------------------------------------------------------------------------- /snippets/accordion.liquid: -------------------------------------------------------------------------------- 1 |
5 |
9 |

{{ title }}

10 |

11 |
12 |
{{ content }}
13 |
-------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Sholpine 2 | 3 | Sholpine is a boiler plate of Alpine.js and Tailwind for Shopify themes. AlpineJs is a great alternative to the likes of jQuery, and fits Shopify Liquid's templating very well. Sholpine is perfect for building modern Shopify themes. 4 | 5 | ## Installation 6 | 1. Create a template from this repo. 7 | 2. Run `npm install`. 8 | 3. Run `npm run dev` to start development. 9 | 10 | ## Production 11 | 1. Run `npm run build` to build production files. 12 | -------------------------------------------------------------------------------- /sections/footer.liquid: -------------------------------------------------------------------------------- 1 |
2 |
3 | {% for link in linklists.footer.links %} 4 | {{ link.title }} 5 | {% endfor %} 6 |
7 |
8 |
9 |
10 |

Copyright @ This Store

11 |

|

12 |

Website By My Company

13 |
14 |
-------------------------------------------------------------------------------- /sections/navigation-group.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Navigation", 3 | "type": "header", 4 | "sections": { 5 | "announcement-bar": { 6 | "type": "announcement-bar", 7 | "blocks": { 8 | "1": { 9 | "type": "announcement", 10 | "settings": { 11 | "text": "This is a test announcement", 12 | "link": "" 13 | } 14 | } 15 | }, 16 | "block_order": [ 17 | "1" 18 | ], 19 | "settings": { 20 | } 21 | }, 22 | "navigation": { 23 | "type": "navigation", 24 | "settings": { 25 | } 26 | } 27 | }, 28 | "order": [ 29 | "announcement-bar", 30 | "navigation" 31 | ] 32 | } -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import shopify from "vite-plugin-shopify"; 3 | import cleanup from '@by-association-only/vite-plugin-shopify-clean'; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | cleanup(), 8 | shopify({ 9 | sourceCodeDir: 'src', 10 | entrypointsDir: 'src/entrypoints' 11 | }) 12 | ], 13 | build: { 14 | rollupOptions: { 15 | output: { 16 | entryFileNames: "[name].[hash].min.js", 17 | chunkFileNames: "[name].[hash].min.js", 18 | assetFileNames: "[name].[hash].min[extname]", 19 | }, 20 | }, 21 | }, 22 | }); 23 | -------------------------------------------------------------------------------- /snippets/vite-tag.liquid: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | IMPORTANT: This snippet is automatically generated by vite-plugin-shopify. 3 | Do not attempt to modify this file directly, as any changes will be overwritten by the next build. 4 | {% endcomment %} 5 | {% assign path = vite-tag | replace: '~/', '../' | replace: '@/', '../' %} 6 | {% if path == "/src/entrypoints/theme.css" or path == "theme.css" %} 7 | {{ 'theme.e406f2b7.min.css' | asset_url | split: '?' | first | stylesheet_tag: preload: preload_stylesheet }} 8 | {% elsif path == "/src/entrypoints/theme.js" or path == "theme.js" %} 9 | 10 | {% endif %} 11 | -------------------------------------------------------------------------------- /sections/accordions.liquid: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | {%- for block in section.blocks -%} 5 | {% 6 | render 'accordion', 7 | title: block.settings.title, 8 | content: block.settings.content, 9 | background_color: 'white' 10 | %} 11 | {%- endfor -%} 12 |
13 |
14 |
15 | 16 | {% schema %} 17 | { 18 | "name": "Accordions", 19 | "settings": [], 20 | "max_blocks": 12, 21 | "blocks": [ 22 | { 23 | "type": "accordion", 24 | "name": "Accordion", 25 | "settings": [ 26 | { 27 | "type": "text", 28 | "id": "title", 29 | "label": "Title" 30 | }, 31 | { 32 | "type": "textarea", 33 | "id": "content", 34 | "label": "content" 35 | } 36 | ] 37 | } 38 | ], 39 | "presets": [ 40 | { 41 | "name": "Accordions" 42 | } 43 | ] 44 | } 45 | {% endschema %} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sholpine", 3 | "version": "1.0.0", 4 | "description": "A Shopify Liquid boilerplate, using Alpine.js and Tailwind", 5 | "repository": { 6 | "type": "git", 7 | "url": "https://github.com/owainjones74/sholpine" 8 | }, 9 | "keywords": [], 10 | "scripts": { 11 | "dev": "concurrently --raw --kill-others --passthrough-arguments \"npm run shopify:dev {@}\" \"npm run vite:dev\" --", 12 | "shopify:dev": "shopify theme dev --theme-editor-sync", 13 | "vite:dev": "vite", 14 | "build": "vite build" 15 | }, 16 | "dependencies": { 17 | "@alpinejs/collapse": "^3.13.3", 18 | "@by-association-only/vite-plugin-shopify-clean": "^1.1.0", 19 | "@shopify/prettier-plugin-liquid": "^1.3.4", 20 | "alpinejs": "^3.13.2", 21 | "autoprefixer": "^10.4.16", 22 | "concurrently": "^8.2.2", 23 | "postcss": "^8.4.31", 24 | "prettier": "^3.0.3", 25 | "prettier-plugin-tailwindcss": "^0.5.6", 26 | "tailwindcss": "^3.3.5", 27 | "vite": "^4.5.0", 28 | "vite-plugin-shopify": "^2.2.1" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /sections/announcement-bar.liquid: -------------------------------------------------------------------------------- 1 | {%- for block in section.blocks -%} 2 |
3 |
4 | 9 | {{ block.settings.text }} 10 | 11 |
12 |
13 | {%- endfor -%} 14 | 15 | {% schema %} 16 | { 17 | "name": "Announcement Bar", 18 | "max_blocks": 6, 19 | "blocks": [ 20 | { 21 | "type": "announcement", 22 | "name": "Announcement", 23 | "settings": [ 24 | { 25 | "type": "text", 26 | "id": "text", 27 | "default": "This is the announcement!", 28 | "label": "Announcement Text" 29 | }, 30 | { 31 | "type": "url", 32 | "id": "link", 33 | "label": "Announcement Link (Optional)" 34 | } 35 | ] 36 | } 37 | ], 38 | "default": { 39 | "blocks": [ 40 | { 41 | "type": "announcement" 42 | } 43 | ] 44 | } 45 | } 46 | {% endschema %} -------------------------------------------------------------------------------- /layout/theme.liquid: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | {{ shop.name }} 30 | 31 | {%- liquid 32 | render 'vite-tag' with 'theme.css' 33 | render 'vite-tag' with 'theme.js' 34 | -%} 35 | 36 | {{ content_for_header }} 37 | 38 | 39 | 40 | {% sections 'navigation-group' %} 41 | 42 | {{ content_for_layout }} 43 | 44 | {% sections 'footer-group' %} 45 | 46 | 47 | --------------------------------------------------------------------------------