Custom Blocks & 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화면에 블록 추가
상품컬렉션메타필드
연결된 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 데이터를 조회할 수 있습니다. 그 결과 단순히 장식이 아닌, 실제로 유용한 커스텀 UI가 완성됩니다.
공식 패키지@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를 사용하세요
이미 신뢰하는 AI 워크플로우를 그대로 사용하세요.
Custom Blocks 코드 작업 공간을 선호하는 에디터에 연결한 후, 이미 사용 중인 AI 코딩 어시스턴트와 구독을 활용하세요. Evlop은 모델을 프록시하거나 AI 토큰을 측정하거나 블록을 특정 공급업체에 종속시키지 않습니다.
Custom Blocks 코드 작업 공간을 팀이 이미 사용 중인 에디터에 연결하세요.
이미 보유한 코딩 어시스턴트와 AI 계정을 그대로 사용하세요. Evlop은 자체 모델을 요구하지 않습니다.
Evlop는 AI 토큰 사용량을 측정하거나 요금제에 별도의 AI 사용료를 추가하지 않습니다.
Custom Blocks의 작동 방식을 변경하지 않고도 에디터나 AI 공급업체를 자유롭게 전환하세요.
예측 검색, 고객 인사말, 실시간 장바구니 수량이 포함된 대체 헤더를 만들어 보세요.
React NativeShopify 데이터앱 테마
YOUR AI BUILDS→
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
Custom Blocks는 웹 임베드가 아닌 네이티브 React 컴포넌트입니다. 레이아웃, 인터랙션, 성능이 iOS와 Android에서 자연스럽게 느껴집니다.
Shopify 연동 기본 지원
Evlop의 Shopify 패키지와 Storefront 쿼리를 사용하여 상품, 컬렉션, 장바구니, 고객 컨텍스트, 메타필드, 메타오브젝트 등을 어떤 블록에도 가져올 수 있습니다.
앱 시스템과 연동
앱의 색상, 타이포그래피, 테마, 현지화, 내비게이션, 네이티브 액션을 그대로 재사용하세요. 기반을 다시 만들 필요가 없습니다.
즉시 미리보기 및 출시
실제 테스트 기기에서 변경 사항을 실행하고 경험을 다듬은 뒤, 새로운 앱스토어 심사를 기다리지 않고 바로 출출시하세요.
자주 묻는 질문
자주 묻는 질문입니다.
Custom Blocks를 만들고, 연동하고, 미리보고, 출시하는 방법에 대한 실용적인 답변입니다.
새 블록을 만든 후 섹션으로 추가하거나, 앱의 기본 헤더, 사이드 메뉴, 상품 카드, 컬렉션 카드, 푸터를 대체하도록 지정할 수 있습니다. 또한 계정 경험, 장바구니 인터페이스, 캠페인 모듈 등 목적에 맞는 기능도 만들 수 있습니다.