自定义区块 & AI
如果它应该出现在您的应用中，您可以构建它。
使用您已在使用的编辑器和 AI 订阅，针对实时 Shopify 数据编写真实的 React Native 区块。无专有 AI，无标记，无锁定。
01import { useCart } from '@evlop/shopify';02import { View, Pressable } from 'react-native';0304export function StorefrontHeader() {05 const cart = useCart();06 return <HeaderShell>07 <PredictiveSearch />08 <AccountButton />09 <CartButton count={cart.lines?.length ?? 0} />10 </HeaderShell>;11}
替换 为StorefrontHeader.tsx
您的编辑器 + 您的 AI
“创建一个带预测搜索、账户登录和实时购物车数量的替换应用页眉。”
使用您现有的订阅 · Evlop 不额外收取 AI 费用 实时预览已连接准备替换应用标题栏iOS + Android
创建。分配。替换。
使用自定义区块。
在 React Native 中创建新的自定义区块。将其添加为一个区块，或分配以替换应用内置的标题栏、侧边菜单、商品卡片、集合卡片或页脚。
插入 为NewArrivalsSection.tsx
放置目标自定义区块已在此屏幕插入新区块
新区块NewArrivalsSection.tsx新建自定义区块 · React Native
创建一个新区块，然后将其放置在任意屏幕上。
将区块构建为可复用的 React Native 组件，连接所需的数据和行为，然后在应用中任意位置插入。
01创建新区块→02将区块添加到屏幕
商品系列Metafields
使用您已连接的 AI 助手创建一个全新的编辑精选新品版块，附带可购物的商品横排。
01import { useProducts } from '@evlop/shopify';02import { View } from 'react-native';0304export function NewArrivalsSection() {05 const products = useProducts({06 query: 'tag:new-arrival'07 });0809 return <EditorialRail products={products} />;10}
您的店铺即运行时
将 Shopify 数据带入任意界面。
自定义区块可以读取实时电商和购物者上下文、调用原生操作，并查询更多 Storefront API 数据。最终呈现的是真正实用的自定义界面——而不只是装饰。
官方安装包@evlop/shopify类型化数据 · 原生操作 · 实时更新
01import {02 useCart, useProducts, useMetaobjects,03 useStorefrontQuery04} from '@evlop/shopify';0506const cart = useCart();07const products = useProducts({ query: 'tag:editorial' });08const customer = useStorefrontQuery(CUSTOMER_QUERY);09const stories = useMetaobjects({ metaobjectType: 'story' });
实时数据
还需要其他功能？查询任意 Storefront API 字段，或连接经批准的外部服务。
自带编辑器和 AI
使用您已经信赖的
将 Custom Blocks 代码工作区连接到您偏好的编辑器，然后使用您已有的 AI 编程助手和订阅。Evlop 不会代理模型、不会按 AI token 计量，也不会将您的区块锁定在单一供应商。
将 Custom Blocks 代码工作区连接到您的团队已经在使用的编辑器。
使用您已有的编程助手和 AI 账户——Evlop 不要求使用其自带的模型。
Evlop 不会对 AI token 进行计量，也不会在您的套餐中增加单独的 AI 使用费。
在不更改自定义区块在 Evlop 中运行方式的前提下，切换编辑器或 AI 提供商。
创建一个包含预测搜索、客户问候和实时购物车计数的替代页眉。
React NativeShopify 数据应用主题
您的 AI 构建→
01import { useCart } from '@evlop/shopify';02import { View, Pressable } from 'react-native';0304export function StorefrontHeader() {05 const cart = useCart();06 return <HeaderShell>07 <PredictiveSearch />08 <CustomerGreeting />09 <CartButton count={cart.lines?.length ?? 0} />10 </HeaderShell>;11}
在您偏好的开发环境中打开 Custom Blocks 工作区。
使用您现有的 AI 编程账号和订阅——Evlop 不额外收取 AI 费用。
在真实设备上结合实时 Shopify 数据审查并完善该区块。
替换内置界面或在屏幕上插入新块。
面向生产而建
无限自由，底层平台
自定义并不意味着脱节。每个块仍然是同一原生应用、商务运行时、设计系统、预览和发布工作流的一部分。
真实的 React Native
自定义块是原生 React 组件——而非网页嵌入——因此布局、交互和性能在 iOS 和 Android 上都如同本地体验。
默认支持 Shopify
使用 Evlop 的 Shopify 包和 Storefront 查询，将产品、集合、购物车、客户上下文、元字段、元对象等带入任何块中。
已连接到您的应用系统
复用应用的颜色、排版、主题、本地化、导航和原生操作，而无需重新构建这些基础。
即时预览并发布
在真实测试设备上运行更改，完善体验，并在无需等待新的应用商店审核的情况下发布。
常见查询
常见问题。
关于构建、驱动、预览和发布自定义区块的实用答案。
构建一个新区块，然后将其添加为章节，或用于替换应用内置的页眉、侧边菜单、产品卡片、集合卡片或页脚。您还可以创建账户体验、购物车界面、营销模块以及其他专用功能。