diff --git a/packages/samples/shop-i18n/README.md b/packages/samples/shop-i18n/README.md
index 9a6d6b7d5..a087400d4 100644
--- a/packages/samples/shop-i18n/README.md
+++ b/packages/samples/shop-i18n/README.md
@@ -1,15 +1,15 @@
-# Modeling for simple shop scenario
+# I18n for simple shop scenario
 
 ## Register
 
 ```ts
-yarn pm add sample-shop-modeling
+yarn pm add sample-shop-i18n
 ```
 
 ## Activate
 
 ```bash
-yarn pm enable sample-shop-modeling
+yarn pm enable sample-shop-i18n
 ```
 
 ## Launch the app
diff --git a/packages/samples/shop-i18n/src/client/index.tsx b/packages/samples/shop-i18n/src/client/index.tsx
index e7f1fdaca..ca835122b 100644
--- a/packages/samples/shop-i18n/src/client/index.tsx
+++ b/packages/samples/shop-i18n/src/client/index.tsx
@@ -1,10 +1,15 @@
-
-import React from 'react';
-import { Select } from 'antd';
-import { i18n } from '@nocobase/client';
+import React, { useContext } from 'react';
+import { useHistory } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
+import { Select } from 'antd';
+import { ShopOutlined } from '@ant-design/icons';
+import { i18n, PluginManager, PluginManagerContext, RouteSwitchContext, SettingsCenterProvider } from '@nocobase/client';
 
-i18n.addResources('zh-CN', '@nocobase/plugin-sample-shop-i18n', {
+const ns = '@nocobase/plugin-sample-shop-i18n';
+
+i18n.addResources('zh-CN', ns, {
+  Shop: '店铺',
+  I18n: '国际化',
   Pending: '已下单',
   Paid: '已支付',
   Delivered: '已发货',
@@ -20,7 +25,7 @@ const ORDER_STATUS_LIST = [
 ]
 
 function OrderStatusSelect() {
-  const { t } = useTranslation('@nocobase/plugin-sample-shop-i18n');
+  const { t } = useTranslation(ns);
 
   return (
     <Select style={{ minWidth: '8em' }}>
@@ -31,6 +36,52 @@ function OrderStatusSelect() {
   );
 }
 
+export const ShopShortcut = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  return (
+    <PluginManager.Toolbar.Item
+      key="workflow"
+      icon={<ShopOutlined />}
+      title={t('Workflow')}
+      onClick={() => {
+        history.push('/admin/settings/workflow/workflows');
+      }}
+    />
+  );
+};
+
 export default React.memo((props) => {
-  return <OrderStatusSelect />;
+  const ctx = useContext(PluginManagerContext);
+  const { routes, components, ...others } = useContext(RouteSwitchContext);
+
+  return (
+    <SettingsCenterProvider
+      settings={{
+        workflow: {
+          icon: 'ShopOutlined',
+          title: `{{t("Shop", { ns: "${ns}" })}}`,
+          tabs: {
+            workflows: {
+              title: `{{t("I18n", { ns: "${ns}" })}}`,
+              component: OrderStatusSelect,
+            },
+          },
+        },
+      }}
+    >
+      <PluginManagerContext.Provider
+        value={{
+          components: {
+            ...ctx?.components,
+            ShopShortcut,
+          },
+        }}
+      >
+        <RouteSwitchContext.Provider value={{ components: { ...components }, ...others, routes }}>
+          {props.children}
+        </RouteSwitchContext.Provider>
+      </PluginManagerContext.Provider>
+    </SettingsCenterProvider>
+  );
 });