{"id":166,"date":"2024-11-27T19:14:10","date_gmt":"2024-11-27T11:14:10","guid":{"rendered":"https:\/\/www.weswoo.com\/?p=166"},"modified":"2025-08-25T17:52:27","modified_gmt":"2025-08-25T09:52:27","slug":"shopifyshopify-17","status":"publish","type":"post","link":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/","title":{"rendered":"How to Separate Front and Back End in shopify, shopify distribution plugin"},"content":{"rendered":"<h3 id=\"\">article outline<\/h3>\n<hr>\n<p>H1: How to Separate Front and Back End at Shopify<\/p>\n<p>H2: Concepts and advantages of front-end and back-end separation<\/p>\n<ul>\n<li>H3: What is front-end and back-end separation?<\/li>\n<li>H3: Key benefits of front-end and back-end separation<\/li>\n<li>H4: Improve development efficiency<\/li>\n<li>H4: Optimizing the user experience<\/li>\n<li>H4: Better maintainability<\/li>\n<\/ul>\n<p>H2: Shopify platform features and compatibility with front-end and back-end separation<\/p>\n<ul>\n<li>H3: Shopify Platform Overview<\/li>\n<li>H3: Shopify Supports Separate Technology Stacks for Front and Back End<\/li>\n<\/ul>\n<p>H2: How to achieve front-end and back-end separation for Shopify<\/p>\n<ul>\n<li>H3: Using the Shopify Storefront API<\/li>\n<li>H4: Introduction to the Storefront API<\/li>\n<li>H4: How to get and use the Storefront API<\/li>\n<li>H3: Configuring front-end and back-end independence<\/li>\n<li>H4: Separating the Data Layer from the Presentation Layer<\/li>\n<li>H4: Front-end development with React or Vue<\/li>\n<\/ul>\n<p>H2: Steps towards front-end and back-end separation<\/p>\n<ul>\n<li>H3: Step 1: Build the back-end service<\/li>\n<li>H4: Configuring the Shopify app<\/li>\n<li>H4: Setting API access rights<\/li>\n<li>H3: Step 2: Create the front-end application<\/li>\n<li>H4: Use of JavaScript frameworks (React, Vue, etc.)<\/li>\n<li>H4: Data interaction with backend APIs<\/li>\n<li>H3: Step 3: Data Transfer and Rendering<\/li>\n<li>H4: Querying Data with GraphQL<\/li>\n<li>H4: Rendering data to the front-end page<\/li>\n<\/ul>\n<p>H2: Common Challenges and Solutions<\/p>\n<ul>\n<li>H3: Authentication and security issues<\/li>\n<li>H4: API Security Configuration<\/li>\n<li>H4: Using OAuth Authentication<\/li>\n<li>H3: Performance Optimization<\/li>\n<li>H4: Reduction in the number of requests<\/li>\n<li>H4: Accelerating with a CDN<\/li>\n<\/ul>\n<p>H2: Best Practices for Separating Front and Back End at Shopify<\/p>\n<ul>\n<li>H3: Maintain front-end and back-end independence<\/li>\n<li>H3: Modularity and Reusability of Code<\/li>\n<li>H3: Regular updating and maintenance<\/li>\n<\/ul>\n<p>H2: Conclusion<\/p>\n<ul>\n<li>H3: Front-end and back-end separation is the future trend of e-commerce development<\/li>\n<\/ul>\n<p>H2: Frequently Asked Questions<\/p>\n<ul>\n<li>H3: How to get started with front-end and back-end separation on Shopify?<\/li>\n<li>H3: Will using the Storefront API have an impact on site speed?<\/li>\n<li>H3: How do I secure my API data?<\/li>\n<li>H3: Does front-end and back-end separation affect SEO?<\/li>\n<li>H3: What development skills are needed to achieve front-end and back-end separation?<\/li>\n<\/ul>\n<hr>\n<h3 id=\"shopify\">How to Separate Front and Back End at Shopify<\/h3>\n<hr>\n<p>H1: How to Separate Front and Back End at Shopify<\/p>\n<p>With the increasing complexity of e-commerce websites, how to improve website performance and user experience has become one of the key issues facing merchants and developers. Front-end and back-end separation technology provides an efficient solution in this regard. How to realize front-end and back-end separation on the Shopify platform? This article will provide you with a detailed analysis.<\/p>\n<p>H2: Concepts and advantages of front-end and back-end separation<\/p>\n<p>Before we start implementing front-end and back-end separation, we need to understand its basic concepts. Simply put, front-end and back-end separation is a technical architecture that manages and develops the front-end (user interface) and back-end (data processing, logic layer) of a website separately.<\/p>\n<ul>\n<li><strong>H3: What is front-end and back-end separation?<\/strong><\/li>\n<\/ul>\n<p>Separation of front-end and back-end means that developers separate the user interface of the website from the back-end services, with the front-end responsible for display and interaction and the back-end responsible for data processing and business logic. Data transfer through APIs (e.g. RESTful or GraphQL) enables the front-end and back-end to operate independently.<\/p>\n<ul>\n<li>\n<p>H3: Key benefits of front-end and back-end separation<\/p>\n<\/li>\n<li>\n<p>H4: Improve development efficiency<br \/>\nAfter the separation of front-end and back-end, the front-end and back-end development can be carried out in parallel, reducing the dependencies in the development process and improving the development efficiency.<\/p>\n<\/li>\n<li>\n<p>H4: Optimizing the user experience<br \/>\nThe front-end can focus more on user interface optimization, while the back-end focuses more on data processing and interface efficiency, which improves the responsiveness and user experience of the website.<\/p>\n<\/li>\n<li>\n<p>H4: Better maintainability<br \/>\nAs the front and back ends are independent, modifications and updates will not interfere with each other, and code maintenance becomes more concise.<\/p>\n<\/li>\n<\/ul>\n<p>H2: Shopify platform features and compatibility with front-end and back-end separation<\/p>\n<ul>\n<li><strong>H3: Shopify Platform Overview<\/strong><\/li>\n<\/ul>\n<p>Shopify is a popular e-commerce platform that provides rich functionality with a flexible development interface. While Shopify defaults to a traditional front-end and back-end integration model, it also supports separate front-end and back-end development methods, especially through the Storefront API.<\/p>\n<ul>\n<li><strong>H3: Shopify Supports Separate Technology Stacks for Front and Back End<\/strong><\/li>\n<\/ul>\n<p>The technology stack supported by Shopify includes GraphQL and RESTful APIs, of which GraphQL provides a more flexible way of querying data, which is very suitable for architectural design of front-end and back-end separation.<\/p>\n<p>H2: How to achieve front-end and back-end separation for Shopify<\/p>\n<p>The most important thing you can do to achieve front-end and back-end separation with Shopify is to utilize the APIs it provides for data interaction.<\/p>\n<ul>\n<li>\n<p>H3: Using the Shopify Storefront API<\/p>\n<\/li>\n<li>\n<p>H4: Introduction to the Storefront API<br \/>\nStorefront API is a powerful set of APIs provided by Shopify for developers to get product data, handle shopping carts, manage orders, etc. It provides the basis for realizing the separation of front-end and back-end.<\/p>\n<\/li>\n<li>\n<p>H4: How to get and use the Storefront API<br \/>\nYou need to create an API key in Shopify's backend, configure access permissions, and then you can exchange data with the backend via HTTP requests in the front-end application.<\/p>\n<\/li>\n<li>\n<p>H3: Configuring front-end and back-end independence<\/p>\n<\/li>\n<li>\n<p>H4: Separating the Data Layer from the Presentation Layer<br \/>\nIn the front-end and back-end separation architecture, the data layer (e.g., product information, order information) and the display layer (user interface) need to be strictly separated, and the front-end obtains the data and displays it through APIs.<\/p>\n<\/li>\n<li>\n<p>H4: Front-end development with React or Vue<br \/>\nReact and Vue are the most popular JavaScript frameworks that help you build flexible and efficient front-end interfaces. With these frameworks, you can achieve a seamless interface with Shopify's backend.<\/p>\n<\/li>\n<\/ul>\n<p>H2: Steps towards front-end and back-end separation<\/p>\n<ul>\n<li>\n<p>H3: Step 1: Build the back-end service<\/p>\n<\/li>\n<li>\n<p>H4: Configuring the Shopify app<br \/>\nCreate a new app in the Shopify backend and get the API key. Configure permissions to ensure the backend has access to the required data.<\/p>\n<\/li>\n<li>\n<p>H4: Setting API access rights<br \/>\nConfigure API permissions to ensure that the front-end has secure access to necessary data such as product details, inventory, etc.<\/p>\n<\/li>\n<li>\n<p>H3: Step 2: Create the front-end application<\/p>\n<\/li>\n<li>\n<p>H4: Use of JavaScript frameworks (React, Vue, etc.)<br \/>\nCreate a React or Vue application and configure the front-end to communicate with the Shopify back-end. Fetch data via GraphQL or REST API and render it dynamically to the front-end page.<\/p>\n<\/li>\n<li>\n<p>H4: Data interaction with backend APIs<br \/>\nUse a tool like Fetch or Axios to initiate an HTTP request to fetch and display Shopify data to the front-end page.<\/p>\n<\/li>\n<li>\n<p>H3: Step 3: Data Transfer and Rendering<\/p>\n<\/li>\n<li>\n<p>H4: Querying Data with GraphQL<br \/>\nWith GraphQL you can efficiently query the required data and avoid unnecessary data transfers.<\/p>\n<\/li>\n<li>\n<p>H4: Rendering data to the front-end page<br \/>\nRendering data in the front-end application ensures fast and seamless page loading.<\/p>\n<\/li>\n<\/ul>\n<p>H2: Common Challenges and Solutions<\/p>\n<ul>\n<li>\n<p>H3: Authentication and security issues<\/p>\n<\/li>\n<li>\n<p>H4: API Security Configuration<br \/>\nEnsure that API keys and access rights are properly protected from unauthorized access.<\/p>\n<\/li>\n<li>\n<p>H4: Using OAuth Authentication<br \/>\nOAuth authentication ensures secure data exchange and avoids potential security risks.<\/p>\n<\/li>\n<li>\n<p>H3: Performance Optimization<\/p>\n<\/li>\n<li>\n<p>H4: Reduction in the number of requests<br \/>\nReduce server burden and improve response time by optimizing the frequency of API requests.<\/p>\n<\/li>\n<li>\n<p>H4: Accelerating with a CDN<br \/>\nUtilize CDNs to accelerate the loading of static resources and improve website performance.<\/p>\n<\/li>\n<\/ul>\n<p>H2: Best Practices for Separating Front and Back End at Shopify<\/p>\n<ul>\n<li>\n<p>H3: Maintain front-end and back-end independence<br \/>\nEnsure that the front-end and back-end remain independent in the code structure and development process to avoid unnecessary coupling.<\/p>\n<\/li>\n<li>\n<p>H3: Modularity and Reusability of Code<br \/>\nDesigned with modularity of code in mind for ease of reuse and maintenance.<\/p>\n<\/li>\n<li>\n<p>H3: Regular updating and maintenance<br \/>\nRegularly update APIs and front-end code to ensure compatibility and security.<\/p>\n<\/li>\n<\/ul>\n<p>H2: Conclusion<\/p>\n<p>Front-end and back-end separation is an effective means of improving the efficiency of Shopify website development and user experience. By utilizing the Storefront API and modern front-end frameworks wisely, merchants can achieve more flexible and platformable.<\/p>\n<p>H2: Frequently Asked Questions<\/p>\n<ul>\n<li>\n<p>H3: How to get started with front-end and back-end separation on Shopify?<br \/>\nCreate a Shopify app and configure the API key. Then, use a front-end framework like React or Vue to interact with the Shopify back-end for data.<\/p>\n<\/li>\n<li>\n<p>H3: Will using the Storefront API have an impact on site speed?<br \/>\nIf optimized properly, using Storefront API will not significantly affect the speed of your website. By reducing unnecessary requests and using a CDN, you can improve the responsiveness of your website.<\/p>\n<\/li>\n<li>\n<p>H3: How do I secure my API data?<br \/>\nUse OAuth authentication and ensure secure storage of API keys to avoid exposure to unauthorized users.<\/p>\n<\/li>\n<li>\n<p>H3: Does front-end and back-end separation affect SEO?<br \/>\nNo, the main purpose of front-end and back-end separation is to improve user experience and development efficiency, and as long as SEO tags and structured data are properly configured, SEO rankings will not be negatively impacted.<\/p>\n<\/li>\n<li>\n<p>H3: What development skills are needed to achieve front-end and back-end separation?<br \/>\nYou'll need to have a grasp of JavaScript frameworks such as React or Vue, a basic knowledge of GraphQL and RESTful APIs, and Shopify's development tools and APIs.<\/p>\n<\/li>\n<\/ul>\n<blockquote style=\"background: #F5F5F5; font-size: 10px;\"><p><a href=\"https:\/\/www.weswoo.com\/en\/shopify-how-to-add-recommended-products-on-the-cart-page-shopify-how-to-get-the-number-of-products\/\" style=\"text-decoration: none\"><span style=\"color: #929292;\">Related: Shopify how to add recommended products in the shopping cart page, shopify how to get product quantity selection<\/span><\/p>\n<p>Article Outline H1: How to Add Recommended Products on Shopping Cart Page in Shopify H2: What is Recommended Products Feature? H3: Definition of Recommended Products H3: The Role and Importance of Recommended Products H2: Benefits of Setting Up Recommended Products in Shopify H3: Increase Cart Amount H3: Enhance User Experience H3: Enhance Sales Conversion...<\/p>\n<p><\/a><\/p><\/blockquote>","protected":false},"excerpt":{"rendered":"<p>\u6587\u7ae0\u5927\u7eb2 H1: \u5982\u4f55\u5728Shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb H2: \u524d\u540e\u7aef\u5206\u79bb\u7684\u6982\u5ff5\u4e0e\u4f18\u52bf H3: \u4ec0\u4e48\u662f\u524d\u540e\u7aef\u5206\u79bb [&hellip;]<\/p>","protected":false},"author":1,"featured_media":703,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12],"tags":[4,5],"class_list":["post-166","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-shopify-headless","tag-shopify","tag-dtc"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.9 (Yoast SEO v24.0-RC1) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6<\/title>\n<meta name=\"description\" content=\"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6\uff0c\u672c\u6587\u68b3\u7406Shopify\u72ec\u7acb\u7ad9\u7684\u5b9e\u65bd\u6b65\u9aa4\u3001\u5173\u952e\u914d\u7f6e\u548cSEO\u4f18\u5316\u5efa\u8bae\uff0c\u5e2e\u52a9\u8de8\u5883\u54c1\u724c\u63d0\u5347\u4f53\u9a8c\u3001\u8f6c\u5316\u6548\u7387\u4e0e\u641c\u7d22\u53ef\u89c1\u5ea6\u3002\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6\" \/>\n<meta property=\"og:description\" content=\"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/\" \/>\n<meta property=\"og:site_name\" content=\"Shopify Plus &amp; \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO\" \/>\n<meta property=\"article:published_time\" content=\"2024-11-27T11:14:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-08-25T09:52:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1600\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"weswoo\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"weswoo\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/\"},\"author\":{\"name\":\"weswoo\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\"},\"headline\":\"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6\",\"datePublished\":\"2024-11-27T11:14:10+00:00\",\"dateModified\":\"2025-08-25T09:52:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/\"},\"wordCount\":236,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg\",\"keywords\":[\"Shopify\",\"\u72ec\u7acb\u7ad9\"],\"articleSection\":[\"Shopify headless\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/\",\"url\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/\",\"name\":\"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6\",\"isPartOf\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg\",\"datePublished\":\"2024-11-27T11:14:10+00:00\",\"dateModified\":\"2025-08-25T09:52:27+00:00\",\"description\":\"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6\uff0c\u672c\u6587\u68b3\u7406Shopify\u72ec\u7acb\u7ad9\u7684\u5b9e\u65bd\u6b65\u9aa4\u3001\u5173\u952e\u914d\u7f6e\u548cSEO\u4f18\u5316\u5efa\u8bae\uff0c\u5e2e\u52a9\u8de8\u5883\u54c1\u724c\u63d0\u5347\u4f53\u9a8c\u3001\u8f6c\u5316\u6548\u7387\u4e0e\u641c\u7d22\u53ef\u89c1\u5ea6\u3002\",\"breadcrumb\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#primaryimage\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg\",\"width\":1600,\"height\":900},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.weswoo.com\/ja\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#website\",\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"name\":\"Shopify Plus & \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO\",\"description\":\"WESWOO \u4e13\u6ce8 Shopify Plus \u4e0e\u72ec\u7acb\u7ad9\u5b9a\u5236\u5f00\u53d1\uff0c\u63d0\u4f9b\u9ad8\u6027\u80fd\u7535\u5546\u7f51\u7ad9\u5efa\u8bbe\u3001\u8de8\u5883\u8fd0\u8425\u652f\u6301\u3001B2B \u53ca\u591a\u6e20\u9053\u96c6\u6210\uff0c\u52a9\u529b\u54c1\u724c\u5168\u7403\u589e\u957f\u3002\",\"publisher\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\"},\"alternateName\":\"WESWOO \u4e13\u6ce8 Shopify Plus \u4e0e\u72ec\u7acb\u7ad9\u5b9a\u5236\u5f00\u53d1\uff0c\u63d0\u4f9b\u9ad8\u6027\u80fd\u7535\u5546\u7f51\u7ad9\u5efa\u8bbe\u3001\u8de8\u5883\u8fd0\u8425\u652f\u6301\u3001B2B \u53ca\u591a\u6e20\u9053\u96c6\u6210\uff0c\u52a9\u529b\u54c1\u724c\u5168\u7403\u589e\u957f\u3002\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.weswoo.com\/en\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#organization\",\"name\":\"WESWOO\u2014Shopify\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\",\"alternateName\":\"WESWOO - SHOPIFY\",\"url\":\"https:\/\/www.weswoo.com\/en\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"contentUrl\":\"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png\",\"width\":1280,\"height\":1024,\"caption\":\"WESWOO\u2014Shopify\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\"},\"image\":{\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/\"},\"description\":\"\u6211\u4eec\u662fShopify\u5b98\u65b9\u5408\u4f5c\u4f19\u4f34\uff0c\u901a\u8fc7\u4e86Shopify Partner Academy\u8ba4\u8bc1\uff0c\u5177\u5907\u591a\u5e74\u72ec\u7acb\u7ad9DTC\u524d\u7aef\u5f00\u53d1\u7ecf\u9a8c\uff0c\u719f\u6089Liquid\u548c\u5404\u9879\u8ba1\u7b97\u673a\u8bed\u8a00\u3002 \u6211\u4eec\u4e0d\u662f\u4e00\u5bb6\u5355\u7eaf\u7684\u7f51\u7ad9\u8bbe\u8ba1\u670d\u52a1\u5546\uff0c\u63d0\u4f9b\u4f18\u8d28\u51c6\u786e\u7684\u884c\u4e1a\u6570\u636e\u548cSEO\uff0cSEM\u6307\u6807\uff0c\u901a\u8fc7\u4eba\u7fa4\u753b\u50cf\u548c\u884c\u4e1a\u7279\u6027\u8fdb\u884c\u6570\u636e\u6316\u6398\u3002\",\"email\":\"xxmui@outlook.com\",\"telephone\":\"18688202145\",\"legalName\":\"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8\",\"foundingDate\":\"2021-04-26\",\"numberOfEmployees\":{\"@type\":\"QuantitativeValue\",\"minValue\":\"11\",\"maxValue\":\"50\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642\",\"name\":\"weswoo\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g\",\"caption\":\"weswoo\"},\"sameAs\":[\"http:\/\/weswoo.com\"],\"url\":\"https:\/\/www.weswoo.com\/en\/author\/weswoo\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Separate Front and Back End in shopify, shopify distribution plugin","description":"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6\uff0c\u672c\u6587\u68b3\u7406Shopify\u72ec\u7acb\u7ad9\u7684\u5b9e\u65bd\u6b65\u9aa4\u3001\u5173\u952e\u914d\u7f6e\u548cSEO\u4f18\u5316\u5efa\u8bae\uff0c\u5e2e\u52a9\u8de8\u5883\u54c1\u724c\u63d0\u5347\u4f53\u9a8c\u3001\u8f6c\u5316\u6548\u7387\u4e0e\u641c\u7d22\u53ef\u89c1\u5ea6\u3002","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/","og_locale":"en_US","og_type":"article","og_title":"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6","og_description":"WESWOO\u2014\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6\uff0c\u63d0\u4f9bshopify liquid\u4e13\u4e1a\u5f00\u53d1\u65b9\u6848 - Shopify Plus\u5408\u4f5c\u4f19\u4f34 - \u897f\u897f\u6728\uff08\u5e7f\u5dde\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","og_url":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/","og_site_name":"Shopify Plus &amp; \u72ec\u7acb\u7ad9\u5f00\u53d1\uff5c\u8de8\u5883\u7535\u5546\u5b9a\u5236\u65b9\u6848 - WESWOO","article_published_time":"2024-11-27T11:14:10+00:00","article_modified_time":"2025-08-25T09:52:27+00:00","og_image":[{"width":1600,"height":900,"url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg","type":"image\/jpeg"}],"author":"weswoo","twitter_card":"summary_large_image","twitter_misc":{"Written by":"weswoo","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#article","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/"},"author":{"name":"weswoo","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642"},"headline":"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6","datePublished":"2024-11-27T11:14:10+00:00","dateModified":"2025-08-25T09:52:27+00:00","mainEntityOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/"},"wordCount":236,"commentCount":0,"publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg","keywords":["Shopify","\u72ec\u7acb\u7ad9"],"articleSection":["Shopify headless"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/","url":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/","name":"How to Separate Front and Back End in shopify, shopify distribution plugin","isPartOf":{"@id":"https:\/\/www.weswoo.com\/en\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#primaryimage"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#primaryimage"},"thumbnailUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg","datePublished":"2024-11-27T11:14:10+00:00","dateModified":"2025-08-25T09:52:27+00:00","description":"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6\uff0c\u672c\u6587\u68b3\u7406Shopify\u72ec\u7acb\u7ad9\u7684\u5b9e\u65bd\u6b65\u9aa4\u3001\u5173\u952e\u914d\u7f6e\u548cSEO\u4f18\u5316\u5efa\u8bae\uff0c\u5e2e\u52a9\u8de8\u5883\u54c1\u724c\u63d0\u5347\u4f53\u9a8c\u3001\u8f6c\u5316\u6548\u7387\u4e0e\u641c\u7d22\u53ef\u89c1\u5ea6\u3002","breadcrumb":{"@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#primaryimage","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2024\/11\/31.jpg","width":1600,"height":900},{"@type":"BreadcrumbList","@id":"https:\/\/www.weswoo.com\/en\/shopifyshopify-17\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.weswoo.com\/ja\/"},{"@type":"ListItem","position":2,"name":"\u5982\u4f55\u5728shopify\u5b9e\u73b0\u524d\u540e\u7aef\u5206\u79bb\uff0cshopify\u5206\u9500\u63d2\u4ef6"}]},{"@type":"WebSite","@id":"https:\/\/www.weswoo.com\/en\/#website","url":"https:\/\/www.weswoo.com\/en\/","name":"Shopify Plus &amp; Standalone Website Development\uff5cCustomized Cross-border E-commerce Solution - WESWOO","description":"WESWOO specializes in Shopify Plus and standalone custom development, providing high-performance e-commerce website development, cross-border operations support, B2B and multi-channel integration to help brands grow globally.","publisher":{"@id":"https:\/\/www.weswoo.com\/en\/#organization"},"alternateName":"WESWOO \u4e13\u6ce8 Shopify Plus \u4e0e\u72ec\u7acb\u7ad9\u5b9a\u5236\u5f00\u53d1\uff0c\u63d0\u4f9b\u9ad8\u6027\u80fd\u7535\u5546\u7f51\u7ad9\u5efa\u8bbe\u3001\u8de8\u5883\u8fd0\u8425\u652f\u6301\u3001B2B \u53ca\u591a\u6e20\u9053\u96c6\u6210\uff0c\u52a9\u529b\u54c1\u724c\u5168\u7403\u589e\u957f\u3002","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.weswoo.com\/en\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.weswoo.com\/en\/#organization","name":"WESWOO-Shopify cross-border e-commerce independent website experts","alternateName":"WESWOO - SHOPIFY","url":"https:\/\/www.weswoo.com\/en\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/","url":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","contentUrl":"https:\/\/www.weswoo.com\/wp-content\/uploads\/2025\/08\/fulllogo.png","width":1280,"height":1024,"caption":"WESWOO\u2014Shopify\u8de8\u5883\u7535\u5546\u72ec\u7acb\u7ad9\u4e13\u5bb6"},"image":{"@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/logo\/image\/"},"description":"We are an official Shopify partner, certified by Shopify Partner Academy, with years of experience in DTC front-end development for independent sites, familiar with Liquid and various computer languages. We are not a simple website design service provider, we provide high-quality and accurate industry data and SEO, SEM indicators, data mining through crowd profiling and industry characteristics.","email":"xxmui@outlook.com","telephone":"18688202145","legalName":"\u897f\u897f\u6728\uff08\u6df1\u5733\uff09\u79d1\u6280\u6709\u9650\u8d23\u4efb\u516c\u53f8","foundingDate":"2021-04-26","numberOfEmployees":{"@type":"QuantitativeValue","minValue":"11","maxValue":"50"}},{"@type":"Person","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/bc9a01c6d3445dbdfb68e96ee00f9642","name":"weswoo","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.weswoo.com\/en\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/60152bb1145c677a6b80dd2db1d761f279c3db9d602631e4f31f40a5ffd5ba44?s=96&d=mm&r=g","caption":"weswoo"},"sameAs":["http:\/\/weswoo.com"],"url":"https:\/\/www.weswoo.com\/en\/author\/weswoo\/"}]}},"_links":{"self":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/comments?post=166"}],"version-history":[{"count":0,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/posts\/166\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media\/703"}],"wp:attachment":[{"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/media?parent=166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/categories?post=166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.weswoo.com\/en\/wp-json\/wp\/v2\/tags?post=166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}