├── src ├── assets │ ├── svg │ │ └── .gitkeep │ ├── favicon │ │ └── .gitkeep │ ├── fonts │ │ └── .gitkeep │ ├── images │ │ └── .gitkeep │ └── vendor │ │ ├── css │ │ └── example-vendor-styles.css │ │ └── js │ │ └── example-vendor-scripts.js ├── liquid │ ├── templates │ │ ├── index.liquid │ │ ├── customers │ │ │ ├── login.liquid │ │ │ ├── order.liquid │ │ │ ├── account.liquid │ │ │ ├── addresses.liquid │ │ │ ├── register.liquid │ │ │ ├── reset_password.liquid │ │ │ └── activate_account.liquid │ │ ├── page.liquid │ │ ├── 404.liquid │ │ ├── product.alternate.json │ │ ├── blog.liquid │ │ ├── page.contact.liquid │ │ ├── collection.list.liquid │ │ ├── collection.liquid │ │ ├── search.liquid │ │ ├── list-collections.liquid │ │ ├── gift_card.liquid │ │ ├── product.liquid │ │ ├── cart.liquid │ │ └── article.liquid │ ├── sections │ │ └── example-section.liquid │ ├── snippets │ │ ├── style-bundle.liquid │ │ ├── script-bundle.liquid │ │ └── icons │ │ │ └── icon-close.liquid │ └── layout │ │ └── theme.liquid ├── styles │ ├── layout │ │ └── theme.scss │ ├── templates │ │ ├── 404.scss │ │ ├── blog.scss │ │ ├── cart.scss │ │ ├── index.scss │ │ ├── page.scss │ │ ├── article.scss │ │ ├── collection.scss │ │ ├── gift_card.scss │ │ ├── product.scss │ │ ├── search.scss │ │ ├── collection.list.scss │ │ ├── customers │ │ │ ├── login.scss │ │ │ ├── order.scss │ │ │ ├── account.scss │ │ │ ├── addresses.scss │ │ │ ├── register.scss │ │ │ ├── reset_password.scss │ │ │ └── activate_account.scss │ │ ├── page.contact.scss │ │ ├── list-collections.scss │ │ └── apps.scss │ ├── components │ │ └── button.scss │ ├── sections │ │ └── example-section-styles.scss │ └── helpers │ │ ├── _helpers.scss │ │ ├── variables.scss │ │ └── mixins.scss ├── js │ └── bundles │ │ ├── layout │ │ └── theme.js │ │ └── templates │ │ ├── 404.js │ │ ├── blog.js │ │ ├── cart.js │ │ ├── page.js │ │ ├── index.js │ │ ├── search.js │ │ ├── article.js │ │ ├── gift_card.js │ │ ├── product.js │ │ ├── collection.js │ │ ├── page.contact.js │ │ ├── collection.list.js │ │ ├── customers │ │ ├── login.js │ │ ├── order.js │ │ ├── account.js │ │ ├── addresses.js │ │ ├── register.js │ │ ├── reset_password.js │ │ └── activate_account.js │ │ ├── list-collections.js │ │ └── apps.js ├── config │ ├── settings_data.json │ └── settings_schema.json └── locales │ └── en.default.json ├── dist ├── assets │ ├── bundle.404.js │ ├── bundle.apps.js │ ├── bundle.blog.js │ ├── bundle.cart.js │ ├── bundle.index.js │ ├── bundle.login.js │ ├── bundle.order.js │ ├── bundle.page.js │ ├── bundle.search.js │ ├── bundle.theme.js │ ├── bundle.account.js │ ├── bundle.addresses.js │ ├── bundle.article.js │ ├── bundle.collection.js │ ├── bundle.gift_card.js │ ├── bundle.product.js │ ├── bundle.register.js │ ├── bundle.404.css.liquid │ ├── bundle.activate_account.js │ ├── bundle.collection.list.js │ ├── bundle.list-collections.js │ ├── bundle.page.contact.js │ ├── bundle.reset_password.js │ ├── bundle.account.css.liquid │ ├── bundle.apps.css.liquid │ ├── bundle.article.css.liquid │ ├── bundle.blog.css.liquid │ ├── bundle.cart.css.liquid │ ├── bundle.index.css.liquid │ ├── bundle.login.css.liquid │ ├── bundle.order.css.liquid │ ├── bundle.page.css.liquid │ ├── bundle.product.css.liquid │ ├── bundle.register.css.liquid │ ├── bundle.search.css.liquid │ ├── bundle.theme.css.liquid │ ├── bundle.addresses.css.liquid │ ├── bundle.collection.css.liquid │ ├── bundle.gift_card.css.liquid │ ├── bundle.page.contact.css.liquid │ ├── bundle.activate_account.css.liquid │ ├── bundle.collection.list.css.liquid │ ├── bundle.list-collections.css.liquid │ ├── bundle.reset_password.css.liquid │ ├── example-vendor-scripts.js │ ├── example-vendor-styles.css │ └── section.example-section-styles.css ├── templates │ ├── index.liquid │ ├── customers │ │ ├── account.liquid │ │ ├── login.liquid │ │ ├── order.liquid │ │ ├── addresses.liquid │ │ ├── register.liquid │ │ ├── reset_password.liquid │ │ └── activate_account.liquid │ ├── page.liquid │ ├── 404.liquid │ ├── product.alternate.json │ ├── blog.liquid │ ├── page.contact.liquid │ ├── collection.list.liquid │ ├── collection.liquid │ ├── search.liquid │ ├── list-collections.liquid │ ├── gift_card.liquid │ ├── product.liquid │ ├── cart.liquid │ └── article.liquid ├── config │ ├── settings_data.json │ └── settings_schema.json ├── locales │ └── en.default.json ├── sections │ └── example-section.liquid ├── snippets │ ├── style-bundle.liquid │ ├── script-bundle.liquid │ └── icon-close.liquid └── layout │ └── theme.liquid ├── .gitignore ├── postcss.config.js ├── .eslintrc ├── config.yml ├── package.json ├── webpack.config.js └── README.md /src/assets/svg/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.404.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.apps.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.blog.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.cart.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.index.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.login.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.order.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.page.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.search.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.theme.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/favicon/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/fonts/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/assets/images/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.account.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.addresses.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.article.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.collection.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.gift_card.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.product.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.register.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store -------------------------------------------------------------------------------- /dist/assets/bundle.404.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.activate_account.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.collection.list.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.list-collections.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.page.contact.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.reset_password.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /dist/assets/bundle.account.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.apps.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.article.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.blog.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.cart.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.index.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.login.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.order.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.page.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.product.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.register.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.search.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.theme.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.addresses.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.collection.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.gift_card.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.page.contact.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.activate_account.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.collection.list.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.list-collections.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/assets/bundle.reset_password.css.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/templates/index.liquid: -------------------------------------------------------------------------------- 1 | {{ content_for_index }} -------------------------------------------------------------------------------- /src/liquid/templates/index.liquid: -------------------------------------------------------------------------------- 1 | {{ content_for_index }} -------------------------------------------------------------------------------- /src/styles/layout/theme.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/404.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/blog.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/cart.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/index.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/page.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/article.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/collection.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/gift_card.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/product.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/search.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /dist/assets/example-vendor-scripts.js: -------------------------------------------------------------------------------- 1 | // Example vendor script file -------------------------------------------------------------------------------- /dist/assets/example-vendor-styles.css: -------------------------------------------------------------------------------- 1 | /* Example vendor css file */ -------------------------------------------------------------------------------- /src/js/bundles/layout/theme.js: -------------------------------------------------------------------------------- 1 | import "Styles/layout/theme.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/404.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/404.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/blog.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/blog.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/cart.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/cart.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/page.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/page.scss"; -------------------------------------------------------------------------------- /src/styles/components/button.scss: -------------------------------------------------------------------------------- 1 | /* example button component scss */ -------------------------------------------------------------------------------- /src/styles/templates/collection.list.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/customers/login.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/customers/order.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/page.contact.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/js/bundles/templates/index.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/index.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/search.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/search.scss"; -------------------------------------------------------------------------------- /src/styles/templates/customers/account.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/customers/addresses.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/customers/register.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/list-collections.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/assets/vendor/css/example-vendor-styles.css: -------------------------------------------------------------------------------- 1 | /* Example vendor css file */ -------------------------------------------------------------------------------- /src/assets/vendor/js/example-vendor-scripts.js: -------------------------------------------------------------------------------- 1 | // Example vendor script file -------------------------------------------------------------------------------- /src/js/bundles/templates/article.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/article.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/gift_card.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/gift_card.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/product.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/product.scss"; -------------------------------------------------------------------------------- /src/styles/sections/example-section-styles.scss: -------------------------------------------------------------------------------- 1 | @import '../helpers/_helpers'; -------------------------------------------------------------------------------- /src/styles/templates/customers/reset_password.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /src/js/bundles/templates/collection.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/collection.scss"; -------------------------------------------------------------------------------- /src/styles/templates/customers/activate_account.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; -------------------------------------------------------------------------------- /dist/templates/customers/account.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/templates/customers/login.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/templates/customers/order.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/js/bundles/templates/page.contact.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/page.contact.scss"; -------------------------------------------------------------------------------- /src/styles/helpers/_helpers.scss: -------------------------------------------------------------------------------- 1 | @import './variables.scss'; 2 | @import './mixins.scss'; -------------------------------------------------------------------------------- /dist/templates/customers/addresses.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/templates/customers/register.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/templates/page.liquid: -------------------------------------------------------------------------------- 1 |

