React Native, without limits
Build any part of your app with Custom Blocks & AI.
Create new React Native blocks for the UI and functionality your brand needs. Connect the code workspace to your preferred editor, use the AI subscription you already have, and ship against live Shopify data—without a proprietary AI API, extra AI charges from Evlop, or provider lock-in.
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}
REPLACE WITHStorefrontHeader.tsx
Your editor + your AI
“Create a replacement app header with predictive search, account access, and live cart count.”
Use your existing subscription · No extra AI charge from Evlop Live preview connectedReady to replace app headeriOS + Android
Create. Assign. Replace.
If it belongs in your app, you can build it.
Create a new Custom Block in React Native. Add it as a section, or assign it to replace the app’s built-in header, side menu, product card, collection card, or footer.
INSERT WITHNewArrivalsSection.tsx
Placement targetCustom sectionNew block inserted on this screen
New section blockNewArrivalsSection.tsxNew Custom Block · React Native
Create a new section block, then place it on any screen.
Build the section as its own reusable React Native block, connect the data and behavior it needs, then insert it wherever it belongs in your app.
01Create new block→02Add block to a screen
ProductsCollectionMetafields
Use your connected AI assistantCreate a new editorial arrivals section with a shoppable product rail.
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}
Your store is the runtime
Bring Shopify data into any interface.
Custom Blocks can read live commerce and shopper context, call native actions, and query additional Storefront API data. The result is custom UI that is useful—not just decorative.
OFFICIAL PACKAGE@evlop/shopifyTyped data · Native actions · Live updates
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' });
LIVE DATA
Need something else?Query any Storefront API field or connect an approved external service.
Bring your own editor and AI
Use the AI workflow you already trust.
Connect the Custom Blocks code workspace to your preferred editor, then use the AI coding assistant and subscription you already have. Evlop does not proxy the model, meter AI tokens, or lock your blocks to one provider.
Connect the Custom Blocks code workspace to the editor where your team already works.
Use the coding assistant and AI account you already have—Evlop does not require its own model.
Evlop does not meter AI tokens or add a separate AI usage charge to your plan.
Switch editors or AI providers without changing how your Custom Blocks run in Evlop.
Create a replacement header with predictive search, customer greeting, and live cart count.
React NativeShopify dataApp theme
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}
Open the Custom Blocks workspace in the development environment you prefer.
Work with your existing AI coding account and subscription—no extra AI bill from Evlop.
Review and refine the block against live Shopify data on a real device.
Replace a built-in surface or insert the new block on a screen.
Built for production
Unlimited freedom, with the platform underneath.
Custom does not mean disconnected. Every block remains part of the same native app, commerce runtime, design system, preview, and publishing workflow.
Real React Native
Custom Blocks are native React components—not web embeds—so layout, interactions, and performance feel at home on iOS and Android.
Shopify-aware by default
Use Evlop’s Shopify package and Storefront queries to bring products, collections, cart, customer context, metafields, metaobjects, and more into any block.
Connected to your app system
Reuse the app’s colors, typography, themes, localization, navigation, and native actions instead of rebuilding those foundations.
Preview and publish instantly
Run changes on a real test device, refine the experience, and publish without waiting for a new app-store review.
Common queries
Frequently asked questions.
Practical answers about building, powering, previewing, and publishing Custom Blocks.
Build a new block, then add it as a section or assign it to replace the app’s built-in header, side menu, product card, collection card, or footer. You can also create account experiences, cart interfaces, campaign modules, and other purpose-built functionality.