{"_id":"5608e54fa7b2590d0089eae5","__v":15,"category":{"_id":"5605f309a4574a0d00811366","version":"55a6e72f8cc73e0d00096638","__v":10,"pages":["5608e5448aedf50d0004cf93","5608e54fa7b2590d0089eae5","5608e58331beb60d001b655a","5608e59ea7b2590d0089eae8","5608e5c031beb60d001b655c","5608e5d28aedf50d0004cf95","5608e5f7a7cc2f0d00d9754a","5608e61131beb60d001b655e","5608efbdc5cff70d007d00ee","5669f132c3de130d00441858"],"project":"55a6e72e8cc73e0d00096635","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2015-09-26T01:21:13.347Z","from_sync":false,"order":4,"slug":"development-quick-start","title":"Development Quick Start"},"parentDoc":null,"project":"55a6e72e8cc73e0d00096635","user":"55a6caa022cfa321008e01d6","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"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2015-09-28T06:59:27.852Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":2,"body":"[block:html]\n{\n  \"html\": \"The following steps lead you through multiple approaches to customizing your storefront’s design:<br>\\n\\n<ul>\\n  <li><a href=\\\"#QuickFootCol\\\">Changing the Footer’s Background Color</a></li>\\n <li><a href=\\\"#QuickProdSize\\\">Changing the Product Image Size</a></li>\\n <li><a href=\\\"#QuickPageElem\\\">Redesigning Page Elements</a></li>\\n</ul>\\n\\n<h2> <A NAME=\\\"QuickFootCol\\\"></a>Changing the Footer’s Background Color (config.json)</h2>\\n\\nIn a browser, <a href=\\\"/docs/running-stencil-locally\\\">load the local version</a> of your storefront (by default, <a href=\\\"http://localhost:3000\\\">http://localhost:3000</a>). Note the page footer’s appearance.<br><br>\\n\\nNext, open your <span class=\\\"inline-code\\\">&lt;theme-name&gt;/config.json</span> in a text editor. Change the page footer’s default background color to red, by changing the value <span class=\\\"inline-code\\\">\\\"585858\\\"</span> to <span class=\\\"inline-code\\\">\\\"#a96e6e\\\"</span> as indicated below:<br><br>\\n\\n<pre>{\\n \\\"settings\\\": {\\n  <strike>\\\"footer-backgroundColor\\\": \\\"#585858\\\",</strike>\\n  <b>\\\"footer-backgroundColor\\\": \\\"#a96e6e\\\",</b>\\n  }\\n}</pre>\\n\\n\\nThis new value will propagate through the theme’s CSS files and will globally change your footer. Refresh your store’s home page in your browser to verify the change.<br>\\n\\n<h2> <A NAME=\\\"QuickProdSize\\\"></a>Changing the Product Image Size (config.json and Handlebars)</h2>\\n\\nIn the <span class=\\\"inline-code\\\">&lt;theme-name&gt;/config.json</span> file’s <span class=\\\"inline-code\\\">\\\"settings\\\"</span> section, you can define theme-wide image sizes for rendering dynamic content. The excerpt below shows this section’s predefined keys and values (dimensions in pixels) for product thumbnails, galleries, and other standard sizes.<br><br>\\n\\n<pre>{\\n  \\\"settings\\\": {\\n     //...\\n    \\\"logo_size\\\": \\\"250x100\\\",\\n    \\\"brand_size\\\": \\\"190x250\\\",\\n    \\\"gallery_size\\\": \\\"300x300\\\",\\n    \\\"productgallery_size\\\": \\\"500x659\\\",\\n    \\\"product_size\\\": \\\"500x659\\\",\\n    \\\"productthumb_size\\\": \\\"100x100\\\",\\n    \\\"thumb_size\\\": \\\"100x100\\\",\\n    \\\"zoom_size\\\": \\\"1280x1280\\\",\\n    \\\"blog_size\\\": \\\"190x250\\\",\\n    // ...\\n  },\\n}</pre>\\n\\nFor definitions of each key’s usage, please see the <span class=\\\"inline-code\\\">config.json</span> <a href=\\\"/docs/configjson-reference\\\">reference</a>. You can also create theme-wide custom sizes, by defining new types here.<br><br>\\n\\nBelow is an example of code that calls one of the above variables, in the default theme’s<br> \\n<span class=\\\"inline-code\\\">&lt;theme-name&gt;/templates/components/products/card.html</span> file. (This file defines the display of products’ panels or \\\"cards\\\" on multiple storefront pages.) Note the <span class=\\\"inline-code\\\">{{getImage image 'productgallery_size'}}</span> statement, a <a href=\\\"/docs/developing-with-handlebars\\\">Handlebars</a> reference to the standard <span class=\\\"inline-code\\\">productgallery_size</span> size defined in <span class=\\\"inline-code\\\">config.json</span>:<br><br>\\n\\n<pre>&lt;img class=\\\"card-image\\\" src=\\\"{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}\\\" alt=\\\"{{image.alt}}\\\"&gt;</pre><br>\\n\\nFurther examples will guide you in customizing your storefront using the Handlebars templating language. For now, open <span class=\\\"inline-code\\\">config.json</span> and try redefining some of the default size values shown above. Then refresh your storefront’s home page (or other pages or modals) in your browser, and note how the display of product images changes to match your new global size values.<br>\\n\\n<h2> <a name=\\\"QuickPageElem\\\"></a>Redesigning Page Elements (config.json and Handlebars) </h2>\\n\\nThe following example demonstrates how to redesign a storefront page’s layout by editing <a href=\\\"/docs/developing-with-handlebars\\\">Handlebars</a> statements in the page’s HTML. The goal here is simply to move the Product landing page’s \\\"Customers Also Viewed\\\" panel above that page’s \\\"Product Reviews\\\" panel.<br><br>\\n\\nWith your storefront’s <a href=\\\"/docs/running-stencil-locally\\\">local version</a> loaded in a browser, click through to any product, and note the relative positions of the \\\"Product Reviews\\\" and \\\"Customers Also Viewed\\\" panels.<br><br>\\n\\nNext, open your working theme’s <span class=\\\"inline-code\\\">&lt;theme-name&gt;/templates/components/products/tabs.html</span> file. As indicated below, delete or comment out the <span class=\\\"inline-code\\\">similar_by_views</span> component:<br><br>\\n\\n<pre>\\n  // ...\\n  <strike>{{#if product.similar_by_views}}\\n      &lt;li class=\\\"tab\\\" role=\\\"presentational\\\"&gt;\\n          &lt;a class=\\\"tab-title\\\" href=\\\"#tab-similar\\\" role=\\\"tab\\\" tabindex=\\\"0\\\" aria-selected=\\\"false\\\" controls=\\\"tab-similar\\\"&gt;{{lang 'products.similar_by_views'}}&lt;/a&gt;\\n      &lt;/li&gt;\\n  {{/if}}</strike>\\n&lt;/ul&gt;\\n\\n<div class=\\\"tabs-contents\\\">\\n// ...\\n\\n<strike>{{#if product.similar_by_views}}\\n  &lt;div role=\\\"tabpanel\\\" aria-hidden=\\\"true\\\" class=\\\"tab-content has-jsContent\\\" id=\\\"tab-similar\\\"&gt;\\n      {{> components/products/carousel products=product.similar_by_views columns=6}}\\n  &lt;/div&gt;\\n{{/if}}</strike>\\n&lt;/div&gt;\\n</pre>\\n\\n\\nNow open your <span class=\\\"inline-code\\\"><theme-name>/templates/pages/product.html</span> file. As indicated below (in bold), add the <span class=\\\"inline-code\\\">similar_by_views</span> component with a reusable carousel wrapper:<br><br>\\n\\n<pre>{{#if product.videos.list.length}}\\n  {{> components/products/videos product.videos}}\\n{{/if}}\\n\\n<b>{{#if product.similar_by_views}}\\n   {{> components/products/carousel products=product.similar_by_views columns=6}}\\n{{/if}}</b>\\n\\n{{#if settings.show_product_reviews}}\\n  {{> components/products/reviews reviews=product.reviews product=product urls=urls}}\\n{{/if}}</pre>\\n\\n\\nIn your browser, refresh the product page, and check the new arrangement of these components.\"\n}\n[/block]","excerpt":"","slug":"basic-designlayout-changes","type":"basic","title":"Basic Design/Layout Changes"}

Basic Design/Layout Changes


[block:html] { "html": "The following steps lead you through multiple approaches to customizing your storefront’s design:<br>\n\n<ul>\n <li><a href=\"#QuickFootCol\">Changing the Footer’s Background Color</a></li>\n <li><a href=\"#QuickProdSize\">Changing the Product Image Size</a></li>\n <li><a href=\"#QuickPageElem\">Redesigning Page Elements</a></li>\n</ul>\n\n<h2> <A NAME=\"QuickFootCol\"></a>Changing the Footer’s Background Color (config.json)</h2>\n\nIn a browser, <a href=\"/docs/running-stencil-locally\">load the local version</a> of your storefront (by default, <a href=\"http://localhost:3000\">http://localhost:3000</a>). Note the page footer’s appearance.<br><br>\n\nNext, open your <span class=\"inline-code\">&lt;theme-name&gt;/config.json</span> in a text editor. Change the page footer’s default background color to red, by changing the value <span class=\"inline-code\">\"585858\"</span> to <span class=\"inline-code\">\"#a96e6e\"</span> as indicated below:<br><br>\n\n<pre>{\n \"settings\": {\n <strike>\"footer-backgroundColor\": \"#585858\",</strike>\n <b>\"footer-backgroundColor\": \"#a96e6e\",</b>\n }\n}</pre>\n\n\nThis new value will propagate through the theme’s CSS files and will globally change your footer. Refresh your store’s home page in your browser to verify the change.<br>\n\n<h2> <A NAME=\"QuickProdSize\"></a>Changing the Product Image Size (config.json and Handlebars)</h2>\n\nIn the <span class=\"inline-code\">&lt;theme-name&gt;/config.json</span> file’s <span class=\"inline-code\">\"settings\"</span> section, you can define theme-wide image sizes for rendering dynamic content. The excerpt below shows this section’s predefined keys and values (dimensions in pixels) for product thumbnails, galleries, and other standard sizes.<br><br>\n\n<pre>{\n \"settings\": {\n //...\n \"logo_size\": \"250x100\",\n \"brand_size\": \"190x250\",\n \"gallery_size\": \"300x300\",\n \"productgallery_size\": \"500x659\",\n \"product_size\": \"500x659\",\n \"productthumb_size\": \"100x100\",\n \"thumb_size\": \"100x100\",\n \"zoom_size\": \"1280x1280\",\n \"blog_size\": \"190x250\",\n // ...\n },\n}</pre>\n\nFor definitions of each key’s usage, please see the <span class=\"inline-code\">config.json</span> <a href=\"/docs/configjson-reference\">reference</a>. You can also create theme-wide custom sizes, by defining new types here.<br><br>\n\nBelow is an example of code that calls one of the above variables, in the default theme’s<br> \n<span class=\"inline-code\">&lt;theme-name&gt;/templates/components/products/card.html</span> file. (This file defines the display of products’ panels or \"cards\" on multiple storefront pages.) Note the <span class=\"inline-code\">{{getImage image 'productgallery_size'}}</span> statement, a <a href=\"/docs/developing-with-handlebars\">Handlebars</a> reference to the standard <span class=\"inline-code\">productgallery_size</span> size defined in <span class=\"inline-code\">config.json</span>:<br><br>\n\n<pre>&lt;img class=\"card-image\" src=\"{{getImage image 'productgallery_size' (cdn theme_settings.default_image_product)}}\" alt=\"{{image.alt}}\"&gt;</pre><br>\n\nFurther examples will guide you in customizing your storefront using the Handlebars templating language. For now, open <span class=\"inline-code\">config.json</span> and try redefining some of the default size values shown above. Then refresh your storefront’s home page (or other pages or modals) in your browser, and note how the display of product images changes to match your new global size values.<br>\n\n<h2> <a name=\"QuickPageElem\"></a>Redesigning Page Elements (config.json and Handlebars) </h2>\n\nThe following example demonstrates how to redesign a storefront page’s layout by editing <a href=\"/docs/developing-with-handlebars\">Handlebars</a> statements in the page’s HTML. The goal here is simply to move the Product landing page’s \"Customers Also Viewed\" panel above that page’s \"Product Reviews\" panel.<br><br>\n\nWith your storefront’s <a href=\"/docs/running-stencil-locally\">local version</a> loaded in a browser, click through to any product, and note the relative positions of the \"Product Reviews\" and \"Customers Also Viewed\" panels.<br><br>\n\nNext, open your working theme’s <span class=\"inline-code\">&lt;theme-name&gt;/templates/components/products/tabs.html</span> file. As indicated below, delete or comment out the <span class=\"inline-code\">similar_by_views</span> component:<br><br>\n\n<pre>\n // ...\n <strike>{{#if product.similar_by_views}}\n &lt;li class=\"tab\" role=\"presentational\"&gt;\n &lt;a class=\"tab-title\" href=\"#tab-similar\" role=\"tab\" tabindex=\"0\" aria-selected=\"false\" controls=\"tab-similar\"&gt;{{lang 'products.similar_by_views'}}&lt;/a&gt;\n &lt;/li&gt;\n {{/if}}</strike>\n&lt;/ul&gt;\n\n<div class=\"tabs-contents\">\n// ...\n\n<strike>{{#if product.similar_by_views}}\n &lt;div role=\"tabpanel\" aria-hidden=\"true\" class=\"tab-content has-jsContent\" id=\"tab-similar\"&gt;\n {{> components/products/carousel products=product.similar_by_views columns=6}}\n &lt;/div&gt;\n{{/if}}</strike>\n&lt;/div&gt;\n</pre>\n\n\nNow open your <span class=\"inline-code\"><theme-name>/templates/pages/product.html</span> file. As indicated below (in bold), add the <span class=\"inline-code\">similar_by_views</span> component with a reusable carousel wrapper:<br><br>\n\n<pre>{{#if product.videos.list.length}}\n {{> components/products/videos product.videos}}\n{{/if}}\n\n<b>{{#if product.similar_by_views}}\n {{> components/products/carousel products=product.similar_by_views columns=6}}\n{{/if}}</b>\n\n{{#if settings.show_product_reviews}}\n {{> components/products/reviews reviews=product.reviews product=product urls=urls}}\n{{/if}}</pre>\n\n\nIn your browser, refresh the product page, and check the new arrangement of these components." } [/block]