{{ page.title }}

2 |
{{ page.content }}
3 | -------------------------------------------------------------------------------- /src/js/bundles/templates/collection.list.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/collection.list.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/customers/login.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/customers/login.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/customers/order.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/customers/order.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/list-collections.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/list-collections.scss"; -------------------------------------------------------------------------------- /src/liquid/templates/customers/login.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/liquid/templates/customers/order.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: [ 3 | require('autoprefixer') 4 | ] 5 | } -------------------------------------------------------------------------------- /src/js/bundles/templates/customers/account.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/customers/account.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/customers/addresses.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/customers/addresses.scss"; -------------------------------------------------------------------------------- /src/js/bundles/templates/customers/register.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/customers/register.scss"; -------------------------------------------------------------------------------- /src/liquid/templates/customers/account.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/liquid/templates/customers/addresses.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/liquid/templates/customers/register.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/liquid/templates/page.liquid: -------------------------------------------------------------------------------- 1 |

{{ page.title }}

2 |
{{ page.content }}
3 | -------------------------------------------------------------------------------- /dist/assets/section.example-section-styles.css: -------------------------------------------------------------------------------- 1 | /* Example SCSS Variables */ 2 | /* SCSS Mixins */ 3 | -------------------------------------------------------------------------------- /dist/templates/customers/reset_password.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/templates/customers/activate_account.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/js/bundles/templates/customers/reset_password.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/customers/reset_password.scss"; -------------------------------------------------------------------------------- /src/liquid/templates/customers/reset_password.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/js/bundles/templates/customers/activate_account.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/customers/activate_account.scss"; -------------------------------------------------------------------------------- /src/liquid/templates/customers/activate_account.liquid: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /dist/templates/404.liquid: -------------------------------------------------------------------------------- 1 |

{{ 'general.404.title' | t }}

2 |

{{ 'general.404.subtext_html' | t }}

