What your shoppers see
A screen-by-screen tour of the finished app — home, browsing, product, cart, checkout and account — including the parts that are still placeholders.
You design the app from the outside. This page walks it from the inside — the order a customer meets it in, from tapping the icon to getting a shipping notification. Read it before your first release. A few of these screens behave in ways that will surprise you, and two of them can cost you an order if you do not know about them.
Opening the app#
Tapping your icon shows a loading screen in your own colors: the logo you set under Theme › Loading screen, or a single-letter monogram if you have not set one, with your app name underneath and a spinner. If your theme is dark, it opens dark — there is no white flash.
It is on screen for about a second while fonts load and the app fetches your latest published design. That fetch is why a Live Publish reaches phones in seconds: the app asks for your current design every time it opens, and again whenever a shopper pulls down to refresh the home screen.
If you have switched on the app-open promo popup, it appears over the first screen: a tall image card on a dark backdrop with a round ✕ in its corner. Tapping the image follows the link you gave it; tapping anywhere outside the card closes it.
Home#
Home is whatever blocks you stacked in the Studio, in your order, on top of a fixed header.
The header is always there: your logo or app name, a heart button, a cart button with a live item count, then the search pill and the square button beside it.
Four things here catch merchants out:
- The heart in the header goes to the Account screen, not to a wishlist. So does the Wishlist bottom tab, which every one of the five templates includes by default. See the list at the end of this page.
- The square button next to the search pill opens search, not filters — the same as tapping the pill itself.
- The hero slider stamps "MEGA SALE" on every slide, whatever the slide says. You cannot change or remove that label today. If it does not suit your store, use a banner or image block instead of the hero slider.
- A hero slide with no link opens the search screen when it is tapped, rather than doing nothing.
If you use the deal-of-the-day countdown, set a real end date. Any date more than 99 hours away is quietly replaced by a countdown to tonight's midnight, so the placeholder date the templates ship with makes the timer restart every night.
Browsing, filtering and searching#
Tapping a category tile or a department opens the category screen: the category name, an item count, then a two-column grid of product cards with a Filter chip and a sort chip above it.
The sort sheet offers the options you enabled — Popularity, Rating, Price: low to high, Price: high to low, Newest. The filter sheet holds a price range, a rating filter, an On sale only switch, brands, and any product attributes you exposed, with Clear all and Show results at the bottom. Filters run against your whole catalog on your store, not just the products already loaded, so the counts are real.
Products load 12 at a time as the shopper scrolls, 24 at a time in search. Search waits about a third of a second after the last keystroke, then queries your store; before anything is typed it reads "Search for products by name.", and a miss reads No products match "…".
The product page#
The photo, name, price, sale price and variations are all real, live from your store. Variable products show each attribute as a row of option cards; the first variation is preselected so a price always shows. Add to cart flips to Added ✓ and the cart badge goes up. The cart line is named after the product and the options, like "Cedar Tote — Natural / Large".
Four things on this page are not what they appear to be:
- Only one photo is shown. The gallery displays your main product image with pinch-to-zoom. The rest of your product images and the thumbnail strip are not rendered.
- The specifications table is a placeholder. It always shows Brand, Model, Weight and Warranty, and every value is an em dash. It never reads your product data. The Specs tab likewise says "Specifications coming from your store."
- The reviews block is a placeholder. Wherever it appears it shows the same 4.6 out of 128 reviews and the same bar chart. No review data is fetched from your store.
- Related products are not related. The related-products and frequently-bought-together rows show ordinary products from your catalog. They are not chosen by any relationship to the product being viewed.
The cart#
Each line has a remove button and a −/+ stepper; dropping the quantity to zero removes the line. An empty cart reads "Your cart is empty." with a Start shopping button.
Below the lines are three panels you should look at closely before you launch:
- The promo code box does nothing. "Have a promo code?", the field and the Apply button are all visual. There is no coupon support in the app, and a code typed here is ignored. Your WooCommerce coupons still work on your website; they cannot be redeemed in the app.
- The delivery fee is always "Free", and "Free delivery · Arrives in 3–5 business days" is fixed text. No shipping cost is added to an app order, even when your store charges for shipping on the website. If shipping matters to your margins, build it into your prices before you launch the app.
- The cart total is rounded to whole numbers in the cart and is the item subtotal only. WooCommerce recalculates the order on its side, including tax, so the amount on the payment page can be a few units different from the amount in the cart.
One more: the cart lives on the phone and is not saved. If a shopper force-quits the app, their cart is empty when they come back. A cart started on your website does not appear in the app either, and the reverse.
Checkout#
Checkout is two halves, and the split is deliberate.
First, the details, typed natively in the app. Email, first name, last name and phone, then a delivery address. Which of them are required comes live from your own WooCommerce settings, including your per-country rules, so a store that requires a postcode gets a required postcode. Signed-in shoppers pick from their saved addresses instead of typing, and a newly typed address is saved to their address book for next time. Use same address for billing is ticked by default; unticking it reveals a full billing section. The button reads Continue to payment, with the line "Payment is completed securely on the next step." under it.
Pressing it creates a real order in WooCommerce with the status Pending payment, then hands the shopper to the second half.
Second, the payment, on your own store. The app opens your WooCommerce pay page for that order inside a full-screen view titled "Secure checkout", stripped of your website theme so it looks like part of the app. This is the single most important thing about Uruvak checkout: it is your checkout. Stripe, PayPal, your local gateway, cash on delivery, your fraud rules, your tax setup — everything you already use keeps working, because nothing was reimplemented.
When payment succeeds the app shows a checkmark, "Order confirmed", the order number, the total, and "A confirmation has been sent to your email." The cart is emptied at that moment. Your normal WooCommerce order emails go out exactly as they do for a website order.
If something is refused — a country you do not ship to, a missing required field your store insists on — the shopper gets an alert reading Checkout failed with a number, and nothing more. The reason your store gave is not shown to them. That is another reason to place one real test order per gateway before you launch.
Shoppers do not need an account to buy. Checkout works for guests exactly as it does on your website.
After the order#
Signing in is an email and a password, with "Welcome back" and "Create your account" on one screen. Google sign-in appears below it only if you have set it up and taken a release since — see Google sign-in for shoppers. Sessions survive restarts, so shoppers sign in once.
My Orders lists past orders: the order number, a colored status badge, the item count and date, and the total. The badge is your WooCommerce status, capitalized, so a custom status shows as its raw name.
Addresses is a real address book: tap a card to edit it, set a default, delete with the trash icon, or add a new one. Addresses typed at checkout appear here automatically.
One detail worth knowing before a customer emails you about it: the confirmation screen shows the internal WordPress order ID, while the order history shows your WooCommerce order number. On most stores these are the same number. If you use a plugin that generates sequential or prefixed order numbers, they will not match.
Notifications about their order#
If you have set up push and switched on Order updates, a status change in WooCommerce sends that customer a notification: "Payment confirmed 🎉", "Your order shipped 🚚", "Order complete ✅", and so on, each one opening the app's order list.
Three limits are worth stating plainly: it is off until you turn it on, guests are never notified because there is no account to send to, and drafts and pending orders do not fire anything. Full setup is in Push notifications.
The honest list#
Everything below looks finished in the app and is not. Nothing here is a bug you can work around in the Studio — it is simply not built yet.
| In the app | What actually happens |
|---|---|
| Wishlist tab, header heart, card hearts | Nothing is saved. The tab opens the Account screen |
| Promo code box in the cart | Apply does nothing; coupons cannot be redeemed in the app |
| Specifications table | Four fixed labels, every value an em dash |
| Reviews block and the Reviews tab | Fixed 4.6 / 128 reviews for every product |
| Star ratings on cards | Invented when a product has no real reviews |
| Related / frequently bought together | Ordinary catalog products, unrelated to the one on screen |
| Newsletter signup block | The address is never sent anywhere |
| Shipping cost | Never added to an app order |
| Out-of-stock status | Not shown anywhere |
| Order detail, tracking, re-pay | No screen exists |
One last thing you will meet the first time you publish a design that uses a block your installed app is too old to draw: shoppers see a dark strip reading "A new version of this app is available." and keep the design their app can render. Take a release, and it clears once they update.
When the app looks right, push the design out with Publish live — or, if this is your first time, take the release that unlocks it in Take a release.