Update

.vitepress/config.mjs

@@ -42,10 +42,15 @@ export default defineConfig({
 			{
 				text: 'Application',
 				items: [
-					{text: 'Design', link: '/app/design'},
-					{text: 'Product', link: '/app/product'},
+					{text: 'Login', link: '/app/login'},
+					{text: 'Design', link: '/app/design/index', items: [
+							{text: 'Customize', link: '/app/design/customize'}
+						]},
+					{text: 'Product', link: '/app/product/index', items: [
+							{text: 'Edit and Sync', link: '/app/product/edit'}
+						]},
 					{text: 'Order', link: '/app/order'},
-					{text: 'Material', link: '/app/material'},
+					{text: 'Material', link: '/app/material/index'},
 					{text: 'Invoices', link: '/app/invoice'},
 					{text: 'SizeChart', link: '/app/size_chart'},
 					{text: 'Recharge', link: '/app/recharge'},

app/design/customize.md

+# Design - customize
+
+This interface will provide detailed instructions on how to customize and generate local products.
+
+
+## Select the base template you wish to customize
+
+![Customizer for merchant](/assets/design/customize/4.png)
+
+## Load the template customizer interface
+
+![Customizer for merchant](/assets/design/customize/5.png)
+
+## Add image assets to the customization area
+
+![Customizer for merchant](/assets/design/customize/6.png)
+
+## Add text content to the customizable area
+
+![Customizer for merchant](/assets/design/customize/7.png)
+
+## Upload an image and use that image material
+
+![Customizer for merchant](/assets/design/customize/8.png)
+
+![Customizer for merchant](/assets/design/customize/9.png)
+
+## Select the manufacturing process and save the design.
+
+![Customizer for merchant](/assets/design/customize/10.png)
+
+## Close Customizer
+
+![Customizer for merchant](/assets/design/customize/11.png)
+
+
+::: tip
+Awesome!! You've selected a template you like and created your first product. Next, head over to the Products tab to complete your product setup.
+:::
+
+
+
+

app/design/index.md

+# Design - JOCUSTOM
+
+This interface displays a list of all basic templates supported by the application.
+
+
+## View Basic Template Information
+
+![Customizer for merchant](/assets/design/1.png)
+
+## Edit Basic Template Information
+
+![Customizer for merchant](/assets/design/1.png)
+
+
+::: warning
+The basic template information you edit will be automatically populated into products customized using this template in the future.
+:::

app/login.md

+# Log in to JOCUSTOM app
+
+## Shopify 
+
+### Log in to your backend account.
+
+![Customizer for merchant](/assets/login/1.png)
+
+### Click to jump to the app interface.
+
+![Customizer for merchant](/assets/login/3.png)
+
+## Shopline
+
+### Log in to your backend account.
+
+![Customizer for merchant](/assets/login/2.png)
+
+### Click to jump to the app interface.
+
+![Customizer for merchant](/assets/login/3.png)

app/material/index.md

+# Material - JOCUSTOM
+
+This section primarily describes how to manage your own assets, categorize them, and apply tags.
+
+## Add material category
+
+![Customizer for merchant](/assets/material/5.png)
+
+![Customizer for merchant](/assets/material/4.png)
+
+## Add material tag
+
+![Customizer for merchant](/assets/material/3.png)
+
+![Customizer for merchant](/assets/material/2.png)
+
+## Add material
+
+![Customizer for merchant](/assets/material/6.png)
+
+![Customizer for merchant](/assets/material/1.png)
+
+
+::: tip
+You can perform batch operations on assets on the asset list page, such as: Batch set categories and set tags
+:::

app/product/edit.md

+# Product - Edit and Sync
+
+Edit Product Information Interface
+
+## Modify product basic information
+
+![Customizer for merchant](/assets/product/edit/4.png)
+
+![Customizer for merchant](/assets/product/edit/5.png)
+
+::: tip
+1. 修改商品标题
+2. 商品摘要, 进针对shopline
+3. 商品描述
+4. 商品在独立站中上架状态
+5. 商品是否可定制
+6. 商品主图
+7. 商品多媒体文件
+8. 商品标签
+9. 商品默认素材标签
+10. 商品SEO URL 标识
+11. 标准化产品单元 仅针对shopline
+12. 商品售价
+13. 商品原价
+:::
+
+### Shopify
+
+![Customizer for merchant](/assets/product/edit/7.png)
+
+![Customizer for merchant](/assets/product/edit/11.png)
+
+### Shopline
+
+![Customizer for merchant](/assets/product/edit/8.png)
+
+![Customizer for merchant](/assets/product/edit/9.png)
+
+
+## Modify product variant information
+
+![Customizer for merchant](/assets/product/edit/6.png)
+
+### Shopify
+
+![Customizer for merchant](/assets/product/edit/10.png)
+
+### Shopline
+
+![Customizer for merchant](/assets/product/edit/12.png)
+
+::: tip
+列表中展示变体图片, 颜色尺码等属性,以及胚衣价格, 工艺价格,产品重量, SKU标识以及每个变体的售价.
+
+您可以点击上方的颜色或尺码对同一属性的该变体产品进行批量修改
+:::
\ No newline at end of file

app/product/index.md

+# Product - JOCUSTOM
+
+This interface displays the unique personalized product you created in the previous step.
+
+## Product generation in progress
+
+![Customizer for merchant](/assets/product/1.png)
+
+## Product generation successful
+
+![Customizer for merchant](/assets/product/1.png)
+
+## Synchronize Products
+
+![Customizer for merchant](/assets/product/13.png)
+
+::: tip
+当您编辑完成并点击保存后,会返回商品列表界面, 此时,您可以点击同步操作按钮,该产品将会同步至您的店铺
+:::
+
+商品同步到店铺成功后,您可以前往您的店铺前台, 访问该商品, 打开商品详情页, 定制按钮就会出现
+
+### Shopify
+
+![Customizer for merchant](/assets/product/14.png)
+
+![Customizer for merchant](/assets/product/15.png)
+
+### Shopline
+
+![Customizer for merchant](/assets/product/16.png)
+
+![Customizer for merchant](/assets/product/17.png)
+
+_______________
+
+::: warning
+You can edit, synchronize, and delete all products displayed in the product list.
+
+Please exercise caution when performing a deletion operation. Once executed, the item will be permanently removed.
+:::
+
+![Customizer for merchant](/assets/product/3.png)
+
+

introduction.md

@@ -7,22 +7,22 @@ JOCUSTOM is an application that provides customized product manufacturing, wareh
 >JOCUSTOM is a POD app plugin compatible with Shopify and Shopify platforms. It enables you to quickly generate products and sync them to your platform, while allowing customers to customize your products. With drop shipping support, it helps your platform take off.
 
 ## Customized for Merchants
-![Tux, the Linux mascot](/assets/introduction/customizer%20for%20merchant.png)
+![Customizer for merchant](/assets/introduction/customizer%20for%20merchant.png)
 
 ## Customer-Specific Customization
-![Tux, the Linux mascot](/assets/introduction/customizer%20for%20lients.png)
+![Customizer for clients](/assets/introduction/customizer%20for%20lients.png)
 
-![Tux, the Linux mascot](/assets/introduction/customizer%20for%20lients2.png)
+![Customizer for clients](/assets/introduction/customizer%20for%20lients2.png)
 
 ## Factory production
 
-![Tux, the Linux mascot](/assets/introduction/factory1.png)
+![factory](/assets/introduction/factory1.png)
 
-![Tux, the Linux mascot](/assets/introduction/factory2.jpg)
+![factory](/assets/introduction/factory2.jpg)
 
-![Tux, the Linux mascot](/assets/introduction/factory3.jpg)
+![factory](/assets/introduction/factory3.jpg)
 
 ## Express Logistics
 
-![Tux, the Linux mascot](/assets/introduction/express.png)
+![express](/assets/introduction/express.png)
 

shopify.md

-<script setup>
-import { useData } from 'vitepress'
-
-const { page } = useData()
-</script>
-
 # JOCUSTOM - Shopify
 
-------------
-
-### Log in to your Shopify store
-
-### Go to the Shopify App Store
-
-### Search by keyword (JOCSUTOM)
-
-### Install the JOCUSTOM app
-
-
-**Output**
+This interface provides the complete process for installing the JOCUSTOM app on your Shopify store.
 
-::: info
-This is an info box.
-:::
+## Log in to your Shopify store
 
-::: tip
-This is a tip.
-:::
+![Customizer for merchant](/assets/shopify/installation/1.png)
+## Go to the Shopify App Store
 
-::: warning
-This is a warning.
-:::
+![Customizer for merchant](/assets/shopify/installation/2.png)
+## Search by keyword (JOCSUTOM)
 
-::: danger
-This is a dangerous warning.
-:::
+![Customizer for merchant](/assets/shopify/installation/3.png)
+## Install the JOCUSTOM app
 
-::: details
-This is a details block.
-:::
\ No newline at end of file
+![Customizer for merchant](/assets/shopify/installation/4.png)

shopify_conf.md

+# Shopify - Configuration
+
+This interface explains how to configure the JOCUSTOM app for your Shopify store.
+
+## Log in to your backend account and open the skin editor.
+
+![Customizer for merchant](/assets/shopify/configuration/1.png)
+## Switch to the product interface
+
+![Customizer for merchant](/assets/shopify/configuration/2.png)
+## Add an app block above the Add to Cart button
+
+![Customizer for merchant](/assets/shopify/configuration/3.png)
+
+![Customizer for merchant](/assets/shopify/configuration/4.png)
+
+::: warning
+Please ensure the mobile customizer is positioned below the PC customizer.
+:::
+
+## Switch to the shopping cart interface
+
+Add the shopping cart block provided by our application
+
+![Customizer for merchant](/assets/shopify/configuration/8.png)
+
+![Customizer for merchant](/assets/shopify/configuration/9.png)
+
+## Switch to checkout interface
+
+![Customizer for merchant](/assets/shopify/configuration/5.png)
+
+
+## Add the Checkout app extension
+
+![Customizer for merchant](/assets/shopify/configuration/6.png)
+
+![Customizer for merchant](/assets/shopify/configuration/7.png)
+

shopline.md

+# JOCUSTOM - Shopline
+
+This interface provides the complete process for installing the JOCUSTOM app on your Shopline store.
+
+## Log in to your Shopline store
+
+![Customizer for merchant](/assets/shopline/installation/1.png)
+## Go to the Shopline App Store
+
+![Customizer for merchant](/assets/shopline/installation/2.png)
+## Search by keyword (JOCSUTOM)
+
+![Customizer for merchant](/assets/shopline/installation/3.png)
+## Install the JOCUSTOM app
+
+![Customizer for merchant](/assets/shopline/installation/4.png)

shopline_conf.md

+# Shopline - Configuration
+
+This interface explains how to configure the JOCUSTOM app for your Shopline store.
+
+## Log in to your backend account and open the skin editor.
+
+![Customizer for merchant](/assets/shopline/configuration/1.png)
+
+## Switch to the product interface
+
+![Customizer for merchant](/assets/shopify/configuration/2.png)
+
+## Add an app block above the Add to Cart button
+
+![Customizer for merchant](/assets/shopify/configuration/3.png)
+
+![Customizer for merchant](/assets/shopify/configuration/4.png)
+
+::: warning
+Please ensure the mobile customizer is positioned below the PC customizer.
+:::