3 | -------------------------------------------------------------------------------- /dist/config/settings_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "current": "Default", 3 | "presets": { 4 | "Default": { } 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/config/settings_data.json: -------------------------------------------------------------------------------- 1 | { 2 | "current": "Default", 3 | "presets": { 4 | "Default": { } 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /src/liquid/templates/404.liquid: -------------------------------------------------------------------------------- 1 |

{{ 'general.404.title' | t }}

2 |

{{ 'general.404.subtext_html' | t }}

3 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "plugin:compat/recommended" 4 | ], 5 | "env": { 6 | "browser": true 7 | } 8 | } -------------------------------------------------------------------------------- /src/styles/templates/apps.scss: -------------------------------------------------------------------------------- 1 | @import 'Helpers/_helpers'; 2 | 3 | // CSS that will run on app pages that do not use Liquid templates -------------------------------------------------------------------------------- /src/js/bundles/templates/apps.js: -------------------------------------------------------------------------------- 1 | import "Styles/templates/apps.scss"; 2 | 3 | // JavaScript that will run on app pages that do not use Liquid templates -------------------------------------------------------------------------------- /dist/templates/product.alternate.json: -------------------------------------------------------------------------------- 1 | { 2 | "sections": { 3 | "example": { 4 | "type": "example-section" 5 | } 6 | }, 7 | "order": [ 8 | "example" 9 | ] 10 | } -------------------------------------------------------------------------------- /src/locales/en.default.json: -------------------------------------------------------------------------------- 1 | { 2 | "general": { 3 | "404": { 4 | "title": "Not found", 5 | "subtext_html": "The page you were looking for does not exist" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /dist/locales/en.default.json: -------------------------------------------------------------------------------- 1 | { 2 | "general": { 3 | "404": { 4 | "title": "Not found", 5 | "subtext_html": "The page you were looking for does not exist" 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/liquid/templates/product.alternate.json: -------------------------------------------------------------------------------- 1 | { 2 | "sections": { 3 | "example": { 4 | "type": "example-section" 5 | } 6 | }, 7 | "order": [ 8 | "example" 9 | ] 10 | } -------------------------------------------------------------------------------- /config.yml: -------------------------------------------------------------------------------- 1 | development: 2 | password: 3 | theme_id: "" 4 | store: .myshopify.com 5 | directory: dist/ 6 | ignore_files: 7 | - config/settings_data.json 8 | - templates/*.json 9 | -------------------------------------------------------------------------------- /src/styles/helpers/variables.scss: -------------------------------------------------------------------------------- 1 | /* Example SCSS Variables */ 2 | 3 | // Colors 4 | $white: #fff; 5 | $black: #000; 6 | 7 | // Breakpoints 8 | $xsmall: 320px; 9 | $small: 575px; 10 | $medium: 768px; 11 | $large: 992px; 12 | $xlarge: 1200px; 13 | $xxlarge: 1680px; 14 | 15 | // Misc 16 | $i: !important; -------------------------------------------------------------------------------- /dist/config/settings_schema.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "theme_info", 4 | "theme_name": "Themekit template theme", 5 | "theme_version": "1.0.0", 6 | "theme_author": "Shopify", 7 | "theme_documentation_url": "https://github.com/Shopify/themekit", 8 | "theme_support_url": "https://github.com/Shopify/themekit/issues" 9 | } 10 | ] 11 | -------------------------------------------------------------------------------- /src/config/settings_schema.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "theme_info", 4 | "theme_name": "Themekit template theme", 5 | "theme_version": "1.0.0", 6 | "theme_author": "Shopify", 7 | "theme_documentation_url": "https://github.com/Shopify/themekit", 8 | "theme_support_url": "https://github.com/Shopify/themekit/issues" 9 | } 10 | ] 11 | -------------------------------------------------------------------------------- /dist/sections/example-section.liquid: -------------------------------------------------------------------------------- 1 | {% comment %} EXAMPLE SECTION FILE {% endcomment %} 2 | {{ 'section.example-section-styles.css' | asset_url | stylesheet_tag }} 3 | 4 |
5 | {{ section.settings.title }} 6 |
7 | 8 | {% schema %} 9 | { 10 | "name": "Sample Section", 11 | "presets": [ 12 | { 13 | "name": "Example Section" 14 | } 15 | ], 16 | "settings": [ 17 | { 18 | "type": "text", 19 | "id": "title", 20 | "label": "Title" 21 | } 22 | ] 23 | } 24 | {% endschema %} -------------------------------------------------------------------------------- /src/liquid/sections/example-section.liquid: -------------------------------------------------------------------------------- 1 | {% comment %} EXAMPLE SECTION FILE {% endcomment %} 2 | {{ 'section.example-section-styles.css' | asset_url | stylesheet_tag }} 3 | 4 |
5 | {{ section.settings.title }} 6 |
7 | 8 | {% schema %} 9 | { 10 | "name": "Sample Section", 11 | "presets": [ 12 | { 13 | "name": "Example Section" 14 | } 15 | ], 16 | "settings": [ 17 | { 18 | "type": "text", 19 | "id": "title", 20 | "label": "Title" 21 | } 22 | ] 23 | } 24 | {% endschema %} -------------------------------------------------------------------------------- /dist/snippets/style-bundle.liquid: -------------------------------------------------------------------------------- 1 | {%- comment -%} 2 | DO NOT DELETE 3 | {%- endcomment -%} 4 | 5 | {% capture layout_bundle_styles %}bundle.{{- layout -}}.css{% endcapture %} 6 | {{ layout_bundle_styles | asset_url | stylesheet_tag }} 7 | 8 | {% if template %} 9 | {% capture style_bundle %}bundle.{{ template.name }}{% if template.suffix %}.{{ template.suffix }}{% endif %}.css{% endcapture %} 10 | {{ style_bundle | asset_url | stylesheet_tag }} 11 | {% else %} 12 | {% unless checkout %} 13 | {{ 'bundle.apps.css' | asset_url | stylesheet_tag }} 14 | {% endunless %} 15 | {% endif %} -------------------------------------------------------------------------------- /src/liquid/snippets/style-bundle.liquid: -------------------------------------------------------------------------------- 1 | {%- comment -%} 2 | DO NOT DELETE 3 | {%- endcomment -%} 4 | 5 | {% capture layout_bundle_styles %}bundle.{{- layout -}}.css{% endcapture %} 6 | {{ layout_bundle_styles | asset_url | stylesheet_tag }} 7 | 8 | {% if template %} 9 | {% capture style_bundle %}bundle.{{ template.name }}{% if template.suffix %}.{{ template.suffix }}{% endif %}.css{% endcapture %} 10 | {{ style_bundle | asset_url | stylesheet_tag }} 11 | {% else %} 12 | {% unless checkout %} 13 | {{ 'bundle.apps.css' | asset_url | stylesheet_tag }} 14 | {% endunless %} 15 | {% endif %} -------------------------------------------------------------------------------- /dist/snippets/script-bundle.liquid: -------------------------------------------------------------------------------- 1 | {%- comment -%} 2 | DO NOT DELETE 3 | {%- endcomment -%} 4 | 5 | {% capture layout_bundle_js %}bundle.{{- layout -}}.js{% endcapture %} 6 | 7 | 8 | {% if template %} 9 | {% capture script_bundle %}bundle.{{ template.name }}{% if template.suffix %}.{{ template.suffix }}{% endif %}.js{% endcapture %} 10 | 11 | {% else %} 12 | {% unless checkout %} 13 | 14 | {% endunless %} 15 | {% endif %} -------------------------------------------------------------------------------- /src/styles/helpers/mixins.scss: -------------------------------------------------------------------------------- 1 | /* SCSS Mixins */ 2 | 3 | // Usage: @include mq($large) { ... } 4 | @mixin mq($value, $direction: 'min') { 5 | @if type-of($value) == number and unitless($value) { 6 | $value: $value + "px"; 7 | } 8 | 9 | @if $direction == 'max' { 10 | $value: $value - 1; 11 | } 12 | 13 | @if type-of($value) == string { 14 | @each $breakpoint in $breakpoints { 15 | @if index($breakpoint, $value) != null { 16 | $value: nth($breakpoint, 1); 17 | } 18 | } 19 | } 20 | 21 | @media only screen and (#{$direction}-width: #{$value}) { 22 | @content; 23 | } 24 | } -------------------------------------------------------------------------------- /src/liquid/snippets/script-bundle.liquid: -------------------------------------------------------------------------------- 1 | {%- comment -%} 2 | DO NOT DELETE 3 | {%- endcomment -%} 4 | 5 | {% capture layout_bundle_js %}bundle.{{- layout -}}.js{% endcapture %} 6 | 7 | 8 | {% if template %} 9 | {% capture script_bundle %}bundle.{{ template.name }}{% if template.suffix %}.{{ template.suffix }}{% endif %}.js{% endcapture %} 10 | 11 | {% else %} 12 | {% unless checkout %} 13 | 14 | {% endunless %} 15 | {% endif %} -------------------------------------------------------------------------------- /dist/templates/blog.liquid: -------------------------------------------------------------------------------- 1 | {% paginate blog.articles by 5 %} 2 | 3 |

{{ blog.title }}

4 | {% for article in blog.articles %} 5 |
6 |

{{ article.title }}

7 | {{ article.author }} @ {{ article.created_at }} 8 |
9 | {% if article.excerpt.size > 0 %} 10 | {{ article.excerpt }} 11 | {% else %} 12 |

{{ article.content | strip_html | truncatewords: 100 }}

13 | {% endif %} 14 |
15 |
16 | {% endfor %} 17 | 18 | {% if paginate.pages > 1 %} 19 | {{ paginate | default_pagination }} 20 | {% endif %} 21 | 22 | {% endpaginate %} 23 | -------------------------------------------------------------------------------- /src/liquid/templates/blog.liquid: -------------------------------------------------------------------------------- 1 | {% paginate blog.articles by 5 %} 2 | 3 |

{{ blog.title }}

4 | {% for article in blog.articles %} 5 |
6 |

{{ article.title }}

7 | {{ article.author }} @ {{ article.created_at }} 8 |
9 | {% if article.excerpt.size > 0 %} 10 | {{ article.excerpt }} 11 | {% else %} 12 |

{{ article.content | strip_html | truncatewords: 100 }}

13 | {% endif %} 14 |
15 |
16 | {% endfor %} 17 | 18 | {% if paginate.pages > 1 %} 19 | {{ paginate | default_pagination }} 20 | {% endif %} 21 | 22 | {% endpaginate %} 23 | -------------------------------------------------------------------------------- /dist/templates/page.contact.liquid: -------------------------------------------------------------------------------- 1 |

{{ page.title }}

2 | {% form 'contact' %} 3 | {% if form.posted_successfully? %} Thank you for your contact {% endif %} 4 | {{ form.errors | default_errors }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {% endform %} 15 | -------------------------------------------------------------------------------- /src/liquid/templates/page.contact.liquid: -------------------------------------------------------------------------------- 1 |

{{ page.title }}

2 | {% form 'contact' %} 3 | {% if form.posted_successfully? %} Thank you for your contact {% endif %} 4 | {{ form.errors | default_errors }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | {% endform %} 15 | -------------------------------------------------------------------------------- /dist/templates/collection.list.liquid: -------------------------------------------------------------------------------- 1 | {% paginate collection.products by 2 %} 2 |

{{ collection.title }}

3 | {% for product in collection.products %} 4 |
5 | {{ product.title }} 6 | {{ product.price | money }} 7 | {% unless product.available %}
sold out{% endunless %} 8 | 9 | {{ product.featured_image.alt | escape }} 10 | 11 |
12 | {% else %} 13 |

no matches

14 | {% endfor %} 15 | {% if paginate.pages > 1 %}{{ paginate | default_pagination }}{% endif %} 16 | {% endpaginate %} 17 | 18 | -------------------------------------------------------------------------------- /src/liquid/templates/collection.list.liquid: -------------------------------------------------------------------------------- 1 | {% paginate collection.products by 2 %} 2 |

{{ collection.title }}

3 | {% for product in collection.products %} 4 |
5 | {{ product.title }} 6 | {{ product.price | money }} 7 | {% unless product.available %}
sold out{% endunless %} 8 | 9 | {{ product.featured_image.alt | escape }} 10 | 11 |
12 | {% else %} 13 |

no matches

14 | {% endfor %} 15 | {% if paginate.pages > 1 %}{{ paginate | default_pagination }}{% endif %} 16 | {% endpaginate %} 17 | 18 | -------------------------------------------------------------------------------- /dist/templates/collection.liquid: -------------------------------------------------------------------------------- 1 | {% paginate collection.products by 2 %} 2 |

{{ collection.title }}

3 | {% for product in collection.products %} 4 |
5 | {{ product.title }} 6 | {{ product.price | money }} 7 | {% unless product.available %}
sold out{% endunless %} 8 | 9 | {{ product.featured_image.alt | escape }} 10 | 11 |
12 | {% else %} 13 |

no matches

14 | {% endfor %} 15 | {% if paginate.pages > 1 %} 16 | {{ paginate | default_pagination }} 17 | {% endif %} 18 | {% endpaginate %} 19 | -------------------------------------------------------------------------------- /src/liquid/templates/collection.liquid: -------------------------------------------------------------------------------- 1 | {% paginate collection.products by 2 %} 2 |

{{ collection.title }}

3 | {% for product in collection.products %} 4 |
5 | {{ product.title }} 6 | {{ product.price | money }} 7 | {% unless product.available %}
sold out{% endunless %} 8 | 9 | {{ product.featured_image.alt | escape }} 10 | 11 |
12 | {% else %} 13 |

no matches

14 | {% endfor %} 15 | {% if paginate.pages > 1 %} 16 | {{ paginate | default_pagination }} 17 | {% endif %} 18 | {% endpaginate %} 19 | -------------------------------------------------------------------------------- /dist/templates/search.liquid: -------------------------------------------------------------------------------- 1 | {% paginate search.results by 10 %} 2 |
3 | 4 | 5 |
6 | 7 | {% if search.performed %} 8 | {% for item in search.results %} 9 | {% if item.featured_image %} 10 | 11 | {{ item.featured_image.src | img_url: 'medium' | img_tag: item.featured_image.alt }} 12 | 13 | {% endif %} 14 |
{{ item.title | link_to: item.url }}
15 |

{{ item.content | strip_html | truncatewords: 50 }}

16 | {% else %} 17 | no results 18 | {% endfor %} 19 | {% endif %} 20 | 21 | {% if paginate.pages > 1 %}{{ paginate | default_pagination }}{% endif %} 22 | {% endpaginate %} 23 | -------------------------------------------------------------------------------- /src/liquid/templates/search.liquid: -------------------------------------------------------------------------------- 1 | {% paginate search.results by 10 %} 2 |
3 | 4 | 5 |
6 | 7 | {% if search.performed %} 8 | {% for item in search.results %} 9 | {% if item.featured_image %} 10 | 11 | {{ item.featured_image.src | img_url: 'medium' | img_tag: item.featured_image.alt }} 12 | 13 | {% endif %} 14 |
{{ item.title | link_to: item.url }}
15 |

{{ item.content | strip_html | truncatewords: 50 }}

16 | {% else %} 17 | no results 18 | {% endfor %} 19 | {% endif %} 20 | 21 | {% if paginate.pages > 1 %}{{ paginate | default_pagination }}{% endif %} 22 | {% endpaginate %} 23 | -------------------------------------------------------------------------------- /dist/templates/list-collections.liquid: -------------------------------------------------------------------------------- 1 | {% for collection in collections %} 2 | {% unless collection.handle == 'frontpage' %} 3 | {% capture collection_title %}{{ collection.title | escape }}{% endcapture %} 4 | More {{ collection_title }} › 5 | {% for product in collection.products limit:5 %} 6 | {% assign grid_item_width = 'large--one-fifth medium--one-half' %} 7 |
8 | {{ product.title }} 9 | {{ product.price | money }} 10 | {% unless product.available %}
sold out{% endunless %} 11 | 12 | {{ product.featured_image.alt | escape }} 13 | 14 |
15 | {% endfor %} 16 | {% endunless %} 17 | {% endfor %} 18 | -------------------------------------------------------------------------------- /src/liquid/templates/list-collections.liquid: -------------------------------------------------------------------------------- 1 | {% for collection in collections %} 2 | {% unless collection.handle == 'frontpage' %} 3 | {% capture collection_title %}{{ collection.title | escape }}{% endcapture %} 4 | More {{ collection_title }} › 5 | {% for product in collection.products limit:5 %} 6 | {% assign grid_item_width = 'large--one-fifth medium--one-half' %} 7 |
8 | {{ product.title }} 9 | {{ product.price | money }} 10 | {% unless product.available %}
sold out{% endunless %} 11 | 12 | {{ product.featured_image.alt | escape }} 13 | 14 |
15 | {% endfor %} 16 | {% endunless %} 17 | {% endfor %} 18 | -------------------------------------------------------------------------------- /dist/templates/gift_card.liquid: -------------------------------------------------------------------------------- 1 | {% layout none %} 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{ 'vendor/qrcode.js' | shopify_asset_url | script_tag }} 9 | 10 | 11 |
12 | 19 |
20 | {% if gift_card.pass_url %} 21 | 22 | Add To Apple Wallet 23 | 24 | {% endif %} 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /src/liquid/templates/gift_card.liquid: -------------------------------------------------------------------------------- 1 | {% layout none %} 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{ 'vendor/qrcode.js' | shopify_asset_url | script_tag }} 9 | 10 | 11 |
12 | 19 |
20 | {% if gift_card.pass_url %} 21 | 22 | Add To Apple Wallet 23 | 24 | {% endif %} 25 |
26 | 27 | 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shopify-webpack-theme-development", 3 | "version": "1.0.0", 4 | "description": "An empty starting point for modern Shopify theme development.", 5 | "private": true, 6 | "main": "webpack.config.js", 7 | "scripts": { 8 | "start": "NODE_ENV=development webpack --watch", 9 | "build": "webpack", 10 | "deploy": "webpack && theme deploy", 11 | "add-all": "git add ." 12 | }, 13 | "keywords": [], 14 | "author": "@krjo", 15 | "license": "MIT", 16 | "devDependencies": { 17 | "@shopify/theme-cart": "^3.1.0", 18 | "@shopify/theme-product": "^3.1.0", 19 | "@shopify/theme-product-form": "^3.1.0", 20 | "autoprefixer": "^9.8.6", 21 | "copy-webpack-plugin": "^5.1.2", 22 | "css-loader": "^3.6.0", 23 | "eslint-plugin-compat": "^4.0.0", 24 | "glob": "^7.1.6", 25 | "mini-css-extract-plugin": "^1.5.0", 26 | "node-sass": "^5.0.0", 27 | "postcss-loader": "^5.2.0", 28 | "pre-commit": "^1.2.2", 29 | "sass-loader": "^11.0.1", 30 | "webpack": "^5.35.1", 31 | "webpack-cli": "^4.6.0", 32 | "webpack-shell-plugin-next": "^2.2.2" 33 | }, 34 | "pre-commit": [ 35 | "build", 36 | "add-all" 37 | ] 38 | } 39 | -------------------------------------------------------------------------------- /dist/templates/product.liquid: -------------------------------------------------------------------------------- 1 | {% assign current_variant = product.selected_or_first_available_variant %} 2 | {% assign featured_image = current_variant.featured_image | default: product.featured_image %} 3 | {{ featured_image.alt | escape }} 4 | {% for image in product.images %} 5 | 6 | {{ image.alt | escape }} 7 | 8 | {% endfor %} 9 |

{{ product.title }}

10 |
11 | 24 | {{ current_variant.price | money }} 25 | 26 | 27 | 28 |
29 |
{{ product.description }}
30 | -------------------------------------------------------------------------------- /src/liquid/templates/product.liquid: -------------------------------------------------------------------------------- 1 | {% assign current_variant = product.selected_or_first_available_variant %} 2 | {% assign featured_image = current_variant.featured_image | default: product.featured_image %} 3 | {{ featured_image.alt | escape }} 4 | {% for image in product.images %} 5 | 6 | {{ image.alt | escape }} 7 | 8 | {% endfor %} 9 |

{{ product.title }}

10 |
11 | 24 | {{ current_variant.price | money }} 25 | 26 | 27 | 28 |
29 |
{{ product.description }}
30 | -------------------------------------------------------------------------------- /dist/snippets/icon-close.liquid: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | Custom color variable usage: 3 | {% render 'icon-close', color: '#1890D7' %} 4 | {% endcomment %} 5 | 6 | 7 | Close Icon 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /src/liquid/snippets/icons/icon-close.liquid: -------------------------------------------------------------------------------- 1 | {% comment %} 2 | Custom color variable usage: 3 | {% render 'icon-close', color: '#1890D7' %} 4 | {% endcomment %} 5 | 6 | 7 | Close Icon 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /dist/layout/theme.liquid: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ page_title }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | {% render 'style-bundle', layout: 'theme' %} 12 | {% render 'script-bundle', layout: 'theme' %} 13 | 14 | {{ content_for_header }} 15 | 16 | 17 | 18 | 19 | Skip to content 20 | 21 | {% for link in linklists.main-menu.links %} 22 | {% if link.links != blank %} 23 | {{ link.title }} 24 | {% for childlink in link.links %} 25 | {{ childlink.title | escape }} 26 | {% endfor %} 27 | {% else %} 28 | {{ link.title }} 29 | {% endif %} 30 | {% endfor %} 31 | 32 | cart 33 | 34 | {% if shop.customer_accounts_enabled %} 35 | {% if customer %} 36 | account 37 | {{ 'log out' | customer_logout_link }} 38 | {% else %} 39 | {{ 'log in ' | customer_login_link }} 40 | {{ 'register' | customer_register_link }} 41 | {% endif %} 42 | {% endif %} 43 | 44 |
45 | {{ content_for_layout }} 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /src/liquid/layout/theme.liquid: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ page_title }} 5 | 6 | 7 | 8 | 9 | 10 | 11 | {% render 'style-bundle', layout: 'theme' %} 12 | {% render 'script-bundle', layout: 'theme' %} 13 | 14 | {{ content_for_header }} 15 | 16 | 17 | 18 | 19 | Skip to content 20 | 21 | {% for link in linklists.main-menu.links %} 22 | {% if link.links != blank %} 23 | {{ link.title }} 24 | {% for childlink in link.links %} 25 | {{ childlink.title | escape }} 26 | {% endfor %} 27 | {% else %} 28 | {{ link.title }} 29 | {% endif %} 30 | {% endfor %} 31 | 32 | cart 33 | 34 | {% if shop.customer_accounts_enabled %} 35 | {% if customer %} 36 | account 37 | {{ 'log out' | customer_logout_link }} 38 | {% else %} 39 | {{ 'log in ' | customer_login_link }} 40 | {{ 'register' | customer_register_link }} 41 | {% endif %} 42 | {% endif %} 43 | 44 |
45 | {{ content_for_layout }} 46 |
47 | 48 | 49 | -------------------------------------------------------------------------------- /dist/templates/cart.liquid: -------------------------------------------------------------------------------- 1 | {% if cart.item_count > 0 %} 2 |

