{"id":79498,"date":"2020-01-03T04:10:31","date_gmt":"2020-01-03T09:10:31","guid":{"rendered":"https:\/\/www.templatemonster.com\/help\/?p=79498"},"modified":"2020-01-03T04:49:18","modified_gmt":"2020-01-03T09:49:18","slug":"shopify-add-icon-custom-block","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/shopify-add-icon-custom-block.html","title":{"rendered":"Shopify. How to add icon into Custom block"},"content":{"rendered":"<p>The following tutorial is going to show you how to add an icon into Custom block in <a href=\"https:\/\/www.templatemonster.com\/shopify-themes.php\" title=\"Shopify template\" target=\"_blank\">Shopify template<\/a>.<\/p>\r\n\r\n <div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/YQ4OweD6vys\"><\/iframe>\r\n<\/div>\r\n<ol>\r\n\t<li><p>Log into your site admin panel and navigate to <strong>Online Store -> Themes<\/strong>.<\/p><\/li>\r\n\t<li><p>Click on <strong>Edit HTML\/CSS<\/strong> tab:<p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_1.png\" alt=\"Shopify. How to add icon into Custom block_1\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79574\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_1.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_1-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_1-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_1-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_1-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\t\t\r\n\t<\/li>\r\n\t<li><p>Find the <strong>assets.css.liquid<\/strong> file in the <strong>Assets<\/strong> folder:<\/p>\r\n\t\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_2.png\" alt=\"Shopify. How to add icon into Custom block_2\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79575\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_2.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_2-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_2-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_2-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_2-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\r\n\t<li><p>Find the list of icons there on line 6695 (line number might differ in your template):<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_3.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_3.png\" alt=\"Shopify. How to add icon into Custom block_3\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79576\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_3.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_3-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_3-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_3-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_3-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\r\n\t<\/li>\t\r\n\t<li><p>Let&#8217;s add an airplane icon to header custom block #1. Find the name of an icon you need in the list (to see the list you need to scroll it to the right):<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_4.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_4.png\" alt=\"Shopify. How to add icon into Custom block_4\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79577\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_4.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_4-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_4-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_4-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_4-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\r\n\t\r\n\t<li><p>Then open the <strong>settings_schema.json<\/strong> file in <strong>Config<\/strong> folder:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_5.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_5.png\" alt=\"Shopify. How to add icon into Custom block_5\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79578\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_5.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_5-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_5-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_5-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_5-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\t\r\n\t<li><p>Find the place where header custom block #1 icons are set (you can use Ctrl+F buttons for quick search):<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_6.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_6.png\" alt=\"Shopify. How to add icon into Custom block_6\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79579\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_6.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_6-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_6-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_6-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_6-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\t\r\n\t<li><p>Copy and paste the last item code:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_7.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_7.png\" alt=\"Shopify. How to add icon into Custom block_7\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79580\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_7.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_7-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_7-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_7-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_7-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\r\n\t<li><p>Then change the <strong>&#8220;label&#8221;<\/strong> and <strong>&#8220;value&#8221;<\/strong> up to your needs (in our case it is <strong>fl-bigmug-line-airplane86<\/strong> and <strong>Airplane<\/strong>):<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_8.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_8.png\" alt=\"Shopify. How to add icon into Custom block_8\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79581\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_8.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_8-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_8-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_8-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_8-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\t\r\n\t<li><p>Save the changes:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_9.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_9.png\" alt=\"Shopify. How to add icon into Custom block_9\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79582\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_9.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_9-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_9-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_9-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_9-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\t\r\n\t<li><p>Now you can choose your new icon for Header custom block #1:<\/p>\r\n\t\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_10.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_10.png\" alt=\"Shopify. How to add icon into Custom block_10\" width=\"1280\" height=\"720\" class=\"alignnone size-full wp-image-79583\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_10.png 1280w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_10-150x84.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_10-300x169.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_10-768x432.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2017\/02\/Shopify.-How-to-add-icon-into-Custom-block_10-1024x576.png 1024w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><\/a>\r\n\t\t\r\n\t<\/li>\r\n\t<\/ol>\r\n\t<p>This is the end of the tutorial. Now you know how to add an icon into a Custom block in Shopify.<\/p>\t\t\t\t\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=YQ4OweD6vys?width=1280&amp;height=720\" rel=\"prettyPhoto\">Shopify. How to add icon into Custom block<\/a>\r\n<h3>Shopify Business Startup Kit<\/h3>\r\n<p><img loading=\"lazy\" src=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/03\/Shopify-1200x630.png\" alt=\"\" width=\"1024\" height=\"537\" class=\"alignnone size-full wp-image-85505\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/03\/Shopify-1200x630.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/03\/Shopify-1200x630-150x79.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/03\/Shopify-1200x630-300x157.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2015\/03\/Shopify-1200x630-768x403.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/p>\r\n<p>If you are an entrepreneur who wants to launch an online store but doesn\u2019t want to deal with everything that\u2019s involved in the process of creating one, here\u2019s what I\u2019ve got for you.<a href=\"https:\/\/www.templatemonster.com\/shopify-business-kit\/\"> Shopify Business Startup Kit<\/a> is a service that allows you to forget about all the problems and get a ready-made, fully functional online shop just in three days. It sounds insane, isn\u2019t it? Yet it is true. So let us have a closer look at this baby.<\/p>\r\n\r\n<p><strong>What Is It?<\/strong><\/p>\r\n\r\n<p>Basically, it is a service provided by TemplateMonster the main point of which is to build a website for you. The kit guarantees to make a ready-to-work online shop just in three days, so you don\u2019t have to struggle with installing a theme yourself or finding a decent developer who can do it for you. Your shop would be properly launched by a team of professionals who know what they do.<\/p>\r\n\r\n<p><strong>What Do You Get?<\/strong><\/p>\r\n\r\n<p>Apart from that, the service comes with excellent 24\/7 support, which means that in case of any sort of problem, you would be able to easily and quickly solve them all. In addition to that, the Shopify Business Startup Kit is equipped with 5 must-have apps that would help improve your store\u2019s functionality.<\/p>\r\n\r\n<p><strong>Pricing<\/strong><\/p>\r\n\r\n<p>In terms of pricing, you will be charged $359 for this very kit, but considering everything it comes with, it\u2019s totally worth it. Besides, if you are unsure whether you need it or not, you can try out a free 30-days trial. Finally, you can check whether the company has any discounts on this very service since they usually have lots of special deals and offers.<\/p>\r\n\r\n<p><strong>How Does It Work?<\/strong><\/p>\r\n\r\n<p>Once you got your Shopify Business Startup Kit, you have to pick up a theme you would like to use on your store, provide the company with access to your shop as well as the info about the products you sell and wait 2-3 days for your store to be done. Simple as it is.<\/p>\r\n\r\n<p><strong>Reviews<\/strong><\/p>\r\n\r\n<p>The service has great reviews from those lucky ones who already tried it, which means that it\u2019s something worth your attention. So go ahead and check out some reviews as well as find out more about<a href=\"https:\/\/www.templatemonster.com\/shopify-business-kit\/\"> Shopify Business Startup Kit<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>The following tutorial is going to show you how to add an icon into Custom block in Shopify.<\/p>\n","protected":false},"author":123,"featured_media":79584,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1771],"tags":[618,674,2419],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/79498"}],"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\/123"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=79498"}],"version-history":[{"count":2,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/79498\/revisions"}],"predecessor-version":[{"id":85525,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/79498\/revisions\/85525"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/79584"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=79498"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=79498"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=79498"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}