elements inside
- blocks. */
-pre code, pre kbd, pre samp { font-size: 100%; }
-
-/* Used to denote text that shouldn't be selectable, such as line numbers or
- shell prompts. Guess which browser this doesn't work in. */
-.noselect {
- -moz-user-select: -moz-none;
- -khtml-user-select: none;
- -webkit-user-select: none;
- -o-user-select: none;
- user-select: none;
-}
-
-/* -- Lists ----------------------------------------------------------------- */
-dd { margin: 0.2em 0 0.7em 1em; }
-dl { margin: 1em 0; }
-dt { font-weight: bold; }
-
-/* -- Tables ---------------------------------------------------------------- */
-caption, th { text-align: left; }
-
-table {
- border-collapse: collapse;
- width: 100%;
-}
-
-td, th {
- border: 1px solid #fff;
- padding: 5px 12px;
- vertical-align: top;
-}
-
-td { background: #E6E9F5; }
-td dl { margin: 0; }
-td dl dl { margin: 1em 0; }
-td pre:first-child { margin-top: 0; }
-
-th {
- background: #D2D7E6;/*#97A0BF*/
- border-bottom: none;
- border-top: none;
- color: #000;/*#FFF1D5*/
- font-family: 'Trebuchet MS', sans-serif;
- font-weight: bold;
- line-height: 1.3;
- white-space: nowrap;
-}
-
-
-
-/* -- Table of Contents ----------------------------------------------------- */
-
-/* The #toc id refers to the single global table of contents, while the .toc
- class refers to generic TOC lists that could be used throughout the page. */
-
-.toc code, .toc kbd, .toc samp { font-size: 100%; }
-.toc li { font-weight: bold; }
-.toc li li { font-weight: normal; }
-
-/* -- Intro and Example Boxes ----------------------------------------------- */
-/*
-.intro, .example { margin-bottom: 2em; }
-.example {
- -moz-border-radius: 4px;
- -webkit-border-radius: 4px;
- border-radius: 4px;
- -moz-box-shadow: 0 0 5px #bfbfbf;
- -webkit-box-shadow: 0 0 5px #bfbfbf;
- box-shadow: 0 0 5px #bfbfbf;
- padding: 1em;
-}
-.intro {
- background: none repeat scroll 0 0 #F0F1F8; border: 1px solid #D4D8EB; padding: 0 1em;
-}
-*/
-
-/* -- Other Styles ---------------------------------------------------------- */
-
-/* These are probably YUI-specific, and should be moved out of Selleck's default
- theme. */
-
-.button {
- border: 1px solid #dadada;
- -moz-border-radius: 3px;
- -webkit-border-radius: 3px;
- border-radius: 3px;
- color: #444;
- display: inline-block;
- font-family: Helvetica, Arial, sans-serif;
- font-size: 92.308%;
- font-weight: bold;
- padding: 4px 13px 3px;
- -moz-text-shadow: 1px 1px 0 #fff;
- -webkit-text-shadow: 1px 1px 0 #fff;
- text-shadow: 1px 1px 0 #fff;
- white-space: nowrap;
-
- background: #EFEFEF; /* old browsers */
- background: -moz-linear-gradient(top, #f5f5f5 0%, #efefef 50%, #e5e5e5 51%, #dfdfdf 100%); /* firefox */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(50%,#efefef), color-stop(51%,#e5e5e5), color-stop(100%,#dfdfdf)); /* webkit */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f5f5', endColorstr='#dfdfdf',GradientType=0 ); /* ie */
-}
-
-.button:hover {
- border-color: #466899;
- color: #fff;
- text-decoration: none;
- -moz-text-shadow: 1px 1px 0 #222;
- -webkit-text-shadow: 1px 1px 0 #222;
- text-shadow: 1px 1px 0 #222;
-
- background: #6396D8; /* old browsers */
- background: -moz-linear-gradient(top, #6396D8 0%, #5A83BC 50%, #547AB7 51%, #466899 100%); /* firefox */
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6396D8), color-stop(50%,#5A83BC), color-stop(51%,#547AB7), color-stop(100%,#466899)); /* webkit */
- filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6396D8', endColorstr='#466899',GradientType=0 ); /* ie */
-}
-
-.newwindow { text-align: center; }
-
-.header .version em {
- display: block;
- text-align: right;
-}
-
-
-#classdocs .item {
- border-bottom: 1px solid #466899;
- margin: 1em 0;
- padding: 1.5em;
-}
-
-#classdocs .item .params p,
- #classdocs .item .returns p,{
- display: inline;
-}
-
-#classdocs .item em code, #classdocs .item em.comment {
- color: green;
-}
-
-#classdocs .item em.comment a {
- color: green;
- text-decoration: underline;
-}
-
-#classdocs .foundat {
- font-size: 11px;
- font-style: normal;
-}
-
-.attrs .emits {
- margin-left: 2em;
- padding: .5em;
- border-left: 1px dashed #ccc;
-}
-
-abbr {
- border-bottom: 1px dashed #ccc;
- font-size: 80%;
- cursor: help;
-}
-
-.prettyprint li.L0,
-.prettyprint li.L1,
-.prettyprint li.L2,
-.prettyprint li.L3,
-.prettyprint li.L5,
-.prettyprint li.L6,
-.prettyprint li.L7,
-.prettyprint li.L8 {
- list-style: decimal;
-}
-
-ul li p {
- margin-top: 0;
-}
-
-.method .name {
- font-size: 110%;
-}
-
-.apidocs .methods .extends .method,
-.apidocs .properties .extends .property,
-.apidocs .attrs .extends .attr,
-.apidocs .events .extends .event {
- font-weight: bold;
-}
-
-.apidocs .methods .extends .inherited,
-.apidocs .properties .extends .inherited,
-.apidocs .attrs .extends .inherited,
-.apidocs .events .extends .inherited {
- font-weight: normal;
-}
-
-#hd {
- background: whiteSmoke;
- background: -moz-linear-gradient(top,#DCDBD9 0,#F6F5F3 100%);
- background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#DCDBD9),color-stop(100%,#F6F5F3));
- filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dcdbd9',endColorstr='#F6F5F3',GradientType=0);
- border-bottom: 1px solid #DFDFDF;
- padding: 0 15px 1px 20px;
- margin-bottom: 15px;
-}
-
-#hd img {
- margin-right: 10px;
- vertical-align: middle;
-}
-
-
-/* -- API Docs CSS ---------------------------------------------------------- */
-
-/*
-This file is organized so that more generic styles are nearer the top, and more
-specific styles are nearer the bottom of the file. This allows us to take full
-advantage of the cascade to avoid redundant style rules. Please respect this
-convention when making changes.
-*/
-
-/* -- Generic TabView styles ------------------------------------------------ */
-
-/*
-These styles apply to all API doc tabviews. To change styles only for a
-specific tabview, see the other sections below.
-*/
-
-.yui3-js-enabled .apidocs .tabview {
- visibility: hidden; /* Hide until the TabView finishes rendering. */
- _visibility: visible;
-}
-
-.apidocs .tabview.yui3-tabview-content { visibility: visible; }
-
-/* -- Generic Content Styles ------------------------------------------------ */
-
-/* Headings */
-h2, h3, h4, h5, h6 {
- border: none;
- color: #333;
- font-weight: bold;
- text-decoration: none;
-}
-
-.link-docs {
- float: right;
- font-size: 15px;
- margin: 4px 4px 6px;
- padding: 6px 30px 5px;
-}
-
-.apidocs { zoom: 1; }
-
-/* Generic box styles. */
-.apidocs .box {
- border: 1px solid;
- border-radius: 3px;
- margin: 1em 0;
- padding: 0 1em;
-}
-
-/* A flag is a compact, capsule-like indicator of some kind. It's used to
- indicate private and protected items, item return types, etc. in an
- attractive and unobtrusive way. */
-.apidocs .flag {
- background: #bababa;
- border-radius: 3px;
- color: #fff;
- font-size: 11px;
- margin: 0 0.5em;
- padding: 2px 4px 1px;
-}
-
-/* Class/module metadata such as "Uses", "Extends", "Defined in", etc. */
-.apidocs .meta {
- background: #f9f9f9;
- border-color: #efefef;
- color: #555;
- font-size: 11px;
- padding: 3px 6px;
-}
-
-.apidocs .meta p { margin: 0; }
-
-/* Deprecation warning. */
-.apidocs .box.deprecated,
-.apidocs .flag.deprecated {
- background: #fdac9f;
- border: 1px solid #fd7775;
-}
-
-.apidocs .box.deprecated p { margin: 0.5em 0; }
-.apidocs .flag.deprecated { color: #333; }
-
-/* Module/Class intro description. */
-.apidocs .intro {
- background: #f0f1f8;
- border-color: #d4d8eb;
-}
-
-/* Loading spinners. */
-#bd.loading .apidocs,
-
-#bd.loading .apidocs .content,
-#api-list.loading .yui3-tabview-panel .apis {
- display: none;
-}
-
-.apidocs .no-visible-items { color: #666; }
-
-/* Generic inline list. */
-.apidocs ul.inline {
- display: inline;
- list-style: none;
- margin: 0;
- padding: 0;
-}
-
-.apidocs ul.inline li { display: inline; }
-
-/* Comma-separated list. */
-.apidocs ul.commas li:after { content: ','; }
-.apidocs ul.commas li:last-child:after { content: ''; }
-
-/* Keyboard shortcuts. */
-kbd .cmd { font-family: Monaco, Helvetica; }
-
-/* -- Generic Access Level styles ------------------------------------------- */
-.apidocs .item.protected,
-.apidocs .item.private,
-.apidocs .index-item.protected,
-.apidocs .index-item.deprecated,
-.apidocs .index-item.private {
- display: none;
-}
-
-.show-deprecated .item.deprecated,
-.show-deprecated .index-item.deprecated,
-.show-protected .item.protected,
-.show-protected .index-item.protected,
-.show-private .item.private,
-.show-private .index-item.private {
- display: block;
-}
-
-.hide-inherited .item.inherited,
-.hide-inherited .index-item.inherited {
- display: none;
-}
-
-/* -- Generic Item Index styles --------------------------------------------- */
-.apidocs .index { margin: 1.5em 0 3em; }
-
-.apidocs .index h3 {
- border-bottom: 1px solid #efefef;
- color: #333;
- font-size: 13px;
- margin: 2em 0 0.6em;
- padding-bottom: 2px;
-}
-
-.apidocs .index .no-visible-items { margin-top: 2em; }
-
-.apidocs .index-list {
- border-color: #efefef;
- font-size: 12px;
- list-style: none;
- margin: 0;
- padding: 0;
- -moz-column-count: 4;
- -moz-column-gap: 10px;
- -moz-column-width: 170px;
- -ms-column-count: 4;
- -ms-column-gap: 10px;
- -ms-column-width: 170px;
- -o-column-count: 4;
- -o-column-gap: 10px;
- -o-column-width: 170px;
- -webkit-column-count: 4;
- -webkit-column-gap: 10px;
- -webkit-column-width: 170px;
- column-count: 4;
- column-gap: 10px;
- column-width: 170px;
-}
-
-.apidocs .no-columns .index-list {
- -moz-column-count: 1;
- -ms-column-count: 1;
- -o-column-count: 1;
- -webkit-column-count: 1;
- column-count: 1;
-}
-
-.apidocs .index-item { white-space: nowrap; }
-
-.apidocs .index-item .flag {
- background: none;
- border: none;
- color: #afafaf;
- display: inline;
- margin: 0 0 0 0.2em;
- padding: 0;
-}
-
-/* -- Generic API item styles ----------------------------------------------- */
-.apidocs .args {
- display: inline;
- margin: 0 0.5em;
-}
-
-.apidocs .flag.chainable { background: #46ca3b; }
-.apidocs .flag.protected { background: #9b86fc; }
-.apidocs .flag.private { background: #fd6b1b; }
-.apidocs .flag.async { background: #356de4; }
-.apidocs .flag.required { background: #e60923; }
-
-.apidocs .item {
- border-bottom: 1px solid #efefef;
- margin: 1.5em 0 2em;
- padding-bottom: 2em;
-}
-
-.apidocs .item h4,
-.apidocs .item h5,
-.apidocs .item h6 {
- color: #333;
- font-family: inherit;
- font-size: 100%;
-}
-
-.apidocs .item .description p,
-.apidocs .item pre.code {
- margin: 1em 0 0;
-}
-
-.apidocs .item .meta {
- background: none;
- border: none;
- padding: 0;
-}
-
-.apidocs .item .name {
- display: inline;
- font-size: 14px;
-}
-
-.apidocs .item .type,
-.apidocs .item .type a,
-.apidocs .returns-inline {
- color: #555;
-}
-
-.apidocs .item .type,
-.apidocs .returns-inline {
- font-size: 11px;
- margin: 0 0 0 0;
-}
-
-.apidocs .item .type a { border-bottom: 1px dotted #afafaf; }
-.apidocs .item .type a:hover { border: none; }
-
-/* -- Item Parameter List --------------------------------------------------- */
-.apidocs .params-list {
- list-style: square;
- margin: 1em 0 0 2em;
- padding: 0;
-}
-
-.apidocs .param { margin-bottom: 1em; }
-
-.apidocs .param .type,
-.apidocs .param .type a {
- color: #666;
-}
-
-.apidocs .param .type {
- margin: 0 0 0 0.5em;
- *margin-left: 0.5em;
-}
-
-.apidocs .param-name { font-weight: bold; }
-
-/* -- Item "Emits" block ---------------------------------------------------- */
-.apidocs .item .emits {
- background: #f9f9f9;
- border-color: #eaeaea;
-}
-
-/* -- Item "Returns" block -------------------------------------------------- */
-.apidocs .item .returns .type,
-.apidocs .item .returns .type a {
- font-size: 100%;
- margin: 0;
-}
-
-/* -- Class Constructor block ----------------------------------------------- */
-.apidocs .constructor .item {
- border: none;
- padding-bottom: 0;
-}
-
-/* -- File Source View ------------------------------------------------------ */
-.apidocs .file pre.code,
-#doc .apidocs .file pre.prettyprint {
- background: inherit;
- border: none;
- overflow: visible;
- padding: 0;
-}
-
-.apidocs .L0,
-.apidocs .L1,
-.apidocs .L2,
-.apidocs .L3,
-.apidocs .L4,
-.apidocs .L5,
-.apidocs .L6,
-.apidocs .L7,
-.apidocs .L8,
-.apidocs .L9 {
- background: inherit;
-}
-
-/* -- Submodule List -------------------------------------------------------- */
-.apidocs .module-submodule-description {
- font-size: 12px;
- margin: 0.3em 0 1em;
-}
-
-.apidocs .module-submodule-description p:first-child { margin-top: 0; }
-
-/* -- Sidebar TabView ------------------------------------------------------- */
-#api-tabview { margin-top: 0.6em; }
-
-#api-tabview-filter {
- border-bottom: none;
- border-top: none;
- padding: 0.6em 10px 0 10px;
-}
-
-#api-tabview-panel { border-top: none; }
-#api-filter { width: 97%; }
-
-/* -- Content TabView ------------------------------------------------------- */
-#classdocs .yui3-tabview-panel { border: none; }
-
-/* -- Source File Contents -------------------------------------------------- */
-.prettyprint li.L0,
-.prettyprint li.L1,
-.prettyprint li.L2,
-.prettyprint li.L3,
-.prettyprint li.L5,
-.prettyprint li.L6,
-.prettyprint li.L7,
-.prettyprint li.L8 {
- list-style: decimal;
-}
-
-
-/*#api-options label { margin-right: 0.6em; }*/
-
-.apis {
- font-size: 12px;
- line-height: 1.4;
- list-style: none;
- margin: 0;
- padding: 0.5em 0 0.5em 0.4em;
-}
-
-.apis a {
- border: 1px solid transparent;
- display: block;
- margin: 0 0 0 -4px;
- padding: 1px 4px 0;
- text-decoration: none;
- _border: none;
- _display: inline;
-}
-
-.apis a:hover,
-.apis a:focus {
- background: #E8EDFC;
- background: -moz-linear-gradient(top, #e8edfc 0%, #becef7 100%);
- background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#E8EDFC), color-stop(100%,#BECEF7));
- border-color: #AAC0FA;
- border-radius: 3px;
- color: #333;
- outline: none;
-}
-
-.api-list-item a:hover,
-.api-list-item a:focus {
- font-weight: bold;
- text-shadow: 1px 1px 1px #fff;
-}
-
-.apis .message { color: #888; }
-.apis .result a { padding: 3px 5px 2px; }
-
-.apis .result .type {
- right: 4px;
- top: 7px;
-}
-
-.api-list-item .yui3-highlight {
- font-weight: bold;
-}
diff --git a/docs/index.md b/docs/index.md
deleted file mode 100644
index 295b1228b..000000000
--- a/docs/index.md
+++ /dev/null
@@ -1,76 +0,0 @@
----
-layout: default
----
-
-# Slate
-
-Slate is a theme scaffold and command line tool for developing Shopify themes. It is designed to assist your development workflow and speed up the process of developing, testing, and deploying themes to Shopify stores.
-
-Slate allows you to sync local files with your live shop, deploy to multiple environments at the same time, and organize stylesheets and scripts in a flexible way.
-
-## Getting started
-
-
-Slate works with Node version 6.x, the current LTS (long-term support) release. This version is recommended over older versions of Node.
-
-
-The steps below walk through installing Slate globally and configuring your development theme to sync with your store. If you want the theme files without the build tools dependency, get the latest zip here.
-
-### Create a new project
-
-1. Install Slate with `npm install -g @shopify/slate`.
-2. Create a new theme with `slate theme theme-name`, where `theme-name` will be a newly created folder.
- * If you already have a theme locally, you can use the `slate migrate` command and [follow these steps](/slate/commands/#migrate) instead.
-
-### Connect your project with your Shopify store
-
-1. Edit the `config.yml` by adding your store's URL to the `development` environment.
- * **store:** the Shopify-specific URL for this store/environment (ie. my-store.myshopify.com)
- * Note: You can complete the rest of the configuration in later steps.
-
-2. Run `slate deploy -m` to start a manual deploy to your Shopify store.
- * Slate will build a Shopify theme and open your store's admin.
- * A zip of your project will be created in the project's `upload` directory.
-
-3. Upload the theme zip file at Shopify [admin/themes](https://shopify.com/admin/themes).
- * Not sure how to upload a theme zip? Learn how at [Upload a theme from your computer](https://help.shopify.com/manual/using-themes/install-themes#upload-a-theme-from-your-computer).
-
-4. Edit the `config.yml` to include the theme id of your new theme.
- * **theme_id:** the unique id for the theme you want to write to when deploying to this store. You can find this information in the URL of the theme's online editor at Shopify [admin/themes](https://shopify.com/admin/themes). Alternatively, you can use `"live"` as shorthand for the published theme.
- 
-
-5. Create a private app from your Shopify admin.
- * Not sure how to create a private app? Learn how at [Generate credentials in the Shopify admin](https://help.shopify.com/api/getting-started/api-credentials#generate-credentials-in-the-shopify-admin).
- * Set the "Theme templates and theme assets" permission to "Read and write".
-
-
-6. Edit the `config.yml` to include the password of your new private app.
- * **password:** the password generated via a private app on this store. Access this information on your Shopify [admin/apps/private](https://shopify.com/admin/apps/private) page.
-
- * Note: You can use the same private app password for any `config.yml` environment
- as long as it is for the same store.
-
-7. From within your new project folder in your command line, use the [Slate commands](#slate-commands) below to build, sync, and watch your local files.
-
-## Slate commands
-
-### Global
-* `slate theme [name]` - Generate a new blank theme
-* `slate migrate` - Convert an existing theme to work with Slate
-* `slate -h` - Options available in your current directory (differs if not in a theme)
-* `slate -v` - See your currently installed version of Slate and dependencies
-
-### Theme
-* `slate build` — Concatenates JS and SCSS, optimizes SVG icons to be used as snippets, and copies over all other files and folders to a `dist` folder
-* `slate deploy` — Builds your `dist` folder and replaces the theme set in config.yml
-* `slate watch` — Listens for changes to your local source files and deploys them to your shop
-* `slate start` — Runs build, deploy, then watch to get you developing on your shop quickly
-* `slate zip` — Builds and compresses your `dist` to a zip file for easy manual upload
-
-> Learn more about [all commands and descriptions](/slate/commands/) or how to [deploy to multiple environments](/slate/commands/#sync-commands).
-
-## Working with Git repositories
-
-A new Slate project comes with a `.gitignore` file. This file is useful if you plan on using Git for version control as it contains a list of files and folders to be ignored when committing to a git repository. Ignored files are both Slate project specific files as well as commonly ignored files on any project.
-
-For more information on `.gitignore` files, see GitHub's documentation: https://help.github.com/articles/ignoring-files/
diff --git a/docs/js-examples/index.md b/docs/js-examples/index.md
deleted file mode 100644
index 2029e7bf1..000000000
--- a/docs/js-examples/index.md
+++ /dev/null
@@ -1,283 +0,0 @@
----
-layout: default
----
-# JS examples
-
-## Trap focus
-
-It's important to consider keyboard users when using dynamic modules, such as a modal or popover. If they take over the full screen then it's best to limit the user's keyboard access to that module so they don't end up tabbing through hidden elements on the page.
-
-Here's an example of a modal that traps the keyboard focus inside the element when open, and removes the trap when closed.
-
-```
-slate.a11y.trapFocus({ options });
-slate.a11y.removeTrapFocus({ options });
-```
-
-| Parameters | Type | Description |
-| :----------------- | :------------ | :------------ |
-| `$container` | jQuery object | Container to trap focus within |
-| `namespace` | string | Namespace used for new focus event handler |
-| `$elementToFocus` | jQuery object (optional) | Set an element to be selected after the focus is trapped. Only used in `trapFocus`. |
-
-```
-var $modal = $('#Modal');
-
-$('#TriggerModal').on('click', function() {
- $modal.addClass('is-active');
-
- slate.a11y.trapFocus({
- $container: $modal,
- namespace: 'modal',
- $elementToFocus: $modal.find('input[type="text"]')
- });
-});
-
-$('#CloseModal').on('click', function() {
- $modal.removeClass('is-active');
-
- slate.a11y.removeTrapFocus({
- $container: $modal,
- namespace: 'modal'
- });
-});
-```
-
-
- {% include iframe-toggles.html %}
-
-
-
-## Responsive tables and videos
-
-Tables and video embeds do not natively scale well on smaller screens. Slate adds a wrapper class to tables and video embeds that are loaded in from a rich text editor.
-
-| Parameters | Type | Description |
-| :------------------- | :------------ | :------------ |
-| `$tables` | jQuery object | `` elements to be made responsive |
-| `tableWrapperClass` | string | CSS class to apply on the `` that will wrap each targeted `
` element |
-| `$iframes` | jQuery object | `
-
-
-## Format currency
-
-Slate ships JavaScript to mimic [Shopify money formats](https://help.shopify.com/manual/payment-settings/currency-formatting#currency-formatting-options). This makes handling product prices and cart items in JS simple. ([View currency.js source](https://github.com/Shopify/slate/blob/master/packages/slate-theme/src/scripts/slate/currency.js)).
-
-Slate maps the shop's money format — defined in Liquid — to a JavaScript variable in `layouts/theme.liquid` so it can be used regardless of file type.
-
-In layouts/theme.liquid:
-
-```
-window.theme.moneyFormat: {% raw %}{{ shop.money_format | json }}{% endraw %};
-```
-
-| Parameters | Type | Description |
-| :-------------- | :-------------- | :------------- |
-| `cents` | string | Price in cents |
-| `format` | string | shop.money_format setting |
-
-In this example, `shop.money_format` is {% raw %}`${{amount}}`{% endraw %} so 1999 cents would be formatted as $19.99.
-
-```
-var itemPrice = 1999; // cents
-slate.Currency.formatMoney(itemPrice, theme.moneyFormat);
-
-// Returns string
-'$19.99'
-```
-
-## Image helpers
-
-| Command | Usage |
-| :------ | :---- |
-| [preload](#preload) | `slate.Images.preload(images, size)` |
-| [imageSize](#imagesize) | `slate.Images.imageSize(src)` |
-| [getSizedImageUrl](#getsizedimageurl) | `slate.Images.getSizedImageUrl(src, size)` |
-| [removeProtocol](#removeprotocol) | `slate.Images.removeProtocol(path)` |
-
-### preload
-
-Preload a single image or an array of images at a given size. A common use for preloading is reducing the loading delay when enlarging a thumbnail.
-
-| Parameters | Type | Description |
-| :----------------- | :-------------- | :------------ |
-| `images` | array or string | Single image URL or list of image URLs |
-| `size` | string | Size of image to request |
-
-```
-slate.Image.preload(['image-url-1.jpg', 'image-url-2.jpg'], '1024x1024');
-```
-
-### imageSize
-
-Get the size of an image based on the URL.
-
-| Parameters | Type | Description |
-| :-------------- | :-------------- | :------------ |
-| `src` | string | Image URL |
-
-```
-slate.Image.imageSize('https://cdn.shopify.com/s/files/big-ol-image_480x480.jpeg');
-
-// Returns string
-'480x480'
-```
-
-### getSizedImageUrl
-
-Adds a Shopify size attribute to a URL
-
-| Parameters | Type | Description |
-| :-------------- | :-------------- | :------------ |
-| `src` | string | Image URL |
-| `size` | string | Custom size |
-
-```
-slate.Image.getSizedImageUrl('https://cdn.shopify.com/s/files/big-ol-image.jpeg', '250x250');
-
-// Returns string
-'https://cdn.shopify.com/s/files/big-ol-image_250x250.jpeg'
-```
-
-### removeProtocol
-
-| Parameters | Type | Description |
-| :-------------- | :-------------- | :------------ |
-| `path` | string | Image URL |
-
-```
-slate.Image.removeProtocol('https://cdn.shopify.com/s/files/big-ol-image_480x480.jpeg')
-
-// Returns string
-'//cdn.shopify.com/s/files/big-ol-image_480x480.jpeg'
-```
-
-## Product variants
-
-The Slate theme has two script files to manage the display of product variants:
-
-| Script | Location | Description |
-| :-------------- | :-------------- | :------------ |
-| [variant.js](#variantjs) | `scripts/slate` | Handles variant change events in any forms that add to cart |
-| [product.js](#productjs) | `scripts/sections` | Behaviour coupled to the theme code of product-based sections |
-
-### variant.js
-
-Slate separates product variant options into multiple `