cart

3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {% for item in cart.items %} 13 | 14 | 19 | 24 | 25 | 28 | 33 | 34 | {% endfor %} 35 | 36 |
ProdPriceQtytotal
15 | 16 | {{ item.title | escape }} 17 | 18 | 20 | {{ item.product.title }} 21 | {{ item.variant.title }} 22 | remove 23 | {{ item.price | money }} 26 | 27 | 29 | {% if item.original_line_price != item.line_price %}{{ item.original_line_price | money }}{% endif %} 30 | {{ item.line_price | money }} 31 | {% for discount in item.discounts %}{{ discount.title }}{% endfor %} 32 |
37 |
38 |

sub total : {{ cart.total_price | money }}

39 | 40 | 41 |
42 |
43 | {% else %} 44 |

cart

45 | Cart is empty 46 | {% endif %} 47 | -------------------------------------------------------------------------------- /src/liquid/templates/cart.liquid: -------------------------------------------------------------------------------- 1 | {% if cart.item_count > 0 %} 2 |

cart

3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | {% for item in cart.items %} 13 | 14 | 19 | 24 | 25 | 28 | 33 | 34 | {% endfor %} 35 | 36 |
ProdPriceQtytotal
15 | 16 | {{ item.title | escape }} 17 | 18 | 20 | {{ item.product.title }} 21 | {{ item.variant.title }} 22 | remove 23 | {{ item.price | money }} 26 | 27 | 29 | {% if item.original_line_price != item.line_price %}{{ item.original_line_price | money }}{% endif %} 30 | {{ item.line_price | money }} 31 | {% for discount in item.discounts %}{{ discount.title }}{% endfor %} 32 |
37 |
38 |

