{"_id":"5ac506488dbba00012277ae4","project":"55a6e72e8cc73e0d00096635","version":{"_id":"55a6e72f8cc73e0d00096638","project":"55a6e72e8cc73e0d00096635","hasReference":false,"__v":30,"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","5b195f920059c20003083ad6"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"category":{"_id":"596839a75965d400155bb750","project":"55a6e72e8cc73e0d00096635","version":"55a6e72f8cc73e0d00096638","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2017-07-14T03:25:27.396Z","from_sync":false,"order":1,"slug":"whats-new","title":"What's New"},"user":"5ab9ae5220abcc00499b2be4","__v":0,"parentDoc":null,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2018-04-04T17:07:20.095Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":1,"body":"##What is Google AMP? \nGoogle AMP aka Accelerated Mobile Pages is an [open source initiative](https://www.ampproject.org/) to make websites load faster across mobile devices. \n\n##How do I implement this into my Stencil theme?\nIt will be automatically added if your theme is/is based on the most recent version of Cornerstone. Please see the user documentation on configuring via the [Control Panel](https://support.bigcommerce.com/articles/Public/Google-AMP).\n\nIf you are using a custom theme for your storefront, you will have to perform a few extra steps in order to fully configure Google AMP on your store. Reference the text information and code samples below to do so. If you do not have a custom theme, you can bypass the remainder of this article.\n\n##Implementing Google AMP on a Custom Theme\n\nAfter you have completed the previous steps, move onto these steps if you have a custom storefront theme activated.\n\n* Make sure that the Google Analytics ID has been added in the control panel. This is what will be used to track AMP analytics. You can use more than one ID to track [AMP traffic vs non-AMP traffic](https://developers.google.com/analytics/devguides/collection/amp-analytics/#amp_vs_non-amp_traffic).\n\n* Remove Google AMP (beta) from the `schema.json` file. \n\n* In the `/amp/category.html`, `layout/amp.html` and `amp/product.html` template files replace `theme_settings` with `settings`. \n\nExample: In `layout/amp.html` (referenced below) replace `theme_settings.amp_analytics_id` with\n`settings.amp_analytics_id` (note lines 4 and 5 in the visual below).\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{{{snippet 'htmlhead'}}}\\n         <script async custom-element=\\\"amp-form\\\" src=\\\"https://cdn.ampproject.org/v0/amp-form-0.1.js\\\"></script>\\n         <script async custom-element=\\\"amp-sidebar\\\" src=\\\"https://cdn.ampproject.org/v0/amp-sidebar-0.1.js\\\"></script>\\n----        {{#if theme_settings.amp_analytics_id}}\\n++++        {{#if settings.amp_analytics_id}}\\n             <script async custom-element=\\\"amp-analytics\\\" src=\\\"https://cdn.ampproject.org/v0/amp-analytics-0.1.js\\\"></script>\\n         {{/if}}\\n         {{#block \\\"amp-scripts\\\"}}{{/block}}\",\n      \"language\": \"handlebars\",\n      \"name\": \"templates/layout/amp.html\"\n    }\n  ]\n}\n[/block]\n* In the [config.json](https://github.com/bigcommerce/cornerstone/blob/master/config.json) (referenced below) make sure the `google_amp` is still in the features array. See below for code snippet.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"  \\\"features\\\": [\\n      \\\"fully_responsive\\\",\\n      \\\"mega_navigation\\\",\\n      \\\"multi_tiered_sidebar_menu\\\",\\n      \\\"masonry_design\\\",\\n      \\\"frontpage_slideshow\\\",\\n      \\\"quick_add_to_cart\\\",\\n      \\\"switchable_product_view\\\",\\n      \\\"product_comparison_table\\\",\\n      \\\"complex_search_filtering\\\",\\n      \\\"customizable_product_selector\\\",\\n      \\\"cart_suggested_products\\\",\\n      \\\"free_customer_support\\\",\\n      \\\"free_theme_upgrades\\\",\\n      \\\"high_res_product_images\\\",\\n      \\\"product_filtering\\\",\\n      \\\"advanced_quick_view\\\",\\n      \\\"product_showcase\\\",\\n      \\\"persistent_cart\\\",\\n      \\\"one_page_check_out\\\",\\n      \\\"product_videos\\\",\\n      \\\"google_amp\\\",\\n      \\\"customized_checkout\\\"\\n    ]\",\n      \"language\": \"json\",\n      \"name\": \"config.json\"\n    }\n  ]\n}\n[/block]\nIf you are having any implementation issues, review the full PR for changes that need to be made to implement Google AMP. [PR#964](https://github.com/bigcommerce/cornerstone/pull/946/files)\n\n## Where are the AMP files located? \nNote: *If you are not on the most recent version, these files might not be present. See the PR referenced above*. \n\nThere are a few key file locations where the AMP information is located: \n* Base AMP layout template is located in [templates/layout/amp.html](https://github.com/bigcommerce/cornerstone/tree/master/templates/layout). \n* The files for Google AMP are located in [/templates/pages/amp](https://github.com/bigcommerce/cornerstone/tree/master/templates/pages/amp). This is where `product.html` and `category.html` are located. (Note: there may be other files in this folder, but the product and category pages are the only one pages that currently support Google AMP).\n* The CSS is located in [templates/components/amp/css](https://github.com/bigcommerce/cornerstone/tree/master/templates/components/amp/css). \n\nAfter the Google Analytics ID has been added via Control Panel, you can toggle AMP on the product and category pages using the [settings](https://support.bigcommerce.com/articles/Public/Google-AMP) there.\n\n## Local Testing\n\nYou are able to test your AMP enabled pages at the following endpoints when running your store locally:\n\n* `localhost:3000/amp/category_url/`\n* `localhost:3000/amp/product_url/`\n\n\n\n##Resources\n* [Adding Analytics to your AMP Pages](https://developers.google.com/analytics/devguides/collection/amp-analytics/)\n* [Adding Google AMP in the Control Panel](https://support.bigcommerce.com/articles/Public/Google-AMP)\n* [Google AMP Home Page](https://www.ampproject.org/)\n* [Google Developer AMP Resources](https://developers.google.com/amp/)","excerpt":"","slug":"google-amp","type":"basic","title":"Google AMP"}
##What is Google AMP? Google AMP aka Accelerated Mobile Pages is an [open source initiative](https://www.ampproject.org/) to make websites load faster across mobile devices. ##How do I implement this into my Stencil theme? It will be automatically added if your theme is/is based on the most recent version of Cornerstone. Please see the user documentation on configuring via the [Control Panel](https://support.bigcommerce.com/articles/Public/Google-AMP). If you are using a custom theme for your storefront, you will have to perform a few extra steps in order to fully configure Google AMP on your store. Reference the text information and code samples below to do so. If you do not have a custom theme, you can bypass the remainder of this article. ##Implementing Google AMP on a Custom Theme After you have completed the previous steps, move onto these steps if you have a custom storefront theme activated. * Make sure that the Google Analytics ID has been added in the control panel. This is what will be used to track AMP analytics. You can use more than one ID to track [AMP traffic vs non-AMP traffic](https://developers.google.com/analytics/devguides/collection/amp-analytics/#amp_vs_non-amp_traffic). * Remove Google AMP (beta) from the `schema.json` file. * In the `/amp/category.html`, `layout/amp.html` and `amp/product.html` template files replace `theme_settings` with `settings`. Example: In `layout/amp.html` (referenced below) replace `theme_settings.amp_analytics_id` with `settings.amp_analytics_id` (note lines 4 and 5 in the visual below). [block:code] { "codes": [ { "code": "{{{snippet 'htmlhead'}}}\n <script async custom-element=\"amp-form\" src=\"https://cdn.ampproject.org/v0/amp-form-0.1.js\"></script>\n <script async custom-element=\"amp-sidebar\" src=\"https://cdn.ampproject.org/v0/amp-sidebar-0.1.js\"></script>\n---- {{#if theme_settings.amp_analytics_id}}\n++++ {{#if settings.amp_analytics_id}}\n <script async custom-element=\"amp-analytics\" src=\"https://cdn.ampproject.org/v0/amp-analytics-0.1.js\"></script>\n {{/if}}\n {{#block \"amp-scripts\"}}{{/block}}", "language": "handlebars", "name": "templates/layout/amp.html" } ] } [/block] * In the [config.json](https://github.com/bigcommerce/cornerstone/blob/master/config.json) (referenced below) make sure the `google_amp` is still in the features array. See below for code snippet. [block:code] { "codes": [ { "code": " \"features\": [\n \"fully_responsive\",\n \"mega_navigation\",\n \"multi_tiered_sidebar_menu\",\n \"masonry_design\",\n \"frontpage_slideshow\",\n \"quick_add_to_cart\",\n \"switchable_product_view\",\n \"product_comparison_table\",\n \"complex_search_filtering\",\n \"customizable_product_selector\",\n \"cart_suggested_products\",\n \"free_customer_support\",\n \"free_theme_upgrades\",\n \"high_res_product_images\",\n \"product_filtering\",\n \"advanced_quick_view\",\n \"product_showcase\",\n \"persistent_cart\",\n \"one_page_check_out\",\n \"product_videos\",\n \"google_amp\",\n \"customized_checkout\"\n ]", "language": "json", "name": "config.json" } ] } [/block] If you are having any implementation issues, review the full PR for changes that need to be made to implement Google AMP. [PR#964](https://github.com/bigcommerce/cornerstone/pull/946/files) ## Where are the AMP files located? Note: *If you are not on the most recent version, these files might not be present. See the PR referenced above*. There are a few key file locations where the AMP information is located: * Base AMP layout template is located in [templates/layout/amp.html](https://github.com/bigcommerce/cornerstone/tree/master/templates/layout). * The files for Google AMP are located in [/templates/pages/amp](https://github.com/bigcommerce/cornerstone/tree/master/templates/pages/amp). This is where `product.html` and `category.html` are located. (Note: there may be other files in this folder, but the product and category pages are the only one pages that currently support Google AMP). * The CSS is located in [templates/components/amp/css](https://github.com/bigcommerce/cornerstone/tree/master/templates/components/amp/css). After the Google Analytics ID has been added via Control Panel, you can toggle AMP on the product and category pages using the [settings](https://support.bigcommerce.com/articles/Public/Google-AMP) there. ## Local Testing You are able to test your AMP enabled pages at the following endpoints when running your store locally: * `localhost:3000/amp/category_url/` * `localhost:3000/amp/product_url/` ##Resources * [Adding Analytics to your AMP Pages](https://developers.google.com/analytics/devguides/collection/amp-analytics/) * [Adding Google AMP in the Control Panel](https://support.bigcommerce.com/articles/Public/Google-AMP) * [Google AMP Home Page](https://www.ampproject.org/) * [Google Developer AMP Resources](https://developers.google.com/amp/)