├── .build └── .gitkeep ├── .gitignore ├── Gruntfile.coffee ├── README.md ├── package.json └── theme ├── assets └── scss │ ├── _custom.scss │ ├── _normalize.scss │ └── styles.scss ├── config ├── settings_data.json └── settings_schema.json ├── layout └── theme.liquid ├── locales └── en.default.json ├── snippets ├── collection-view.liquid ├── pagination.liquid └── swatch.liquid └── templates ├── 404.liquid ├── article.liquid ├── blog.liquid ├── cart.liquid ├── collection.liquid ├── collection.list.liquid ├── customers ├── account.liquid ├── activate_account.liquid ├── addresses.liquid ├── login.liquid ├── order.liquid ├── register.liquid └── reset_password.liquid ├── index.liquid ├── page.liquid ├── product.liquid └── search.liquid /.build/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/.build/.gitkeep -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | /.idea 3 | /.sass-cache 4 | /node_modules 5 | /bower_components 6 | /dist 7 | /.build/config.yml 8 | /.build/assets 9 | /.build/config 10 | /.build/layout 11 | /.build/locales 12 | /.build/snippets 13 | /.build/templates 14 | -------------------------------------------------------------------------------- /Gruntfile.coffee: -------------------------------------------------------------------------------- 1 | module.exports = (grunt) -> 2 | 3 | # Flags from command line options. 4 | IS_PRODUCTION = (grunt.option('env') == 'production') 5 | 6 | # Define patterns used to match image-based assets (for ImageMin) and other types of asset. 7 | IMAGE_ASSET_PATTERN = '**/*.{png,jpg,jpeg,gif,svg}' 8 | STATIC_ASSETS_PATTERN = '**/*.{css,js,scss,css.liquid,js.liquid,scss.liquid,eot,ttf,woff}' 9 | 10 | # Initialise the Grunt config. 11 | grunt.initConfig 12 | pkg: grunt.file.readJSON('package.json') 13 | 14 | # Meta information about theme. 15 | meta: 16 | banner: 17 | '// Skillshare Examples\n' + 18 | '// version: <%= pkg.version %>\n' + 19 | '// author: <%= pkg.author %>\n' + 20 | '// license: <%= pkg.licenses[0].type %>\n' 21 | 22 | # Compilation of SCSS files to compressed .css.liquid files. 23 | sass: 24 | options: 25 | style: if IS_PRODUCTION then 'compressed' else 'expanded' 26 | sourcemap: not IS_PRODUCTION 27 | theme: 28 | files: 29 | '.build/assets/styles.css.liquid': 'theme/assets/scss/styles.scss' 30 | 31 | # Concatenation and minification of Javascript. 32 | uglify: 33 | options: 34 | compress: IS_PRODUCTION 35 | mangle: IS_PRODUCTION 36 | beautify: not IS_PRODUCTION 37 | sourceMap: not IS_PRODUCTION 38 | theme: 39 | files: 40 | '.build/assets/script.js.liquid': [ 41 | 'node_modules/jquery/dist/jquery.js', 42 | 'node_modules/shopify-cartjs/dist/rivets-cart.js', 43 | ] 44 | 45 | # Optimisation of image assets. 46 | imagemin: 47 | options: 48 | optimizationLevel: if IS_PRODUCTION then 7 else 0 49 | progressive: IS_PRODUCTION 50 | interlaced: IS_PRODUCTION 51 | assets: 52 | files: [{ 53 | expand: true, 54 | flatten: true, 55 | cwd: 'theme/assets/static', 56 | src: [IMAGE_ASSET_PATTERN], 57 | dest: '.build/assets' 58 | }] 59 | 60 | # Copying of various theme files. 61 | copy: 62 | layout: 63 | expand: true 64 | cwd: 'theme/layout' 65 | src: '*.liquid' 66 | dest: '.build/layout' 67 | templates: 68 | expand: true 69 | cwd: 'theme/templates' 70 | src: '**/**.liquid' 71 | dest: '.build/templates' 72 | settings: 73 | expand: true 74 | cwd: 'theme/config' 75 | src: 'settings_schema.json' 76 | dest: '.build/config' 77 | snippets: 78 | expand: true 79 | cwd: 'theme/snippets' 80 | src: '*.liquid' 81 | dest: '.build/snippets' 82 | locales: 83 | expand: true 84 | cwd: 'theme/locales' 85 | src: '*.json' 86 | dest: '.build/locales' 87 | assets: 88 | expand: true 89 | flatten: true 90 | cwd: 'theme/assets/static' 91 | src: [STATIC_ASSETS_PATTERN] 92 | dest: '.build/assets' 93 | 94 | # Compression to a .zip for direct upload to Shopify Admin. 95 | compress: 96 | zip: 97 | options: 98 | archive: 'dist/your-theme-name.zip' 99 | files: [ 100 | expand: true 101 | cwd: '.build' 102 | src: [ 103 | 'assets/**', 104 | 'config/**', 105 | 'layout/**', 106 | 'locales/**', 107 | 'snippets/**', 108 | 'templates/**' 109 | ] 110 | ] 111 | 112 | # Clean up generated files. 113 | clean: ['dist', '.build/assets', '.build/config', '.build/layout', '.build/locales', '.build/snippets', '.build/templates'] 114 | 115 | # Watch task. 116 | watch: 117 | sass: 118 | files: ['theme/assets/scss/**/*.scss'] 119 | tasks: ['newer:sass'] 120 | uglify: 121 | files: ['theme/assets/js/**/*.js'] 122 | tasks: ['newer:uglify'] 123 | imagemin: 124 | files: ['theme/assets/static/' + IMAGE_ASSET_PATTERN] 125 | tasks: ['newer:imagemin'] 126 | copy: 127 | files: [ 128 | 'theme/layout/*.liquid', 129 | 'theme/locales/*.json', 130 | 'theme/settings/settings_schema.json', 131 | 'theme/snippets/*.liquid', 132 | 'theme/templates/**/*.liquid', 133 | 'theme/assets/static/' + STATIC_ASSETS_PATTERN 134 | ] 135 | tasks: ['newer:copy'] 136 | 137 | # Production-specific configuration. 138 | if IS_PRODUCTION 139 | grunt.config 'newer' 140 | options: 141 | override: (detail, include) -> 142 | include(true) 143 | 144 | # Load tasks made available through NPM. 145 | grunt.loadNpmTasks 'grunt-contrib-clean' 146 | grunt.loadNpmTasks 'grunt-contrib-compress' 147 | grunt.loadNpmTasks 'grunt-contrib-concat' 148 | grunt.loadNpmTasks 'grunt-contrib-copy' 149 | grunt.loadNpmTasks 'grunt-contrib-imagemin' 150 | grunt.loadNpmTasks 'grunt-contrib-sass' 151 | grunt.loadNpmTasks 'grunt-contrib-uglify' 152 | grunt.loadNpmTasks 'grunt-contrib-watch' 153 | grunt.loadNpmTasks 'grunt-newer' 154 | 155 | # Register tasks made available through the Gruntfile. 156 | grunt.registerTask 'build', ['newer:sass', 'newer:uglify', 'newer:imagemin', 'newer:copy'] 157 | grunt.registerTask 'dist', ['build', 'compress'] 158 | grunt.registerTask 'default', ['build', 'watch'] 159 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Advanced Shopify Theme Development: Examples 2 | This repository contains the code for the demo store used in my free Skillshare 3 | course, "[Advanced Shopify Theme Development]". All of the changes I make to the 4 | demo store during the course screencasts are available here in chronological 5 | order, so that you can step through, review, and understand each change. 6 | 7 | When you're done working your way through the course, don't forget to try your 8 | hand at the [class project], which will test the skills taught in this course in 9 | a real-world scenario. 10 | 11 | 12 | ## How to use this repository 13 | If you're not super familiar with git or GitHub (both worthwhile to learn - I'd 14 | recommend it!), I'll give you the whirlwind tour. By reading the 15 | [commit history] of this repository, you can see a chronology of the changes 16 | made to the demo theme during the course. 17 | 18 | If you'd like to walk through and implement the changes as you work through the 19 | course, you can [download the initial theme] as a ZIP file, then upload it to 20 | a development Shopify store. Alternatively, you can clone this repository to 21 | your local machine, revert to the initial commit, and work from there. 22 | 23 | 24 | ## Relevant lessons 25 | The four lessons from the Skillshare course relevant to this repository are: 26 | 27 | 1. [Product customisations] 28 | 2. [Filtering, sorting and viewing collections] 29 | 3. [Building Ajax-powered carts] 30 | 4. [Setting up advanced deployment] 31 | 32 | You can download a zipped version of the theme at any point in time from the 33 | [releases] page. 34 | 35 | 36 | ## Thanks 37 | A huge thanks to both Shopify and Skillshare for making this course possible. 38 | Special thanks to Keir Whitaker (Shopify) and Elliot Curtis (Skillshare). 39 | 40 | [Advanced Shopify Theme Development]: https://www.skillshare.com/classes/technology/Advanced-Shopify-Theme-Development/708093439 41 | [class project]: https://www.skillshare.com/classes/technology/Advanced-Shopify-Theme-Development/708093439/project-guide 42 | [commit history]: https://github.com/gavinballard/skillshare-examples/commits/master 43 | [initial setup]: # 44 | [download the initial theme]: https://github.com/gavinballard/skillshare-examples/archive/initial-theme.zip 45 | [Product customisations]: # 46 | [Filtering, sorting and viewing collections]: # 47 | [Building Ajax-powered carts]: # 48 | [Setting up advanced deployment]: # 49 | [releases]: https://github.com/gavinballard/skillshare-examples/releases 50 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "skillshare-examples", 3 | "version": "0.0.1", 4 | "homepage": "https://www.skillshare.com/classes/design/Advanced-Shopify-Theme-Development/708093439", 5 | "description": "Example theme for the Advanced Shopify Theme Development course.", 6 | "keywords": "Shopify", 7 | "author": "Gavin Ballard ", 8 | "main": "Gruntfile.coffee", 9 | "license": "MIT", 10 | "engines": { 11 | "node": ">= 0.10.0" 12 | }, 13 | "dependencies": { 14 | "grunt": "~0.4.5", 15 | "grunt-contrib-clean": "~0.6.0", 16 | "grunt-contrib-compress": "~0.13.0", 17 | "grunt-contrib-copy": "~0.8.0", 18 | "grunt-contrib-concat": "~0.5.1", 19 | "grunt-contrib-jshint": "~0.11.2", 20 | "grunt-contrib-imagemin": "~0.9.4", 21 | "grunt-contrib-sass": "~0.9.2", 22 | "grunt-contrib-uglify": "~0.9.1", 23 | "grunt-contrib-watch": "~0.6.1", 24 | "grunt-newer": "~1.1.1", 25 | "jquery": "1.11.3", 26 | "shopify-cartjs": "0.3.8" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /theme/assets/scss/_custom.scss: -------------------------------------------------------------------------------- 1 | /* Candle Store 2 | ========================================================================== */ 3 | 4 | #navbar { 5 | padding: 1em; 6 | background-color: #f7f7f9; 7 | } 8 | 9 | #navbar-brand { 10 | color: #8e869d; 11 | text-decoration: none; 12 | } 13 | 14 | #navbar-brand:hover { 15 | color: #373a3c; 16 | } 17 | 18 | #navbar-cart { 19 | float: right; 20 | color: #8e869d; 21 | text-decoration: none; 22 | } 23 | 24 | #navbar-cart:hover { 25 | color: #373a3c; 26 | } 27 | 28 | #content { 29 | padding: 0 1em; 30 | } 31 | 32 | #product-images { 33 | width: 25%; 34 | float: left; 35 | } 36 | 37 | #product-form-wrapper, #collection-controls { 38 | width: 25%; 39 | margin-left: 5%; 40 | float: left; 41 | } 42 | 43 | #product-form-wrapper label, #collection-controls label { 44 | display: block; 45 | margin: 1em 0 0.5em 0; 46 | } 47 | 48 | .cart-properties { 49 | font-size: 0.75em; 50 | padding: 0; 51 | list-style: none; 52 | } 53 | 54 | .swatch { 55 | display: inline-block; 56 | border: 1px solid black; 57 | width: 24px; 58 | height: 24px; 59 | } 60 | 61 | .selector-wrapper { 62 | display: none; 63 | } 64 | 65 | .js-hide { 66 | display: none; 67 | } 68 | 69 | .no-js .js-hide { 70 | display: block; 71 | } 72 | 73 | .no-js .swatch-wrapper { 74 | display: none; 75 | } 76 | 77 | #collection-products { 78 | width: 40%; 79 | float: left; 80 | } 81 | 82 | #collection-controls { 83 | width: 25%; 84 | margin-left: 5%; 85 | float: left; 86 | } 87 | 88 | .product-list { 89 | display: block; 90 | padding: 0; 91 | margin: 0; 92 | } 93 | 94 | .product-list:after { 95 | clear: both; 96 | } 97 | 98 | .product-list .product { 99 | list-style: none; 100 | display: block; 101 | padding: 0; 102 | } 103 | 104 | .product-list .product a { 105 | display: block; 106 | } 107 | 108 | .product-list-grid .product { 109 | float: left; 110 | width: 33%; 111 | text-align: center; 112 | } 113 | 114 | .product-list-grid .product:nth-child(3n+1) { 115 | clear: both; 116 | } 117 | 118 | .product-list-grid .product-image { 119 | display: block; 120 | width: 100%; 121 | } 122 | 123 | .product-list-grid .product-title { 124 | display: block; 125 | } 126 | 127 | .product-list-list .product { 128 | clear: both; 129 | } 130 | 131 | .product-list-list .product-image { 132 | display: inline-block; 133 | float: left; 134 | } 135 | 136 | .product-list-list .product-details { 137 | font-size: 80%; 138 | color: #aaa; 139 | } 140 | 141 | .filter-list { 142 | padding: 0; 143 | } 144 | 145 | .filter-list li { 146 | list-style: none; 147 | } 148 | 149 | .pagination { 150 | clear: both; 151 | display: block; 152 | padding-top: 1em; 153 | text-align: center; 154 | } 155 | 156 | .pagination li { 157 | display: inline-block; 158 | list-style: none; 159 | } 160 | 161 | .pagination-text { 162 | text-align: center; 163 | padding-top: 1em; 164 | clear: both; 165 | } 166 | -------------------------------------------------------------------------------- /theme/assets/scss/_normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS and IE text size adjust after device orientation change, 6 | * without disabling user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability of focused elements when they are also in an 95 | * active/hover state. 96 | */ 97 | 98 | a:active, 99 | a:hover { 100 | outline: 0; 101 | } 102 | 103 | /* Text-level semantics 104 | ========================================================================== */ 105 | 106 | /** 107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 108 | */ 109 | 110 | abbr[title] { 111 | border-bottom: 1px dotted; 112 | } 113 | 114 | /** 115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 116 | */ 117 | 118 | b, 119 | strong { 120 | font-weight: bold; 121 | } 122 | 123 | /** 124 | * Address styling not present in Safari and Chrome. 125 | */ 126 | 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | /** 132 | * Address variable `h1` font-size and margin within `section` and `article` 133 | * contexts in Firefox 4+, Safari, and Chrome. 134 | */ 135 | 136 | h1 { 137 | font-size: 2em; 138 | margin: 0.67em 0; 139 | } 140 | 141 | /** 142 | * Address styling not present in IE 8/9. 143 | */ 144 | 145 | mark { 146 | background: #ff0; 147 | color: #000; 148 | } 149 | 150 | /** 151 | * Address inconsistent and variable font size in all browsers. 152 | */ 153 | 154 | small { 155 | font-size: 80%; 156 | } 157 | 158 | /** 159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 160 | */ 161 | 162 | sub, 163 | sup { 164 | font-size: 75%; 165 | line-height: 0; 166 | position: relative; 167 | vertical-align: baseline; 168 | } 169 | 170 | sup { 171 | top: -0.5em; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | /* Embedded content 179 | ========================================================================== */ 180 | 181 | /** 182 | * Remove border when inside `a` element in IE 8/9/10. 183 | */ 184 | 185 | img { 186 | border: 0; 187 | } 188 | 189 | /** 190 | * Correct overflow not hidden in IE 9/10/11. 191 | */ 192 | 193 | svg:not(:root) { 194 | overflow: hidden; 195 | } 196 | 197 | /* Grouping content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Address margin not present in IE 8/9 and Safari. 202 | */ 203 | 204 | figure { 205 | margin: 1em 40px; 206 | } 207 | 208 | /** 209 | * Address differences between Firefox and other browsers. 210 | */ 211 | 212 | hr { 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ 358 | box-sizing: content-box; /* 2 */ 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define consistent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /theme/assets/scss/styles.scss: -------------------------------------------------------------------------------- 1 | /** 2 | * styles.scss 3 | * This is the main stylesheet for our theme. It's the one that's compiled by 4 | * Grunt into /.build/assets/styles.css.liquid. 5 | */ 6 | 7 | @import "normalize"; 8 | @import "custom"; 9 | -------------------------------------------------------------------------------- /theme/config/settings_data.json: -------------------------------------------------------------------------------- 1 | { 2 | } -------------------------------------------------------------------------------- /theme/config/settings_schema.json: -------------------------------------------------------------------------------- 1 | [ 2 | 3 | ] -------------------------------------------------------------------------------- /theme/layout/theme.liquid: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | {{ shop.name | escape }} 5 | 6 | {{ content_for_header }} 7 | {{ 'styles.css' | asset_url | stylesheet_tag }} 8 | 9 | 10 | 16 |
17 | {{ content_for_layout }} 18 |
19 | 20 | {{ 'script.js' | asset_url | script_tag }} 21 | 22 | {% if template contains 'product' %} 23 | {{ 'option_selection.js' | shopify_asset_url | script_tag }} 24 | 63 | {% endif %} 64 | 65 | {% if template contains 'collection' %} 66 | 94 | {% endif %} 95 | 96 | 100 | 101 | 104 | 105 | 106 | 107 | -------------------------------------------------------------------------------- /theme/locales/en.default.json: -------------------------------------------------------------------------------- 1 | { 2 | "general": { 3 | "theme_name": "The Candle Store" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /theme/snippets/collection-view.liquid: -------------------------------------------------------------------------------- 1 |

{{ collection.title }}

2 | 3 |
4 | 5 |
6 | {% paginate collection.products by 3 %} 7 | 8 | 23 | 24 | {% include 'pagination' %} 25 | 26 | {% endpaginate %} 27 |
28 | 29 |
30 | 31 | 32 |
    33 |
  • 34 | {% if collection.handle == 'all' %} 35 | Any 36 | {% else %} 37 | Any 38 | {% endif %} 39 |
    • 40 | {% for category_collection in collections %} 41 |
  • 42 | {% if category_collection.handle == collection.handle %} 43 | {{ category_collection.title }} 44 | {% else %} 45 | {{ category_collection.title }} 46 | {% endif %} 47 |
    • 48 | {% endfor %} 49 |
50 | 51 | 52 |
    53 | {% for tag in collection.tags %} 54 |
  • 55 | {% if current_tags contains tag %} 56 | {{ '☑' | append: tag | link_to_remove_tag:tag | replace:' 61 | {% endfor %} 62 |
63 | 64 |
65 | 66 | 67 | 71 | 72 | {% assign current_sort_by = collection.sort_by | default: collection.default_sort_by %} 73 | 74 | 84 | 85 |

86 | 87 |

88 | 89 |
90 | 91 | 92 | -------------------------------------------------------------------------------- /theme/snippets/pagination.liquid: -------------------------------------------------------------------------------- 1 | {% if paginate.parts.size > 0 %} 2 |
27 | {% endif %} 28 |

29 | Showing {{ paginate.current_offset | plus: 1 }} - {% if paginate.next %}{{ paginate.current_offset | plus: paginate.page_size }}{% else %}{{ paginate.items }}{% endif %} of {{ paginate.items }} 30 |

31 | -------------------------------------------------------------------------------- /theme/snippets/swatch.liquid: -------------------------------------------------------------------------------- 1 | {% for option in product.options %} 2 | {% if option == swatch %} 3 |
4 | {% assign option_index = forloop.index0 %} 5 | 6 | {% assign displayed_option_values = '' %} 7 | {% for variant in product.variants %} 8 | {% assign option_value = variant.options[option_index] %} 9 | {% unless displayed_option_values contains option_value %} 10 | {% if option == 'Color' or option == 'Colour' %} 11 | 12 | {% else %} 13 | {{ option_value }} 14 | {% endif %} 15 | {% assign displayed_option_values = displayed_option_values | join: ',' %} 16 | {% assign displayed_option_values = displayed_option_values | append: ',' | append: option_value %} 17 | {% assign displayed_option_values = displayed_option_values | split: ',' %} 18 | {% endunless %} 19 | {% endfor %} 20 |
21 | {% endif %} 22 | {% endfor %} 23 | -------------------------------------------------------------------------------- /theme/templates/404.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/404.liquid -------------------------------------------------------------------------------- /theme/templates/article.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/article.liquid -------------------------------------------------------------------------------- /theme/templates/blog.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/blog.liquid -------------------------------------------------------------------------------- /theme/templates/cart.liquid: -------------------------------------------------------------------------------- 1 |

Your Cart

2 | 3 | 4 | 5 | {% for item in cart.items %} 6 | 7 | 12 | 27 | 28 | 29 | 30 | 31 | {% endfor %} 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 |
8 | 9 | {{ item.title | escape }} 10 | 11 | 13 | 14 | {{ item.product.title }} 15 | {% if item.product.variants.size > 1 %} 16 | {{ item.variant.title }} 17 | {% endif %} 18 | 19 | {% if item.properties %} 20 |
    21 | {% for property in item.properties %} 22 |
  • {{ property.first }}: {{ property.last }}
    • 23 | {% endfor %} 24 |
25 | {% endif %} 26 | 		{{ item.quantity }}{{ item.line_price | money }}Remove
Total:{{ cart.total_price | money }}
41 | 42 |

43 | Check Out 44 |

45 | -------------------------------------------------------------------------------- /theme/templates/collection.liquid: -------------------------------------------------------------------------------- 1 | {% include 'collection-view' with 'grid' %} 2 | -------------------------------------------------------------------------------- /theme/templates/collection.list.liquid: -------------------------------------------------------------------------------- 1 | {% include 'collection-view' with 'list' %} 2 | -------------------------------------------------------------------------------- /theme/templates/customers/account.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/customers/account.liquid -------------------------------------------------------------------------------- /theme/templates/customers/activate_account.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/customers/activate_account.liquid -------------------------------------------------------------------------------- /theme/templates/customers/addresses.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/customers/addresses.liquid -------------------------------------------------------------------------------- /theme/templates/customers/login.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/customers/login.liquid -------------------------------------------------------------------------------- /theme/templates/customers/order.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/customers/order.liquid -------------------------------------------------------------------------------- /theme/templates/customers/register.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/customers/register.liquid -------------------------------------------------------------------------------- /theme/templates/customers/reset_password.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/customers/reset_password.liquid -------------------------------------------------------------------------------- /theme/templates/index.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/index.liquid -------------------------------------------------------------------------------- /theme/templates/page.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/page.liquid -------------------------------------------------------------------------------- /theme/templates/product.liquid: -------------------------------------------------------------------------------- 1 |

{{ product.title }}

2 | 3 |
4 | {% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %} 5 |

6 | {{ featured_image.alt }} 7 |

8 | {% for image in product.images %} 9 | 10 | {{ image.alt }} 11 | 12 | {% endfor %} 13 |
14 | 15 |
16 |
17 | 18 | 19 |

{{ product.price_min | money }} to {{ product.price_max | money }}

20 | 21 | 22 | 23 | 28 | 29 | 30 | {% for option in product.options %} 31 | {% include 'swatch' with option %} 32 | {% endfor %} 33 | 34 | 35 | {% if product.metafields.properties.engraving %} 36 | 37 | 38 | {% endif %} 39 | 40 | 41 |

42 | 43 |

44 | 45 |
46 |
47 | -------------------------------------------------------------------------------- /theme/templates/search.liquid: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gavinballard/skillshare-examples/2f7feaa01ec0786805b16f7022398b427ede8078/theme/templates/search.liquid --------------------------------------------------------------------------------