sub total : {{ cart.total_price | money }}

39 | 40 | 41 |
42 |
43 | {% else %} 44 |

cart

45 | Cart is empty 46 | {% endif %} 47 | -------------------------------------------------------------------------------- /dist/templates/article.liquid: -------------------------------------------------------------------------------- 1 | {% assign number_of_comments = article.comments_count %} 2 | {% if comment and comment.created_at %} 3 | {% assign number_of_comments = article.comments_count %} 4 | {% endif %} 5 | 6 |

{{ article.title }}

7 | {% capture author %}{{ article.author }}{% endcapture %} 8 | {% capture date %}{% endcapture %} 9 | {{ article.author }} @ {{ article.created_at }} 10 | 11 |
{{ article.content }}
12 | {% if blog.comments_enabled? %} 13 |

{{ number_of_comments }} comments

14 | {% paginate article.comments by 5 %} 15 | {% for comment in article.comments %} 16 |
17 |
{{ comment.content }}
18 | {{ comment.author }} @ {{ comment.created_at }} 19 |
20 | {% endfor %} 21 | {% if paginate.pages > 1 %} 22 | {{ paginate | default_pagination }} 23 | {% endif %} 24 | {% endpaginate %} 25 | 26 |
27 | {% form 'new_comment', article %} 28 | {{ form.errors | default_errors }} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {% endform %} 40 |
41 | {% endif %} 42 | -------------------------------------------------------------------------------- /src/liquid/templates/article.liquid: -------------------------------------------------------------------------------- 1 | {% assign number_of_comments = article.comments_count %} 2 | {% if comment and comment.created_at %} 3 | {% assign number_of_comments = article.comments_count %} 4 | {% endif %} 5 | 6 |

