{"id":2543,"date":"2022-03-03T05:38:28","date_gmt":"2022-03-03T10:38:28","guid":{"rendered":"https:\/\/onecommerce.io\/blog\/?p=2543"},"modified":"2023-04-24T02:08:07","modified_gmt":"2023-04-24T06:08:07","slug":"shopify-online-store-2-0","status":"publish","type":"post","link":"https:\/\/onecommerce.io\/blog\/2022\/03\/03\/shopify-online-store-2-0\/","title":{"rendered":"Shopify Online Store 2.0 &#8211; What Merchants Should Know About"},"content":{"rendered":"<p><a href=\"https:\/\/onecommerce.io\/blog\/shopify-online-store-2-0\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\"><b><i>Shopify Online Store 2.0<\/i><\/b><\/a><i><span style=\"font-weight: 400;\">, also known as Shopify OS 2.0, has been recently discussed a whole lot by merchants on the platform.\u00a0<\/span><\/i><\/p>\n<p><i><span style=\"font-weight: 400;\">Announced at Shopify Unite back in 2021, Shopify Online Store 2.0 is regarded as one of the platform\u2019s \u2018biggest updates\u2019 that is to change how merchants control their themes.\u00a0\u00a0<\/span><\/i><\/p>\n<p><i><span style=\"font-weight: 400;\">But in what ways- you might ask. Well, in this article, we\u2019re going to take a closer look at What Shopify Online Store 2.0 is and Its Impact on you as-a-merchant.\u00a0<\/span><\/i><\/p>\n<p><i><span style=\"font-weight: 400;\">Scroll down for more!\u00a0<\/span><\/i><\/p>\n<h2><b>Overview<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">To be simplest, Shopify Online Store 2.0 provides merchants with a <\/span><b>more flexible store content<\/b><span style=\"font-weight: 400;\"> and <\/span><b>easier section &amp; block builder<\/b><span style=\"font-weight: 400;\"> on merchants\u2019 storefronts.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Particularly, the Shopify Online Store 2.0 editor gives merchants more control over building their custom templates, storefronts, and apps\u2019 block to the exact spot they want on their website.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Overall, here are the perks you might enjoy with Shopify Online Store 2.0:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">35% faster site loading speed (according to Shopify\u2019s word)\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Easier to add &amp; remove apps without leaving draft code\u00a0<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">More control over your store content<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Excited? Yup, it\u2019s time to dive deeper into the <\/span><b>3 biggest updates of Shopify Online Store 2.0:<\/b><\/p>\n<h3><b>1 . Sections on every page<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">A section is a banner, a text box or a testimonial slider, etc. You combine these so-called \u2018sections\u2019 to build up your page (homepage, product page, etc.) till you get your desired look.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The thing is, previously, Shopify\u2019s sections were only available on a store\u2019s Homepage. But with Shopify Online Store 2.0, you can now <\/span><b>add sections on every page and every spot of your e-site<\/b><span style=\"font-weight: 400;\">, from your catalog page, blog page to collection page, product page, cart page, etc.\u00a0\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For better understanding, here is a demo of how I add a section on my product page with ease:<\/span><\/p>\n<p><img class=\"alignnone size-full wp-image-13402\" src=\"https:\/\/onecommerce.io\/blog\/wp-content\/uploads\/2022\/03\/add-sections-everywhere-online-store-2.0-1.gif\" alt=\"\" width=\"800\" height=\"433\" title=\"\"><\/p>\n<p><span style=\"font-weight: 400;\"><img class=\"aligncenter wp-image-2559 size-full\" src=\"http:\/\/onecommerce.io\/blog\/wp-content\/uploads\/2022\/03\/add-sections-everywhere-online-store-2.0.gif\" alt=\"\" width=\"1920\" height=\"1040\" title=\"\"><\/span><\/p>\n<table style=\"background-color: #d8ead2;\">\n<tbody>\n<tr>\n<td><b>?<\/b>This update is an absolute game-changer for Shopify merchants since they have much more<b><b style=\"font-family: inherit; font-size: inherit;\">\u00a0freedom to add any branded element<\/b><span style=\"font-weight: 400;\"> that they want on a wanted page<\/span><\/b><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p><span style=\"font-weight: 400;\">For instance, you can add a promo banner on the homepage to the top of the default product page directly on the theme editing interface without having to rely on an app or a developer.\u00a0<\/span><\/p>\n<h3><span style=\"font-weight: 400;\"><b style=\"font-family: Raleway, sans-serif; font-size: 22px; letter-spacing: 0px;\">2. Theme app extensions &amp; app blocks<\/b><\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Historically, the way in which an app was embedded and worked with a Shopify store was pretty fixated. Without the app developer\u2019s particular settings for the pre-selected theme, the way how an app\u2019s elements show up on your store was limited.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">However, since Shopify Online Store 2.0 was on air, apps now come in blocks. This lets merchants drag and drop anything that an app provides to any location of any page.<\/span><\/p>\n<div id=\"attachment_13350\" style=\"width: 1242px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-13350\" class=\"wp-image-13350 size-full\" src=\"https:\/\/onecommerce.io\/blog\/wp-content\/uploads\/2022\/03\/with-and-without-theme-app-extensions-1.jpg\" alt=\"\" width=\"1232\" height=\"930\" title=\"\"><p id=\"caption-attachment-13350\" class=\"wp-caption-text\">Shopify Online Store 2.0 &#8211; Onecommerce<\/p><\/div>\n<p><img class=\"aligncenter wp-image-2582\" src=\"http:\/\/onecommerce.io\/blog\/wp-content\/uploads\/2022\/03\/theme-app-extensions_AdobeCreativeCloudExpress-1.gif\" alt=\"\" width=\"800\" height=\"434\" title=\"\"><br \/>\n<b><\/b><\/p>\n<table style=\"background-color: #d8ead2;\">\n<tbody>\n<tr>\n<td><b>?<span style=\"font-weight: 400;\"> This lets merchants <\/span>easily integrate apps into any theme directly in the theme editor<span style=\"font-weight: 400;\"> with no coding required. And when an app is uninstalled, any codes associated with that app will be auto-removed.\u00a0<\/span><\/b><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><b>3. Metafields &#8211; more flexibility over store content<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">For your info, \u2018metafields\u2019 are extra pieces of data that you add to a page of your Shopify store to make it more informative or appealing for prospecting online shoppers.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Back in the \u2018<\/span><i><span style=\"font-weight: 400;\">pre-metafields<\/span><\/i><b>\u2019 <\/b><span style=\"font-weight: 400;\">days<\/span><b>,<\/b><span style=\"font-weight: 400;\"> Shopify merchants have to rely solely on apps or a Shopify Expert whenever they need to add an extra piece of information on an intended page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">With OS 2.0, merchants will no longer have to hardcode the display of metafields into themes or rely on APIs to add more data to a page belonging to their Shopify store.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Instead, merchants can now add multiple metafileds to 5 main pages:\u00a0<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Products<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Variants<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Collections<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Customers<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">Orders.<\/span><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<div id=\"attachment_13348\" style=\"width: 1906px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-13348\" class=\"wp-image-13348 size-full\" src=\"https:\/\/onecommerce.io\/blog\/wp-content\/uploads\/2022\/03\/metafields-on-product-detail-page-1.jpg\" alt=\"\" width=\"1896\" height=\"960\" title=\"\"><p id=\"caption-attachment-13348\" class=\"wp-caption-text\">Shopify Online Store 2.0 &#8211; Onecommerce<\/p><\/div>\n<p><span style=\"font-weight: 400;\">Metafields even support a wide variety of file types with <a href=\"https:\/\/onecommerce.io\/blog\/category\/shopify\/\" target=\"_blank\" rel=\"noopener\" data-schema-attribute=\"\">Shopify\u2019s<\/a> file picker too! Instead of letting you code a specific file type to your theme, OS 2.0\u2019s metafield file picker allows you to upload selected media to your wanted page.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">For instance, you can leverage metafields to add a size chart guideline to your product detail pages or care guide to improve your customer\u2019s on-site shopping experience.<\/span><\/p>\n<table style=\"background-color: #d8ead2;\">\n<tbody>\n<tr>\n<td><b>?<span style=\"font-weight: 400;\"> With metafields, merchants can easily make any alterations or amendments to their online storefront without the need to outsource or invest in apps.<\/span><span style=\"font-weight: 400;\">\u00a0<\/span><\/b><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3><b>4. Theme Editor Improvements<\/b><\/h3>\n<p><span style=\"font-weight: 400;\">Gone are the days of wasting time searching a long list of sections to find the one you need to customize. That\u2019s because now you have a much more intuitive and streamlined theme editor interface.\u00a0<\/span><\/p>\n<p><span style=\"font-weight: 400;\">You can visualize sections on a particular page with an accordion view of collapsible sections. Not to mention that you can liquid code directly via your theme editor too.<\/span><\/p>\n<div id=\"attachment_13349\" style=\"width: 320px\" class=\"wp-caption aligncenter\"><img aria-describedby=\"caption-attachment-13349\" class=\"wp-image-13349 size-full\" src=\"https:\/\/onecommerce.io\/blog\/wp-content\/uploads\/2022\/03\/theme-editing-interface-1.jpg\" alt=\"Manage sections better with a tree-down view\" width=\"310\" height=\"347\" title=\"\"><p id=\"caption-attachment-13349\" class=\"wp-caption-text\">Manage sections better with a tree-down view<\/p><\/div>\n<h2><b>Shopify Online Store 2.0 &#8211; Summary<\/b><\/h2>\n<p><span style=\"font-weight: 400;\">In brief, <strong>Shopify Online Store 2.0<\/strong> has profoundly eased up the way merchants customize their Shopify stores, from unlimited section capability, easy configuration of app blocks to more flexible content with metafields, and a more tractable theme editor interface.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Let&#8217;s take a closer look at What Shopify Online Store 2.0 is and Its Impact on you as-a-merchant.\u00a0<\/p>\n","protected":false},"author":6,"featured_media":13351,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[3],"tags":[],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/2543"}],"collection":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/comments?post=2543"}],"version-history":[{"count":11,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/2543\/revisions"}],"predecessor-version":[{"id":13403,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/posts\/2543\/revisions\/13403"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/media\/13351"}],"wp:attachment":[{"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/media?parent=2543"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/categories?post=2543"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/onecommerce.io\/blog\/wp-json\/wp\/v2\/tags?post=2543"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}