{"_id":"5903e3560fd96b2f00a6821a","user":"55a6caa022cfa321008e01d6","parentDoc":null,"project":"55a6e72e8cc73e0d00096635","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":29,"hasDoc":true,"createdAt":"2015-07-15T23:05:19.125Z","releaseDate":"2015-07-15T23:05:19.125Z","categories":["55a6e7308cc73e0d00096639","55b7ed07aea7c8190058badb","5604567c0c78b00d0039b191","5605e6f23a93940d002b3e4a","5605f2bba4574a0d00811365","5605f309a4574a0d00811366","5608e3b98aedf50d0004cf8f","5608e4318aedf50d0004cf90","5608e6b5a7cc2f0d00d9754d","5608e6d331beb60d001b6560","5608f879a7cc2f0d00d97580","560b097887b71d0d000d3bd9","560b13cbafa0990d00979545","560b5cbec341310d00de2a01","560b5cd0c341310d00de2a02","566a35b81e08750d00a0c49b","566a3e8503b4b20d00d02a4a","567889d307bf6a0d0083edc8","569c8b7c15bb390d00db6f9d","56b254dc65ddf50d0076ba8f","57a8ebc4cdeea20e001d2a63","57e48a4000c8680e00fae6e7","5808216773557d0f00a1e428","58105ad54a8aa50f00aa4cba","58105bf298aea40f00afa3ba","58105f548a4aed0f00d67536","581061b898aea40f00afa3be","584b3de7e5f3a42300df6ef7","596839a75965d400155bb750"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"__v":0,"category":{"_id":"55b7ed07aea7c8190058badb","pages":["55b7edb7568be2230092bc34","5660974de163310d006b1954","569c05661719050d00025af4","569c06cdd326c80d0068f735","569d7e083dbdc20d005feeda"],"project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","__v":5,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-07-28T20:58:47.836Z","from_sync":false,"order":0,"slug":"welcome-to-stencil","title":"Welcome to Stencil"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2017-04-29T00:50:30.828Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"settings":"","results":{"codes":[]},"auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:html]\n{\n  \"html\": \"<!-- !!! Reference sections (Stencil Object Model, Front-Matter Attributes) should link back :::at::: head to procedural instructions!!!\\n\\nImage float (thumbnail, right) code:\\n<img style=\\\"float: right; margin: 0px 0px 0px 30px;\\\" src=\\\"https://files.readme.io/76514b0-ThumbnailCornerstone-3294x370.png\\\" alt=\\\"A Stencil Theme\\\" height=\\\"248\\\" width=\\\"197\\\">\\n\\n<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://youtu.be/d2F6F8LJXzs?list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\\n\\n<iframe width=\\\"560\\\" height=\\\"315\\\" src=\\\"https://youtu.be/waJ1dg_dAh8?list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0\\\" frameborder=\\\"0\\\" allowfullscreen></iframe>\\n\\n<hr style=\\\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\\\"/>\\n\\n* [HTML/CSS Refreshers](#htmlcss)\\n\\n## <a name=\\\"htmlcss\\\"></a> HTML/CSS Refreshers:\\n\\nHere are some links to help you get up to speed on, or refresh your basic working knowledge of, HTML and CSS:\\n\\n### HTML:\\n* http://www.w3schools.com/html/    \\n* https://www.tutorialspoint.com/html/\\n\\n### CSS:\\n* http://www.w3schools.com/css/   \\n* https://www.tutorialspoint.com/css/\\n\\n* [SEO Overview](https://support.bigcommerce.com/articles/Public/SEO-Overview)\\n* [More SEO resources](https://support.bigcommerce.com/?q=seo)\\n-->\"\n}\n[/block]\nAre you approaching Stencil from a different theming framework, like BigCommerce's earlier Blueprint framework? Or moving to this templating environment from pure HTML- and CSS-based design?\n\nUse this page's resources and links to identify your ideal method for Stencil theme development, and to quickly ramp up on the conventions that Stencil uses:\n\n* [Choosing a Development Path](#choose)\n* [Front-Matter Quick Start](#frontmatter)\n* [Handlebars Quick Start](#hb)\n* [SEO Tips/Best Practices](#seo)\n* [Blueprint-to-Stencil Features Map](#map)\n* [Interacting with the BigCommerce API](#api)\n* [Partnering with BigCommerce](#partner)\n* [Next Steps](#Next)\n\n<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n## <a name=\"choose\"></a> Choosing a Development Path\n\nYou have four increasingly hands-on options for developing Stencil themes:\n* [Find a Design & Solutions Partner](#dsp)\n* [Light Customization – Graphical Theme Editor](#ted)\n* [Light Customization – HTML/CSS](#edt)\n* [Adapt a Stencil Theme, or Develop from Scratch](#cli)\n<br>\n\n###  <a name=\"dsp\"></a> Find a Design & Solutions Partner\n\nIf you prefer to have an expert collaborator customize your theme, we recommend working with one of our certified BigCommerce Design & Solutions Partners. Please see these resources:\n\n* [Partner Directory](https://partners.bigcommerce.com/directory/search?i=75)\n* [Working with a Design Partner](https://support.bigcommerce.com/articles/Learning/Working-with-a-Design-Partner) (Support Guide)\n<br>\n\n\n### <a name=\"ted\"></a> Light Customization – Graphical Theme Editor\n\nA designer or store owner can customize many aspects of an existing Stencil theme _without_ using specialized development tools or techniques. Stencil's graphical Theme Editor requires no coding at all. \n\nYet Theme Editor still enables customization of a theme's colors, typography, banners, headings, carousel, and footer. It also enables customization of broader layout characteristics, such as the number of products displayed in various panels, category pages, and brand pages.\n\n<img style=\"float: right; margin: 0px 0px 0px 30px;\" src=\"https://files.readme.io/698f15f-Theme-Editor-50.png\" alt=\"Stencil Theme Editor\" height=\"60%\" width=\"60%\" style=\"border:1px solid #D1D7E0\">\n\nFor details, please see:\n\n* [Theme Editor](https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/) (Support article)\n* [Stencil and the BigCommerce Control Panel](https://www.youtube.com/watch?v=d2F6F8LJXzs&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0&index=2) (Video introduction to Theme Editor)\n* [Changing Your Store's Theme](https://support.bigcommerce.com/articles/Learning/What-to-Consider-When-Changing-Your-Theme) (Support guide)\n* [Personalizing Your Theme](https://support.bigcommerce.com/articles/Learning/Personalizing-your-New-Theme) (Support guide)\n<br><br>\n\n### <a name=\"edt\"></a> Light Customization – HTML/CSS\n\nIf you are most comfortable working in HTML and CSS, Stencil's Edit Theme Files feature allows you to directly edit most of your theme's files. For details, please see:\n\n<img style=\"float: right; margin: 0px 0px 0px 30px;\" src=\"https://files.readme.io/a3c7126-Edit-Theme-Files-50.png\" alt=\"Edit Theme Files\" height=\"55%\" width=\"55%\" style=\"border:1px solid #D1D7E0\">\n\n* [Edit Theme Files](https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files) (Support article)\n* [Edit Theme Files](https://www.youtube.com/watch?v=waJ1dg_dAh8&index=11&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0) (Video overview of copying and editing a theme's files)\n\nFollow these links if you'd like to recharge or refresh your basic working knowledge of HTML and CSS:\n\n* http://www.w3schools.com/html/    \n* https://www.tutorialspoint.com/html/\n* http://www.w3schools.com/css/   \n* https://www.tutorialspoint.com/css/\n<br>\n\n### <a name=\"cli\"></a> Adapt a Stencil Theme, or Develop from Scratch\n\nFor complete control over a theme's appearance and logic – including the ability to edit _all_ theme configuration files – you will want to use the Stencil CLI (command-line interface) framework. Stencil CLI is described in detail in the remainder of this documentation. \n\nTo get up to speed on Stencil&#160;CLI's templating conventions, please see the Quick Start sections just below. Also see:\n\n* [Getting Started with the Stencil Framework](https://www.youtube.com/playlist?list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0) (Videos)\n\n\n<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n## <a name=\"frontmatter\"></a> Front-Matter Quick Start\n\nStencil templates start with a section of \"front matter\" where you can flexibly, and concisely, customize each page's design and layout details. For example, a couple of keystrokes will allow you to change the number of products that shoppers will see on a given page and panel.\n\nThis front-matter section uses conventions from YAML, a simple, widely used markup language. Even if you haven't used these conventions before, our internal documentation will help you rapidly master them:\n\n* [Front-Matter Overview](https://stencil.bigcommerce.com/docs/using-yaml-front-matter) of YAML syntax.\n\n\n<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n## <a name=\"hb\"></a> Handlebars Quick Start\n\nStencil uses the Handlebars templating language to assemble dynamically changing content – drawn from the BigCommerce store's catalog, and from other sources – into the HTML pages displayed to shoppers. \n\nHandlebars' syntax is quite simple. It allows you to accomplish powerful JavaScript operations with minimal JavaScript code. To get up to speed on Handlebars conventions, please see these third-party tutorials: \n\n* [Learn Handlebars in 10 Minutes or Less](http://tutorialzine.com/2015/01/learn-handlebars-in-10-minutes/)\n* [A Beginner’s Guide to Handlebars](https://www.sitepoint.com/a-beginners-guide-to-handlebars/)\n* [Getting Started with Handlebars.js](http://blog.teamtreehouse.com/getting-started-with-handlebars-js)\n* [Handlebars interactive tutorial](http://tryhandlebarsjs.com/)\n\n<img src=\"https://files.readme.io/3ed9b1d-YAMLHandlebars-codedividers.png\" alt=\"Front matter above the red line, Handlebars below\" height=\"50%\" width=\"50%\" style=\"border:1px solid #D1D7E0\">\n<span style=\"color: #888\"> Front matter above the red line, Handlebars below </span><br>\n\n<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n## <a name=\"seo\"></a> SEO Tips/Best Practices\n\nSearch-engine optimization (SEO) helps translate an elegant theme into a successful, high-conversion storefront. Because so many shoppers reach online stores through a search engine, a search-optimized site will be more visible – attracting more traffic. \n\nThe Stencil framework is [designed for high SEO performance](https://www.bigcommerce.com/improve-organic-traffic/). However, you will want to keep SEO in mind as you build out each theme and storefront. For guidelines, please see these BigCommerce support articles (which are a series of intermediate to advanced chapters in our <i>Guide to SEO):</i> \n\n* [SEO Do's and Don'ts](https://support.bigcommerce.com/articles/Learning/Things-to-Know/)\n* [Developing a Keyword Strategy](https://support.bigcommerce.com/articles/Learning/Developing-a-Keyword-Strategy/)\n* [SEO Success Essentials](https://support.bigcommerce.com/articles/Learning/Bigcommerce-SEO-Success-Essentials/)\n* [Advanced SEO on BigCommerce](https://support.bigcommerce.com/articles/Learning/Advanced-SEO-on-Bigcommerce/)\n\nPlease also see our:\n* [Guide to Keyword Research](https://support.bigcommerce.com/articles/Learning/Value-of-Keywords/)\n\n<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n## <a name=\"map\"></a> Blueprint-to-Stencil Features Map \n\nIf you've been developing themes on BigCommerce's longstanding Blueprint framework, you might be wondering: Where did my stuff go? This section is designed to help you identify the Stencil counterparts to familiar Blueprint components.\n\nAs a starting point, we suggest these resources:\n\n* [Transitioning from Blueprint to Stencil](https://support.bigcommerce.com/articles/Public/Transitioning-from-Blueprint-to-Stencil/) (Support article)\n* [Stencil and the BigCommerce Control Panel](https://www.youtube.com/watch?v=d2F6F8LJXzs&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0&index=2) (Video tour of Blueprint-to-Stencil  changes in the BigCommerce control panel)\n\nFor a more detailed map of Blueprint-to-Stencil options, please use the table below to explore a Stencil theme's pertinent subdirectories, along with links to related documentation. \n[block:callout]\n{\n  \"type\": \"info\",\n  \"body\": \"Below, the `/cornerstone/` directory name corresponds to a default installation of Stencil's base Cornerstone theme. You can access most of the subdirectories and files below by applying Cornerstone (or another Stencil theme) in the BigCommerce control panel, and then using the [Edit Theme Files UI](#edt). You can access _all_ files – including configuration files not mentioned below – by installing Stencil&#160;CLI.\",\n  \"title\": \"Finding the Files\"\n}\n[/block]\n| **Blueprint Component** | **Stencil Equivalent Component** | **Stencil Documentation Link** |\n|---|---|---|\n| Layouts | Base template pages <br> (`/cornerstone/templates/pages/` subdirectory). | [Pages Subdirectory](/docs/pages-subdirectory) |\n| Panels | Template layouts <br> (`/cornerstone/templates/layout/` subdirectory). <br><br> Front matter in base template pages <br> (`/cornerstone/templates/pages/` subdirectory). <br><br> Component partials (`/cornerstone/templates/components/` subdirectory). | [Layout Subdirectory](/docs/layout-subdirectory) <br><br> [Components Subdirectory](/docs/components-subdirectory) |\n| Snippets | Component partials (`/cornerstone/templates/components/` subdirectory). | [Components Subdirectory](/docs/components-subdirectory) |\n| Edit HTML/CSS, <br><br> also known as Design Mode | Stencil > Edit Theme Files allows HTML/CSS editing. <br><br> To edit language variables/strings, you must use Stencil CLI. | [Editing Stencil Theme Files](https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files/) <br><br> (Translation options using Stencil CLI:) <br> [Internationalization/Localization](/docs/i18n-l10n) <br><br> [Multi-Language Checkout](/docs/multi-language-checkout) |\n| Style Editor | Stencil > Theme Editor. | [Using the Stencil Theme Editor](https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/)  |\n| Store-Wide Global Variables | Stencil common objects, accessed through Handlebars helpers. <br><br> Certain front-matter attributes. | [Common Objects](/docs/common-object-formats) <br><br> [Attributes [Front-Matter] Reference](/docs/front-matter-variables). |\n| Global Variables | Stencil objects' properties, accessed through Handlebars helpers. <br><br> Front-matter attributes. | [Stencil Object Model Reference](/docs/stencil-object-model) <br><br> [Attributes [Front-Matter] Reference](/docs/front-matter-variables) |\n| LNG Variables | Stencil CLI's language-translation JSON&#160;files <br> (`/cornerstone/stencil/lang/` subdirectory). | [Internationalization/Localization](/docs/i18n-l10n) <br><br> [Multi-Language Checkout](/docs/multi-language-checkout) |\n| Stylesheet elements | Front-matter declarations. <br><br> Stencil objects' properties, accessed through Handlebars helpers. <br><br> CSS/SCSS resources <br> (`/cornerstone/assets/scss` subdirectory). | [Attributes: Using Front Matter](/docs/using-yaml-front-matter) <br><br> [Stencil Technology Base: Objects](/docs/stencil-technology-base#Obj) <br><br> [Navigating Stencil Design Assets](/docs/css-resources) |\n| Mobile theme | All Stencil themes are responsive by design, so no separate mobile theme is required. <br><br> Stencil Theme Editor and Stencil CLI both allow you to preview your theme across desktop, tablet, and mobile/phone viewports. | [Using the Stencil Theme Editor: Accessing the Theme Editor](https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/#enabling) <br><br> [Testing/Debugging Your Theme: Using Browsersync ](/docs/testingdebugging-themes#Browsersync) <br><br> [Optimizing Your Design for Mobile](https://support.bigcommerce.com/articles/Public/Optimizing-Your-Design) |\n| Merchant customization options in BigCommerce control panel | Several options are relocated from control&#160;panel > `Store Setup` > `Store Settings` to Stencil > Theme&#160;Editor. | [Using the Stencil Theme Editor](https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/) <br><br>  [The Stencil Theme Platform](https://support.bigcommerce.com/articles/Public/The-Stencil-Theme-Platform/#compare) > \"Stencil vs. Blueprint\" section <br><br> (Blueprint documentation identifying moved options:) <br> [Display Settings](https://support.bigcommerce.com/articles/Public/Display-Settings/) > \"Blueprint-Only Settings\" sections <br><br>  [Image Settings (Blueprint)](https://support.bigcommerce.com/articles/Public/Image-Settings) |\n[block:html]\n{\n  \"html\": \"<!-- \\n| Email templates | Workaround: Temporarily enable Blueprint&#160;checkout – `Custom one-page checkout (for developers)` – to upload customizable [legacy&#160;email templates](https://support.bigcommerce.com/articles/Public/Customizing-Email-Templates). | [Customizing Email Templates](/docs/customizing-email-templates) |\\n\\n<table class=\\\"stripped\\\">\\n<thead>\\n<tr>\\n<th>Blueprint Component</th>\\n<th>Stencil Equivalent Component</th>\\n<th>Stencil Documentation Link</th>\\n</tr>\\n</thead>\\n<tbody>\\n<tr>\\n<td>Layouts</td>\\n<td><code>/stencil/templates/pages/</code></td>\\n<td><a href=\\\"https://stencil.bigcommerce.com/docs/pages-subdirectory\\\">https://stencil.bigcommerce.com/docs/pages-subdirectory</a></td>\\n</tr>\\n<tr>\\n<td>Panels</td>\\n<td><code>/stencil/templates/layout/</code> + front matter on <code>/stencil/templates/pages/</code> templates + possibly <code>/stencil/templates/components/</code></td>\\n<td><a href=\\\"https://stencil.bigcommerce.com/docs/layout-subdirectory\\\">https://stencil.bigcommerce.com/docs/layout-subdirectory</a> + possibly <a href=\\\"https://stencil.bigcommerce.com/docs/components-subdirectory\\\">https://stencil.bigcommerce.com/docs/components-subdirectory</a></td>\\n</tr>\\n<tr>\\n<td>Snippets</td>\\n<td><code>/stencil/templates/components/</code></td>\\n<td><a href=\\\"https://stencil.bigcommerce.com/docs/components-subdirectory\\\">https://stencil.bigcommerce.com/docs/components-subdirectory</a></td>\\n</tr>\\n<tr>\\n<td>Edit HTML/CSS, a/k/a Design Mode</td>\\n<td>Edit Theme Files (does correspond to Blueprint’s Edit HTML/CSS, but lacks Design Mode’s options for editing language variables/strings)</td>\\n<td><a href=\\\"https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files/\\\">https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files/</a>; (using Stencil CLI:) <br> <a href=\\\"https://stencil.bigcommerce.com/docs/basis-for-i18n;\\\">https://stencil.bigcommerce.com/docs/basis-for-i18n;</a> <br> <a href=\\\"https://stencil.bigcommerce.com/docs/multi-language-checkout\\\">https://stencil.bigcommerce.com/docs/multi-language-checkout</a></td>\\n</tr>\\n<tr>\\n<td>Style Editor</td>\\n<td>Theme Editor</td>\\n<td><a href=\\\"https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/\\\">https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/</a></td>\\n</tr>\\n<tr>\\n<td>Store-Wide Global Variables</td>\\n<td>Common objects? (These 2 things have zero content in common, but they’re conceptually parallel) + some elements of front-matter attributes</td>\\n<td><a href=\\\"https://stencil.bigcommerce.com/docs/common-object-formats;\\\">https://stencil.bigcommerce.com/docs/common-object-formats;</a> <a href=\\\"https://stencil.bigcommerce.com/docs/front-matter-variables\\\">https://stencil.bigcommerce.com/docs/front-matter-variables</a></td>\\n</tr>\\n<tr>\\n<td>Global Variables</td>\\n<td>Object properties, front-matter attributes?</td>\\n<td><a href=\\\"https://stencil.bigcommerce.com/docs/stencil-object-model\\\">https://stencil.bigcommerce.com/docs/stencil-object-model</a>, <a href=\\\"https://stencil.bigcommerce.com/docs/front-matter-variables\\\">https://stencil.bigcommerce.com/docs/front-matter-variables</a></td>\\n</tr>\\n<tr>\\n<td>LNG Variables</td>\\n<td>Language-translation JSON files in <code>/stencil/stencil/lang/</code> – can_not_ be edited via control panel, like in Blueprint Design Mode Edit HTML/CSS.</td>\\n<td><a href=\\\"https://stencil.bigcommerce.com/docs/basis-for-i18n;\\\">https://stencil.bigcommerce.com/docs/basis-for-i18n;</a> &lt;br&gt; <a href=\\\"https://stencil.bigcommerce.com/docs/multi-language-checkout\\\">https://stencil.bigcommerce.com/docs/multi-language-checkout</a></td>\\n</tr>\\n<tr>\\n<td>Stylesheet elements</td>\\n<td>Front-matter declarations, Handlebars objects?; +S/CSS</td>\\n<td><a href=\\\"https://stencil.bigcommerce.com/docs/using-yaml-front-matter\\\">https://stencil.bigcommerce.com/docs/using-yaml-front-matter</a>, <br> <a href=\\\"https://stencil.bigcommerce.com/docs/stencil-technology-base#Obj;\\\">https://stencil.bigcommerce.com/docs/stencil-technology-base#Obj;</a> <br> <a href=\\\"https://stencil.bigcommerce.com/docs/css-resources\\\">https://stencil.bigcommerce.com/docs/css-resources</a></td>\\n</tr>\\n<tr>\\n<td>Email Templates</td>\\n<td>Gap in Stencil – with a workaround.</td>\\n<td>Workaround documented here: <a href=\\\"https://stencil.bigcommerce.com/docs/customizing-email-templates\\\">https://stencil.bigcommerce.com/docs/customizing-email-templates</a>. Must enable Blueprint checkout (<code>Custom one-page checkout (for developers)</code>), at least temporarily, to upload the email templates. See <a href=\\\"https://support.bigcommerce.com/articles/Public/Checkout-Settings/#checkout-type%5D\\\">this support/KB article</a>.</td>\\n</tr>\\n</tbody>\\n</table> -->\"\n}\n[/block]\n<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n## <a name=\"api\"></a> Interacting with the BigCommerce API\n\nBigCommerce's growing API resources enable application developers to create private scripts or apps that support a single store, or to create public apps offered to multiple stores via BigCommerce's App Marketplace. \n\nAs a theme developer, you can rely on apps to enhance your themes' capabilities, and to extend or complement the storefront features built into the BigCommerce platform. Popular app areas include inventory management, email marketing, coupons, reviews, shipping, tax accounting, and security. For more information, please see BigCommerce's:\n\n* [App Marketplace](https://www.bigcommerce.com/apps/)\n* [API documentation](https://developer.bigcommerce.com/api)\n\n<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n## <a name=\"partner\"></a> Partnering with BigCommerce\n\nDo we belong together? No formal business relationship is required to develop themes on the BigCommerce platform. However, consider applying to become a BigCommerce Design & Solutions Partner (DSP), in order to accelerate your development of new business and revenue. For details, please see our:\n\n* [Overview of BigCommerce Partnerships](https://www.bigcommerce.com/partners/)\n* [Design & Solutions Partners](https://www.bigcommerce.com/partners/design-solution/) – basics and application links\n* [Technology Partners](https://www.bigcommerce.com/partners/developers/) – basics and application links\n* [Partnership Application](https://partners.bigcommerce.com/English/register_email.aspx)\n[block:html]\n{\n  \"html\": \"<hr style=\\\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\\\"/>\\n\\n<H2> <A NAME=\\\"Next\\\"></a> Next Steps </h2>\\nWe invite you to proceed to our:\\n\\n<ul>\\n<li> <a href=\\\"/docs/installing-and-launching-stencil-1\\\">Installation and Launch</a> instructions </li>\\n\\n<li> <a href=\\\"/docs/developing-on-the-stencil-framework-quick-start/\\\">Development Quick Start</a> tutorial </li>\\n  \\n<li> <a href=\\\"/using-yaml-front-matter\\\">Front-matter</a> overview of YAML conventions </li>\\n\\n<li> Front-matter <a href=\\\"/docs/front-matter-variables\\\">attributes</a> reference </li>\\n\\n<li> <a href=\\\"/docs/developing-with-handlebars\\\">Handlebars</a> overview </li>\\n  \\n</ul>\"\n}\n[/block]","excerpt":"Try out Stencil's basics before you download a theme or install our framework","slug":"getting-started-guide","type":"basic","title":"Getting Started/Transition Guide"}

Getting Started/Transition Guide

Try out Stencil's basics before you download a theme or install our framework

[block:html] { "html": "<!-- !!! Reference sections (Stencil Object Model, Front-Matter Attributes) should link back @ head to procedural instructions!!!\n\nImage float (thumbnail, right) code:\n<img style=\"float: right; margin: 0px 0px 0px 30px;\" src=\"https://files.readme.io/76514b0-ThumbnailCornerstone-3294x370.png\" alt=\"A Stencil Theme\" height=\"248\" width=\"197\">\n\n<iframe width=\"560\" height=\"315\" src=\"https://youtu.be/d2F6F8LJXzs?list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0\" frameborder=\"0\" allowfullscreen></iframe>\n\n<iframe width=\"560\" height=\"315\" src=\"https://youtu.be/waJ1dg_dAh8?list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0\" frameborder=\"0\" allowfullscreen></iframe>\n\n<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n* [HTML/CSS Refreshers](#htmlcss)\n\n## <a name=\"htmlcss\"></a> HTML/CSS Refreshers:\n\nHere are some links to help you get up to speed on, or refresh your basic working knowledge of, HTML and CSS:\n\n### HTML:\n* http://www.w3schools.com/html/ \n* https://www.tutorialspoint.com/html/\n\n### CSS:\n* http://www.w3schools.com/css/ \n* https://www.tutorialspoint.com/css/\n\n* [SEO Overview](https://support.bigcommerce.com/articles/Public/SEO-Overview)\n* [More SEO resources](https://support.bigcommerce.com/?q=seo)\n-->" } [/block] Are you approaching Stencil from a different theming framework, like BigCommerce's earlier Blueprint framework? Or moving to this templating environment from pure HTML- and CSS-based design? Use this page's resources and links to identify your ideal method for Stencil theme development, and to quickly ramp up on the conventions that Stencil uses: * [Choosing a Development Path](#choose) * [Front-Matter Quick Start](#frontmatter) * [Handlebars Quick Start](#hb) * [SEO Tips/Best Practices](#seo) * [Blueprint-to-Stencil Features Map](#map) * [Interacting with the BigCommerce API](#api) * [Partnering with BigCommerce](#partner) * [Next Steps](#Next) <hr style="background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;"/> ## <a name="choose"></a> Choosing a Development Path You have four increasingly hands-on options for developing Stencil themes: * [Find a Design & Solutions Partner](#dsp) * [Light Customization – Graphical Theme Editor](#ted) * [Light Customization – HTML/CSS](#edt) * [Adapt a Stencil Theme, or Develop from Scratch](#cli) <br> ### <a name="dsp"></a> Find a Design & Solutions Partner If you prefer to have an expert collaborator customize your theme, we recommend working with one of our certified BigCommerce Design & Solutions Partners. Please see these resources: * [Partner Directory](https://partners.bigcommerce.com/directory/search?i=75) * [Working with a Design Partner](https://support.bigcommerce.com/articles/Learning/Working-with-a-Design-Partner) (Support Guide) <br> ### <a name="ted"></a> Light Customization – Graphical Theme Editor A designer or store owner can customize many aspects of an existing Stencil theme _without_ using specialized development tools or techniques. Stencil's graphical Theme Editor requires no coding at all. Yet Theme Editor still enables customization of a theme's colors, typography, banners, headings, carousel, and footer. It also enables customization of broader layout characteristics, such as the number of products displayed in various panels, category pages, and brand pages. <img style="float: right; margin: 0px 0px 0px 30px;" src="https://files.readme.io/698f15f-Theme-Editor-50.png" alt="Stencil Theme Editor" height="60%" width="60%" style="border:1px solid #D1D7E0"> For details, please see: * [Theme Editor](https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/) (Support article) * [Stencil and the BigCommerce Control Panel](https://www.youtube.com/watch?v=d2F6F8LJXzs&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0&index=2) (Video introduction to Theme Editor) * [Changing Your Store's Theme](https://support.bigcommerce.com/articles/Learning/What-to-Consider-When-Changing-Your-Theme) (Support guide) * [Personalizing Your Theme](https://support.bigcommerce.com/articles/Learning/Personalizing-your-New-Theme) (Support guide) <br><br> ### <a name="edt"></a> Light Customization – HTML/CSS If you are most comfortable working in HTML and CSS, Stencil's Edit Theme Files feature allows you to directly edit most of your theme's files. For details, please see: <img style="float: right; margin: 0px 0px 0px 30px;" src="https://files.readme.io/a3c7126-Edit-Theme-Files-50.png" alt="Edit Theme Files" height="55%" width="55%" style="border:1px solid #D1D7E0"> * [Edit Theme Files](https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files) (Support article) * [Edit Theme Files](https://www.youtube.com/watch?v=waJ1dg_dAh8&index=11&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0) (Video overview of copying and editing a theme's files) Follow these links if you'd like to recharge or refresh your basic working knowledge of HTML and CSS: * http://www.w3schools.com/html/ * https://www.tutorialspoint.com/html/ * http://www.w3schools.com/css/ * https://www.tutorialspoint.com/css/ <br> ### <a name="cli"></a> Adapt a Stencil Theme, or Develop from Scratch For complete control over a theme's appearance and logic – including the ability to edit _all_ theme configuration files – you will want to use the Stencil CLI (command-line interface) framework. Stencil CLI is described in detail in the remainder of this documentation. To get up to speed on Stencil&#160;CLI's templating conventions, please see the Quick Start sections just below. Also see: * [Getting Started with the Stencil Framework](https://www.youtube.com/playlist?list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0) (Videos) <hr style="background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;"/> ## <a name="frontmatter"></a> Front-Matter Quick Start Stencil templates start with a section of "front matter" where you can flexibly, and concisely, customize each page's design and layout details. For example, a couple of keystrokes will allow you to change the number of products that shoppers will see on a given page and panel. This front-matter section uses conventions from YAML, a simple, widely used markup language. Even if you haven't used these conventions before, our internal documentation will help you rapidly master them: * [Front-Matter Overview](https://stencil.bigcommerce.com/docs/using-yaml-front-matter) of YAML syntax. <hr style="background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;"/> ## <a name="hb"></a> Handlebars Quick Start Stencil uses the Handlebars templating language to assemble dynamically changing content – drawn from the BigCommerce store's catalog, and from other sources – into the HTML pages displayed to shoppers. Handlebars' syntax is quite simple. It allows you to accomplish powerful JavaScript operations with minimal JavaScript code. To get up to speed on Handlebars conventions, please see these third-party tutorials: * [Learn Handlebars in 10 Minutes or Less](http://tutorialzine.com/2015/01/learn-handlebars-in-10-minutes/) * [A Beginner’s Guide to Handlebars](https://www.sitepoint.com/a-beginners-guide-to-handlebars/) * [Getting Started with Handlebars.js](http://blog.teamtreehouse.com/getting-started-with-handlebars-js) * [Handlebars interactive tutorial](http://tryhandlebarsjs.com/) <img src="https://files.readme.io/3ed9b1d-YAMLHandlebars-codedividers.png" alt="Front matter above the red line, Handlebars below" height="50%" width="50%" style="border:1px solid #D1D7E0"> <span style="color: #888"> Front matter above the red line, Handlebars below </span><br> <hr style="background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;"/> ## <a name="seo"></a> SEO Tips/Best Practices Search-engine optimization (SEO) helps translate an elegant theme into a successful, high-conversion storefront. Because so many shoppers reach online stores through a search engine, a search-optimized site will be more visible – attracting more traffic. The Stencil framework is [designed for high SEO performance](https://www.bigcommerce.com/improve-organic-traffic/). However, you will want to keep SEO in mind as you build out each theme and storefront. For guidelines, please see these BigCommerce support articles (which are a series of intermediate to advanced chapters in our <i>Guide to SEO):</i> * [SEO Do's and Don'ts](https://support.bigcommerce.com/articles/Learning/Things-to-Know/) * [Developing a Keyword Strategy](https://support.bigcommerce.com/articles/Learning/Developing-a-Keyword-Strategy/) * [SEO Success Essentials](https://support.bigcommerce.com/articles/Learning/Bigcommerce-SEO-Success-Essentials/) * [Advanced SEO on BigCommerce](https://support.bigcommerce.com/articles/Learning/Advanced-SEO-on-Bigcommerce/) Please also see our: * [Guide to Keyword Research](https://support.bigcommerce.com/articles/Learning/Value-of-Keywords/) <hr style="background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;"/> ## <a name="map"></a> Blueprint-to-Stencil Features Map If you've been developing themes on BigCommerce's longstanding Blueprint framework, you might be wondering: Where did my stuff go? This section is designed to help you identify the Stencil counterparts to familiar Blueprint components. As a starting point, we suggest these resources: * [Transitioning from Blueprint to Stencil](https://support.bigcommerce.com/articles/Public/Transitioning-from-Blueprint-to-Stencil/) (Support article) * [Stencil and the BigCommerce Control Panel](https://www.youtube.com/watch?v=d2F6F8LJXzs&list=PLwTYtMwfzbe7EZiIWPAmPtuwRHkY7BG-0&index=2) (Video tour of Blueprint-to-Stencil changes in the BigCommerce control panel) For a more detailed map of Blueprint-to-Stencil options, please use the table below to explore a Stencil theme's pertinent subdirectories, along with links to related documentation. [block:callout] { "type": "info", "body": "Below, the `/cornerstone/` directory name corresponds to a default installation of Stencil's base Cornerstone theme. You can access most of the subdirectories and files below by applying Cornerstone (or another Stencil theme) in the BigCommerce control panel, and then using the [Edit Theme Files UI](#edt). You can access _all_ files – including configuration files not mentioned below – by installing Stencil&#160;CLI.", "title": "Finding the Files" } [/block] | **Blueprint Component** | **Stencil Equivalent Component** | **Stencil Documentation Link** | |---|---|---| | Layouts | Base template pages <br> (`/cornerstone/templates/pages/` subdirectory). | [Pages Subdirectory](/docs/pages-subdirectory) | | Panels | Template layouts <br> (`/cornerstone/templates/layout/` subdirectory). <br><br> Front matter in base template pages <br> (`/cornerstone/templates/pages/` subdirectory). <br><br> Component partials (`/cornerstone/templates/components/` subdirectory). | [Layout Subdirectory](/docs/layout-subdirectory) <br><br> [Components Subdirectory](/docs/components-subdirectory) | | Snippets | Component partials (`/cornerstone/templates/components/` subdirectory). | [Components Subdirectory](/docs/components-subdirectory) | | Edit HTML/CSS, <br><br> also known as Design Mode | Stencil > Edit Theme Files allows HTML/CSS editing. <br><br> To edit language variables/strings, you must use Stencil CLI. | [Editing Stencil Theme Files](https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files/) <br><br> (Translation options using Stencil CLI:) <br> [Internationalization/Localization](/docs/i18n-l10n) <br><br> [Multi-Language Checkout](/docs/multi-language-checkout) | | Style Editor | Stencil > Theme Editor. | [Using the Stencil Theme Editor](https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/) | | Store-Wide Global Variables | Stencil common objects, accessed through Handlebars helpers. <br><br> Certain front-matter attributes. | [Common Objects](/docs/common-object-formats) <br><br> [Attributes [Front-Matter] Reference](/docs/front-matter-variables). | | Global Variables | Stencil objects' properties, accessed through Handlebars helpers. <br><br> Front-matter attributes. | [Stencil Object Model Reference](/docs/stencil-object-model) <br><br> [Attributes [Front-Matter] Reference](/docs/front-matter-variables) | | LNG Variables | Stencil CLI's language-translation JSON&#160;files <br> (`/cornerstone/stencil/lang/` subdirectory). | [Internationalization/Localization](/docs/i18n-l10n) <br><br> [Multi-Language Checkout](/docs/multi-language-checkout) | | Stylesheet elements | Front-matter declarations. <br><br> Stencil objects' properties, accessed through Handlebars helpers. <br><br> CSS/SCSS resources <br> (`/cornerstone/assets/scss` subdirectory). | [Attributes: Using Front Matter](/docs/using-yaml-front-matter) <br><br> [Stencil Technology Base: Objects](/docs/stencil-technology-base#Obj) <br><br> [Navigating Stencil Design Assets](/docs/css-resources) | | Mobile theme | All Stencil themes are responsive by design, so no separate mobile theme is required. <br><br> Stencil Theme Editor and Stencil CLI both allow you to preview your theme across desktop, tablet, and mobile/phone viewports. | [Using the Stencil Theme Editor: Accessing the Theme Editor](https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/#enabling) <br><br> [Testing/Debugging Your Theme: Using Browsersync ](/docs/testingdebugging-themes#Browsersync) <br><br> [Optimizing Your Design for Mobile](https://support.bigcommerce.com/articles/Public/Optimizing-Your-Design) | | Merchant customization options in BigCommerce control panel | Several options are relocated from control&#160;panel > `Store Setup` > `Store Settings` to Stencil > Theme&#160;Editor. | [Using the Stencil Theme Editor](https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/) <br><br> [The Stencil Theme Platform](https://support.bigcommerce.com/articles/Public/The-Stencil-Theme-Platform/#compare) > "Stencil vs. Blueprint" section <br><br> (Blueprint documentation identifying moved options:) <br> [Display Settings](https://support.bigcommerce.com/articles/Public/Display-Settings/) > "Blueprint-Only Settings" sections <br><br> [Image Settings (Blueprint)](https://support.bigcommerce.com/articles/Public/Image-Settings) | [block:html] { "html": "<!-- \n| Email templates | Workaround: Temporarily enable Blueprint&#160;checkout – `Custom one-page checkout (for developers)` – to upload customizable [legacy&#160;email templates](https://support.bigcommerce.com/articles/Public/Customizing-Email-Templates). | [Customizing Email Templates](/docs/customizing-email-templates) |\n\n<table class=\"stripped\">\n<thead>\n<tr>\n<th>Blueprint Component</th>\n<th>Stencil Equivalent Component</th>\n<th>Stencil Documentation Link</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>Layouts</td>\n<td><code>/stencil/templates/pages/</code></td>\n<td><a href=\"https://stencil.bigcommerce.com/docs/pages-subdirectory\">https://stencil.bigcommerce.com/docs/pages-subdirectory</a></td>\n</tr>\n<tr>\n<td>Panels</td>\n<td><code>/stencil/templates/layout/</code> + front matter on <code>/stencil/templates/pages/</code> templates + possibly <code>/stencil/templates/components/</code></td>\n<td><a href=\"https://stencil.bigcommerce.com/docs/layout-subdirectory\">https://stencil.bigcommerce.com/docs/layout-subdirectory</a> + possibly <a href=\"https://stencil.bigcommerce.com/docs/components-subdirectory\">https://stencil.bigcommerce.com/docs/components-subdirectory</a></td>\n</tr>\n<tr>\n<td>Snippets</td>\n<td><code>/stencil/templates/components/</code></td>\n<td><a href=\"https://stencil.bigcommerce.com/docs/components-subdirectory\">https://stencil.bigcommerce.com/docs/components-subdirectory</a></td>\n</tr>\n<tr>\n<td>Edit HTML/CSS, a/k/a Design Mode</td>\n<td>Edit Theme Files (does correspond to Blueprint’s Edit HTML/CSS, but lacks Design Mode’s options for editing language variables/strings)</td>\n<td><a href=\"https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files/\">https://support.bigcommerce.com/articles/Public/Editing-Stencil-Theme-Files/</a>; (using Stencil CLI:) <br> <a href=\"https://stencil.bigcommerce.com/docs/basis-for-i18n;\">https://stencil.bigcommerce.com/docs/basis-for-i18n;</a> <br> <a href=\"https://stencil.bigcommerce.com/docs/multi-language-checkout\">https://stencil.bigcommerce.com/docs/multi-language-checkout</a></td>\n</tr>\n<tr>\n<td>Style Editor</td>\n<td>Theme Editor</td>\n<td><a href=\"https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/\">https://support.bigcommerce.com/articles/Public/Using-the-Stencil-Theme-Editor/</a></td>\n</tr>\n<tr>\n<td>Store-Wide Global Variables</td>\n<td>Common objects? (These 2 things have zero content in common, but they’re conceptually parallel) + some elements of front-matter attributes</td>\n<td><a href=\"https://stencil.bigcommerce.com/docs/common-object-formats;\">https://stencil.bigcommerce.com/docs/common-object-formats;</a> <a href=\"https://stencil.bigcommerce.com/docs/front-matter-variables\">https://stencil.bigcommerce.com/docs/front-matter-variables</a></td>\n</tr>\n<tr>\n<td>Global Variables</td>\n<td>Object properties, front-matter attributes?</td>\n<td><a href=\"https://stencil.bigcommerce.com/docs/stencil-object-model\">https://stencil.bigcommerce.com/docs/stencil-object-model</a>, <a href=\"https://stencil.bigcommerce.com/docs/front-matter-variables\">https://stencil.bigcommerce.com/docs/front-matter-variables</a></td>\n</tr>\n<tr>\n<td>LNG Variables</td>\n<td>Language-translation JSON files in <code>/stencil/stencil/lang/</code> – can_not_ be edited via control panel, like in Blueprint Design Mode Edit HTML/CSS.</td>\n<td><a href=\"https://stencil.bigcommerce.com/docs/basis-for-i18n;\">https://stencil.bigcommerce.com/docs/basis-for-i18n;</a> &lt;br&gt; <a href=\"https://stencil.bigcommerce.com/docs/multi-language-checkout\">https://stencil.bigcommerce.com/docs/multi-language-checkout</a></td>\n</tr>\n<tr>\n<td>Stylesheet elements</td>\n<td>Front-matter declarations, Handlebars objects?; +S/CSS</td>\n<td><a href=\"https://stencil.bigcommerce.com/docs/using-yaml-front-matter\">https://stencil.bigcommerce.com/docs/using-yaml-front-matter</a>, <br> <a href=\"https://stencil.bigcommerce.com/docs/stencil-technology-base#Obj;\">https://stencil.bigcommerce.com/docs/stencil-technology-base#Obj;</a> <br> <a href=\"https://stencil.bigcommerce.com/docs/css-resources\">https://stencil.bigcommerce.com/docs/css-resources</a></td>\n</tr>\n<tr>\n<td>Email Templates</td>\n<td>Gap in Stencil – with a workaround.</td>\n<td>Workaround documented here: <a href=\"https://stencil.bigcommerce.com/docs/customizing-email-templates\">https://stencil.bigcommerce.com/docs/customizing-email-templates</a>. Must enable Blueprint checkout (<code>Custom one-page checkout (for developers)</code>), at least temporarily, to upload the email templates. See <a href=\"https://support.bigcommerce.com/articles/Public/Checkout-Settings/#checkout-type%5D\">this support/KB article</a>.</td>\n</tr>\n</tbody>\n</table> -->" } [/block] <hr style="background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;"/> ## <a name="api"></a> Interacting with the BigCommerce API BigCommerce's growing API resources enable application developers to create private scripts or apps that support a single store, or to create public apps offered to multiple stores via BigCommerce's App Marketplace. As a theme developer, you can rely on apps to enhance your themes' capabilities, and to extend or complement the storefront features built into the BigCommerce platform. Popular app areas include inventory management, email marketing, coupons, reviews, shipping, tax accounting, and security. For more information, please see BigCommerce's: * [App Marketplace](https://www.bigcommerce.com/apps/) * [API documentation](https://developer.bigcommerce.com/api) <hr style="background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;"/> ## <a name="partner"></a> Partnering with BigCommerce Do we belong together? No formal business relationship is required to develop themes on the BigCommerce platform. However, consider applying to become a BigCommerce Design & Solutions Partner (DSP), in order to accelerate your development of new business and revenue. For details, please see our: * [Overview of BigCommerce Partnerships](https://www.bigcommerce.com/partners/) * [Design & Solutions Partners](https://www.bigcommerce.com/partners/design-solution/) – basics and application links * [Technology Partners](https://www.bigcommerce.com/partners/developers/) – basics and application links * [Partnership Application](https://partners.bigcommerce.com/English/register_email.aspx) [block:html] { "html": "<hr style=\"background-color:#4E75F8; border-width:0;color:#000000; height:2px; line-height:0; text-align:left; width:100%;\"/>\n\n<H2> <A NAME=\"Next\"></a> Next Steps </h2>\nWe invite you to proceed to our:\n\n<ul>\n<li> <a href=\"/docs/installing-and-launching-stencil-1\">Installation and Launch</a> instructions </li>\n\n<li> <a href=\"/docs/developing-on-the-stencil-framework-quick-start/\">Development Quick Start</a> tutorial </li>\n \n<li> <a href=\"/using-yaml-front-matter\">Front-matter</a> overview of YAML conventions </li>\n\n<li> Front-matter <a href=\"/docs/front-matter-variables\">attributes</a> reference </li>\n\n<li> <a href=\"/docs/developing-with-handlebars\">Handlebars</a> overview </li>\n \n</ul>" } [/block]