{"id":78831,"date":"2017-02-09T10:53:35","date_gmt":"2017-02-09T15:53:35","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=78831"},"modified":"2017-06-24T08:22:10","modified_gmt":"2017-06-24T12:22:10","slug":"shopify-edit-htmlcss-files","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/shopify-edit-htmlcss-files.html","title":{"rendered":"Shopify. How to edit html css files"},"content":{"rendered":"<p>The following instructions will show you how to access <strong>HTML&#47;CSS<\/strong> files in <strong><a href=\"https:\/\/www.templatemonster.com\/shopify-themes.php\" target=\"_blank\">Shopify based templates<\/a><\/strong>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/kbH1ib9RHC4\"><\/iframe>\r\n<\/div>\r\n<h3 class=\"custom\"> Editing the existing files<\/h3>\r\n\r\n<ol>\r\n    <li><p>Log into <strong>Shopify<\/strong> backend and tap <strong>Online Store<\/strong> under the <strong>Sales Channels<\/strong>;<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files.jpg\" alt=\"shopify_how_to_edit_htmlcss_files\" width=\"1156\" height=\"646\" class=\"alignnone size-full wp-image-78833\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files.jpg 1156w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files-150x84.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files-300x168.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files-768x429.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files-1024x572.jpg 1024w\" sizes=\"(max-width: 1156px) 100vw, 1156px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li><p>Under the <em>Online Store option<\/em> select &#8216;themes&#8217;. On the right click on a &#40;&#46;&#46;&#46;&#41; link and choose <strong>Edit HTML&#47;CSS<\/strong>;<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_1.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_1.jpg\" alt=\"shopify_how_to_edit_htmlcss_files_1\" width=\"1154\" height=\"626\" class=\"alignnone size-full wp-image-78834\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_1.jpg 1154w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_1-150x81.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_1-300x163.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_1-768x417.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_1-1024x555.jpg 1024w\" sizes=\"(max-width: 1154px) 100vw, 1154px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li><p>Select the file you would like to edit on the left, apply modifications to the file using the Shopify inbuilt editor and click <strong>Save<\/strong> in top right corner;<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_2.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_2.jpg\" alt=\"shopify_how_to_edit_htmlcss_files_2\" width=\"1154\" height=\"621\" class=\"alignnone size-full wp-image-78835\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_2.jpg 1154w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_2-150x81.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_2-300x161.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_2-768x413.jpg 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_2-1024x551.jpg 1024w\" sizes=\"(max-width: 1154px) 100vw, 1154px\" \/><\/a>\t\t\r\n\t<\/li>\r\n<\/ol>\r\n\r\n<h3>Creating files <\/h3>\r\n\r\n<ol>\r\n    <li><p>You will see the template file structure under the <strong>Edit HTML&#47;CSS<\/strong> menu;<\/p>\r\n\t    <ul class=\"list\">\r\n\t\t\t<li><p>Template <strong>Layout<\/strong> directory; the <a href=\"https:\/\/help.shopify.com\/themes\/development\/layouts\" target=\"_blank\">layout directory<\/a> is rendered as the Layouts folder in the Admin. \r\n\t\t\tIt contains theme layout templates which by default is the <em>theme.liquid<\/em> file. All Liquid templates inside the templates folder are rendered inside the <em>theme.liquid<\/em> file&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Templates<\/strong> <a href=\"https:\/\/help.shopify.com\/themes\/development\/templates\" target=\"_blank\">directory<\/a> is rendered as the <em>Templates<\/em> folder in the Admin. It contains template pages (categories, cart, etc.)&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Snippets<\/strong> directory is rendered as the <em>Snippets<\/em> folder in the Admin. It contains all the <strong>theme&#39;s Liquid snippet files<\/strong> which are bits of code that can be referenced in other templates of a theme. \r\n\t\t\tUse the <a href=\"https:\/\/help.shopify.com\/themes\/liquid\/tags#include\" target=\"_blank\"> include tag<\/a> to load a snippet into your theme&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>Assets<\/strong> directory is rendered as the <em>Assets<\/em> folder in the Admin. It contains all the assets used in the theme, including <em>images<\/em>, <em>stylesheets<\/em>, and <em>javascript<\/em> files. \r\n\t\t\tUse the <a href=\"https:\/\/help.shopify.com\/themes\/liquid\/filters\/url-filters#asset_url\" target=\"_blank\">asset_url filter<\/a> to reference a theme asset in your templates.&#59;<\/p><\/li>\r\n\t\t\t<li><p><strong>configs<\/strong> directory is rendered as the <em>Configs<\/em> folder in the Admin. It includes a <strong>settings_schema.json<\/strong> file and a <a href=\"https:\/\/help.shopify.com\/themes\/development\/theme-editor\/settings-schema\" target=\"_blank\"><strong>settings_data.json<\/strong><\/a> file. \r\n\t\t\t\tThe <em>settings_schema.json<\/em> file can be used to render <a href=\"https:\/\/help.shopify.com\/themes\/customization#theme-settings\" target=\"_blank\">Theme Settings<\/a> form when changing the look and feel of a store. \r\n\t\t\tThis directory also contains the settings_data.json file, which stores the <strong>merchant\u2019s Theme Settings preferences<\/strong>;<\/p><\/li>\r\n\t\t\t<li><p><strong>Locales<\/strong> directory is rendered as the <em>Locales<\/em> folder in the Admin. It contains the <a href=\"https:\/\/help.shopify.com\/themes\/development\/internationalizing\/locale-files\" target=\"_blank\">theme locale files<\/a> which are used to provide translated content for the theme&#59;<\/p><\/li>\r\n\t\t<\/ul>\r\n\t<\/li>\r\n\t<li><p>To create a new  instance of the <em>asset<\/em> file, for example, tap <strong>Add new asset<\/strong> link;<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_3.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_3.jpg\" alt=\"shopify_how_to_edit_htmlcss_files_3\" width=\"978\" height=\"535\" class=\"alignnone size-full wp-image-78836\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_3.jpg 978w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_3-150x82.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_3-300x164.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_3-768x420.jpg 768w\" sizes=\"(max-width: 978px) 100vw, 978px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li><p><strong>Shopify<\/strong> provides both <em>upload<\/em> file function and <em>create a blank file<\/em> function in the admin area;<\/p><\/li>\r\n\t<li><p>Select, for example, <em>create a blank file<\/em>, give your file a name and select extension.<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_4.jpg\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_4.jpg\" alt=\"shopify_how_to_edit_htmlcss_files_4\" width=\"985\" height=\"431\" class=\"alignnone size-full wp-image-78837\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_4.jpg 985w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_4-150x66.jpg 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_4-300x131.jpg 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/shopify_how_to_edit_htmlcss_files_4-768x336.jpg 768w\" sizes=\"(max-width: 985px) 100vw, 985px\" \/><\/a>\t\t\r\n\t<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=kbH1ib9RHC4?width=1280&amp;height=720\" rel=\"prettyPhoto\">Shopify. How to edit html\/css files<\/a>","protected":false},"excerpt":{"rendered":"<p>The following instructions will show you how to access <strong>HTML&#47;CSS<\/strong> files in <strong>Shopify<\/strong> based templates.<\/p>\n","protected":false},"author":111,"featured_media":78839,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1771],"tags":[514,1048,609,2411,2419],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/78831"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/111"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=78831"}],"version-history":[{"count":1,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/78831\/revisions"}],"predecessor-version":[{"id":81675,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/78831\/revisions\/81675"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/78839"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=78831"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=78831"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=78831"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}