{{ article.title }}

7 | {% capture author %}{{ article.author }}{% endcapture %} 8 | {% capture date %}{% endcapture %} 9 | {{ article.author }} @ {{ article.created_at }} 10 | 11 |
{{ article.content }}
12 | {% if blog.comments_enabled? %} 13 |

{{ number_of_comments }} comments

14 | {% paginate article.comments by 5 %} 15 | {% for comment in article.comments %} 16 |
17 |
{{ comment.content }}
18 | {{ comment.author }} @ {{ comment.created_at }} 19 |
20 | {% endfor %} 21 | {% if paginate.pages > 1 %} 22 | {{ paginate | default_pagination }} 23 | {% endif %} 24 | {% endpaginate %} 25 | 26 |
27 | {% form 'new_comment', article %} 28 | {{ form.errors | default_errors }} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | {% endform %} 40 |
41 | {% endif %} 42 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const glob = require('glob'); 2 | const path = require('path'); 3 | const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 4 | const CopyPlugin = require('copy-webpack-plugin'); 5 | const WebpackShellPluginNext = require('webpack-shell-plugin-next'); 6 | const mode = process.env.NODE_ENV === 'development' ? 'development' : 'production'; 7 | const devtool = mode === 'development' ? 'eval-cheap-source-map' : false; 8 | const stats = mode === 'development' ? 'errors-warnings' : { children: false }; 9 | const sass = require('node-sass'); 10 | 11 | module.exports = { 12 | mode: mode, 13 | devtool: devtool, 14 | entry: glob.sync('./src/js/bundles/**/*.js').reduce((acc, path) => { 15 | const entry = path.replace(/^.*[\\\/]/, '').replace('.js',''); 16 | acc[entry] = path; 17 | return acc; 18 | }, {}), 19 | output: { 20 | filename: './assets/bundle.[name].js', 21 | path: path.resolve(__dirname, 'dist'), 22 | }, 23 | resolve: { 24 | alias: { 25 | Styles: path.resolve(__dirname, 'src/styles/'), 26 | Helpers: path.resolve(__dirname, 'src/styles/helpers/') 27 | } 28 | }, 29 | plugins: [ 30 | new MiniCssExtractPlugin({ 31 | filename: './assets/bundle.[name].css.liquid', 32 | }), 33 | new CopyPlugin([ 34 | { 35 | from: 'src/**/*', 36 | to: '[folder]/[name].[ext]', 37 | ignore: [ 38 | 'src/js/**/*', 39 | 'src/styles/**/*', 40 | 'src/assets/**/*', 41 | 'src/liquid/templates/customers/*', 42 | 'src/liquid/snippets/**/*' 43 | ], 44 | }, 45 | { 46 | from: 'src/liquid/templates/customers/*.liquid', 47 | to: 'templates/[folder]/[name].[ext]', 48 | }, 49 | { 50 | from: 'src/liquid/snippets/**/*.liquid', 51 | to: 'snippets/[name].[ext]', 52 | flatten: true 53 | }, 54 | { 55 | from: 'src/assets/**/*', 56 | to: 'assets/', 57 | flatten: true 58 | }, 59 | { 60 | from: 'src/styles/sections/**/*', 61 | to: 'assets/section.[name].css', 62 | flatten: true, 63 | transform(content, path) { 64 | const result = sass.renderSync({ 65 | file: path, 66 | }); 67 | return result.css.toString(); 68 | }, 69 | } 70 | ]) 71 | ], 72 | stats: stats, 73 | module: { 74 | rules: [ 75 | { 76 | test: /\.(sc|sa|c)ss$/, 77 | use: [ 78 | MiniCssExtractPlugin.loader, 79 | { 80 | loader: 'css-loader', 81 | options: { 82 | url: false 83 | } 84 | }, 85 | 'postcss-loader', 86 | { 87 | loader: 'sass-loader', 88 | options: { 89 | sourceMap: true, 90 | } 91 | } 92 | ] 93 | } 94 | ] 95 | } 96 | } 97 | 98 | if (mode === 'development') { 99 | module.exports.plugins.push( 100 | new WebpackShellPluginNext({ 101 | onBuildStart:{ 102 | scripts: ['echo Webpack build in progress...🛠'], 103 | }, 104 | onBuildEnd:{ 105 | scripts: ['echo Build Complete 📦','theme watch','theme open'], 106 | parallel: true 107 | } 108 | }) 109 | ) 110 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 📦 Webpack Shopify Theme Development Tool 2 | 3 | **This Webpack config was created to replace Slate by Shopify. This workflow uses ThemeKit but offers you the ability to use modern JavaScript and create template specific JS and CSS bundles. While it's possible to migrate an existing theme to this workflow, the intention and real benefit comes when new themes are built from scratch using this setup. Please post general questions in the Discussions tab in GitHub.** 4 | 5 | ## 🆕 Updated to work with Shopify's Online Store 2.0 JSON templates & "sections everywhere" 6 | 7 | ### New features: 8 | - All .scss files created under `src/styles/sections/` will be processed with `node-sass` and compiled to a .css file with a `section.` prefix (See example files in `dist`). These files will be bundled into `dist/assets`. 9 | - Note: Shopify's preferred method of including section file css is to add a liquid stylesheet tag at the top fo each section file. See example section file (Approach taken from the new Dawn theme). 10 | - JSON templates will now be ignored by ThemeKit via the config.yml file. This is due to the fact that section setting content is stored within the template.json file. Allowing ThemeKit to push new versions of this file would overwrite any changes made in section settings from the theme customizer. If you use a deployment tool like Buddy or Beanstalk, be sure to add `templates/*.json` as an ignore there as well. 11 | 12 | ## 🖥 System Requirements 13 | - [Node](https://nodejs.org/en/) (v14.*+) 14 | - [NPM 5+](https://docs.npmjs.com/try-the-latest-stable-version-of-npm) 15 | - [Theme Kit](https://shopify.github.io/themekit/) 16 | 17 | ## 🎬 Getting Started 18 | 1. In a new project directory, run [Theme Kit's 'new' command to generate a new theme on your store](https://shopify.github.io/themekit/commands/#new). After that theme has been uploaded to your store, delete the new local theme files that Theme Kit downloaded to your directory as you won't need them. The starter liquid files included `dist/` are the same files you'll get when generating a new theme with Theme Kit. 19 | 2. Download and unzip this repo, and move all files into your new directory created in step 1. 20 | 3. Open terminal, cd into your project directory, and and run `npm install` to install packages. 21 | 3. In Shopify, copy the theme ID for the new theme, then update the ``, `THEME_ID`, and `STORE_URL` in **config.yml** with your store & theme details. 22 | 4. Your `config.yml` file should look like this: 23 | ``` 24 | development: 25 | password: 26 | theme_id: "" 27 | store: 28 | directory: dist/ 29 | ignore_files: 30 | - config/settings_data.json 31 | ``` 32 | 5. If migrating an existing theme, copy over all assets, liquid and config files from your theme into their respective directories in `src/`. 33 | 6. Run `npm start` to run your first Webpack build and start watching for file changes to be uploaded to Shopify. 34 | 35 | ## ⚙️ Configuration 36 | 37 | ### NPM 38 | 39 | #### Scripts 40 | `npm start` 41 | - Completes a Webpack build in **development** mode 42 | - Webpack begins watching for file changes 43 | - Theme Kit begins watching for file changes in `dist/` 44 | - Theme Kit opens your development theme in your default browser 45 | 46 | `npm run build` 47 | - Completes a Webpack build in **production** mode 48 | 49 | `npm run deploy` 50 | - Completes a Webpack build in **production** mode 51 | - Deploys dist folder to the **development** theme in `config.yml` 52 | 53 | ### Webpack 54 | 55 | #### Entry Points 56 | All JavaScript files in the `js/bundles` directory & subdirectories are used as entry points. All other JavaScript modules should added to additional subdirectories of `js/`. An entry point file must be created for each liquid template file, including alternate templates. A CSS file for each template and layout should also be added to `styles/layout` and `styles/templates`. These CSS files should be imported at the top of each JavaScript entry file. 57 | 58 | #### Output Files 59 | Webpack will generate a JavaScript file for each template and layout file in the `bundles` directory. The CSS files imported in each bundle entry file will also generate CSS files. Webpack will add all output files to `dist/assets`. 60 | 61 | ### Theme Kit 62 | 63 | #### Config 64 | The Theme Kit configuration file uses `dist` as the root directory for watching files to upload. 65 | 66 | #### File Uploads 67 | When running `npm start`, Webpack will use a plugin that runs `shopify-themekit watch` after a successful build. Webpack will then watch and recompile entry file changes, and Theme Kit will watch for file changes in the `dist` directory. 68 | 69 | ## ‼️ Required Files 70 | - The layout and template entry files in `src/js/bundles/` are necessary for Webpack to generate the CSS and JavaScript assets for each layout and template. Additional entry files will be required when creating new liquid templates or alternate templates, ie. `page.about.js`. 71 | - The `style-bundle.liquid` and `script-bundle.liquid` snippets output dynamic asset URLs based on current layout and template. These have been added to sample `theme.liquid`. The `layout` variable is required. 72 | 73 | #### Shopify Plus Stores 74 | If your store is on Shopify Plus, you'll need to do the following: 75 | - Create `checkout.scss` and add to `src/styles/layout/`. 76 | - Create `checkout.js` and add to `src/js/bundles/layout/`. 77 | - Add `import "Styles/layout/checkout.scss";` in `checkout.js`. 78 | - Render the style-bundle and script-bundle snippets in `checkout.liquid` by changing the snippet's layout variable value to `checkout`. ie. `{% render 'style-bundle', layout: 'checkout' %}` and `{% render 'script-bundle', layout: 'checkout' %}`. 79 | 80 | ## 📝 Notes 81 | - Subdirectories are allowed in `assets/`, `js/`, `styles/`, `snippets/`. 82 | - A `Styles` module alias for the styles directory is ready to use. ie. `import "Styles/layout/theme.scss"`. 83 | - To reference an asset url in an SCSS file such as a background image, just use `./filename.ext`, since all final CSS and images live in the `dist/assets/` directory. 84 | - If you add a new JavaScript entry file to `js/bundles/` while Webpack and Theme Kit are watching for changes, you'll need to end the process and run `npm start` again so that Webpack is aware of the new entry file. 85 | - A git pre-commit hook is installed that will run `webpack build` prior to the commit. This is useful if using a code deployment tool so that you never push and deploy an unbuilt theme. 86 | - `clean-webpack-plugin` was intentionally not included to make incremental deployments faster using [Buddy](https://buddy.works/). If you remove a bundle entry file, you'll also need to delete the bundle files from `dist/assets`. 87 | - If you update or switch node versions using `nvm`, you will need to run `npm rebuild node-sass` to refresh node-sass for your current environment. 88 | - When merging 2 git feature branches, you only need to resolve the conlficts inside `src/`. Any conflicts inside `dist/` can be resolved with `npm run build`. Always run `npm run build` after resolving merge conflicts. 89 | - Vendor CSS and JS files can be added to `src/assets/vendor`, and will be copied into `dist/assets`. 90 | 91 | ## 🚧 Under Construction 92 | A few issues with this workflow that I'm working on a solution for: 93 | - If a Webpack entry file is deleted, how to also remove the generated output files from `dist/assets/`. The `clean-webpack-plugin` removes the entire dist folder which git tracks as new changes to every file in the directory, so that is not an option. 94 | - Currently, if the same vendor module is imported in a layout and template entry file, that code will be included twice. How to split out vendor file imports but also make them available in the necessary modules. 95 | 96 | ## 🆕 Changelog 97 | 98 | #### December 26, 2021 99 | - Removes Babel. Replaces with `eslint-plugin-compat` & `.eslintrc` (only polyfill what is necessary for the browsers your project requires). 100 | - Adds `defer` to layout and template script bundles, and moves to ``. 101 | 102 | #### March 10, 2020 103 | - Fixes bug with account page style and JavaScript bundles. Updates the `style-bundle.liquid` and `script-bundle.liquid` snippets to remove `customers/` from the asset URL output as this is not included in the filename that webpack generates. 104 | 105 | #### March 23, 2020 106 | - Moves `templates/`, `sections/`, `snippets/` and `layout/` directories into a `liquid/` directory in `src/`. 107 | - Updates copy plugin in `webpack.config.js` to accommodate the new liquid directory structure. 108 | 109 | #### February 16, 2021 110 | - Adds apps.js and apps.scss. These assets will load in your theme layout JS and CSS on pages where apps run and a Shopify template is not used. (ie. ___.myshopify.com/apps/store-locator) 111 | - Updates style-bundle.liquid and script-bundle.liquid to include app.js and app.scss for template-less pages 112 | - Updates style-bundle.liquid and script-bundle.liquid to remove string filter for capturing template name and suffix 113 | - Uninstalls unnecessary npm dependencies --------------------------------------------------------------------------------