Mobile apps
Online store app example for a small homewares shop
A small shop's best customers buy again, and an app on their home screen brings them back without an ad. This example for an invented Fremantle homewares store shows new products on the home screen, the full shop by collection, a cart priced by the server and the shop's hours.
The app, screen by screen
Each screen as the app renders it on a 390 pixel phone. Scroll inside a phone to read the whole screen.
Screen by screen
- Home /
- Photo, headline and Shop now, New in, four products from the store
- Shop /shop
- Delivery note, Living and Kitchen collections, two column product cards with Add to cart
- Cart /cart
- Cart lines with quantity buttons, Subtotal from the server, Check out
- Visit /visit
- Shop address, hours and delivery, Returns note
How it is built
An Expo app from a Code mode site with its store switched on: four tabs, a hook that groups the catalog into the shop's collections, a product card component, a hook that prices the cart through the store's quote, and a cart line with quantity buttons. A badge on the Cart tab shows the item count on every screen.
Launching it
Preview the web export in the app builder, then download the project. You build and submit it yourself with EAS on your own Expo, Apple and Google accounts: Apple charges 99 USD a year and Google 25 USD once, and a new personal Google account must test with at least 12 people for 14 days. Shopping with a cart and checkout counts as real app functionality for the stores, unlike an app that only opens the website.
What makes this app work
The same catalog as the shop
Products, prices and compare-at prices come from the store, so the candle on sale shows its old price struck through in the app exactly as on the website. Stock and prices are managed once, in the store admin.
Two column cards sized for a thumb
Product cards sit two to a row with a square photo, the price and a full width Add to cart button. It is the layout shoppers know from every retail app, and it fits six products in two screens.
Delivery terms before the cart
Free delivery over $120 sits above the products and above the cart total. Shipping is the most common reason a cart is abandoned, so the rule is stated before it can surprise anyone.
Questions people ask
How do I turn my online store into an app?
There are two ways. For a section built store, Settings has an app export that wraps the published site in a Capacitor project, for 2 credits. For a native app like this one, the store runs on a Code mode site and the AI writes an Expo app that reads its catalog.
Does the app use the same products as my website?
Yes. The app reads the store's catalog, so products, prices, photos and stock are managed once in the store admin. A new product or a price change shows in the app after the next catalog update, without rebuilding or resubmitting the app.
How does checkout work in the app?
The cart is priced by the server, and checking out opens Stripe Checkout on your connected account in an in-app browser, then returns with the result. A paid order clears the cart and appears in the store admin like a website order.
Can I send shoppers push notifications about sales?
Push notifications need your own Expo project and are set up after you export the app. The generated app does not include marketing pushes. The OneCraft admin app can push new orders to the owner's phone, which is a separate thing.
What do Apple and Google require?
Both need your own developer account: Apple at 99 USD a year, Google at 25 USD once, with identity checks and, for new personal Google accounts, a 12 tester test for 14 days. Apple asks builder made apps to be submitted by the business itself.
Build your own in about a minute
The button below opens the generator with this use case already described. Change the wording to match your own, generate, then edit anything you like.
Make one like thisOther app examples
Salon booking app example with services and booking requests
A salon's regulars rebook every six weeks, and an app on their phone makes that a one minute job. This example for an invented Subiaco salon has four tabs: a home screen with the most booked services, the full price list, a booking request form and the studio details.
Yoga studio app example with a live timetable
Students check a studio's timetable more than anything else, often in the morning before class. This example for an invented Bulimba studio reads the week's classes from a collection the owner edits, groups them by day with the time, teacher and level, and takes booking requests.
Restaurant ordering app example for pickup orders
A pickup ordering app pays for itself when regulars reorder from their phone instead of a delivery platform. This example for an invented Leichhardt pasta bar reads its menu from the restaurant's store, adds dishes to an order priced by the server, and shows where to collect.
For everything this generator can do, see the website maker.
Written and checked by the OneCraft team. Last checked .