UUruvakDocs
PricingOpen dashboard
Design your app 7 min

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.

When you finish this page
A clear picture of the app your customers actually use, and an honest list of the five things in it that look finished but are not.

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.

Free shipping on orders over $200
Nordvik Supply
3
Search products, brands…
All
Bags
Outerwear
Home
MEGA SALEUp to 50% off outerwearShop Now
Free Shipping
Secure Payment
24/7 Support
Easy Returns
Shop by category
View all
Bags
Outerwear
Home
Gifts
Home
Shop
Wishlist
Cart
Account
A home screen built from an announcement bar, hero slider, trust badges and category tiles — with the bottom tabs you named.

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 "…".

There is no stock status in the app

Nothing shows whether a product is in stock — no "sold out" badge, no greyed-out card, and the in-stock filter is only a line of grey text reading "Stock filtering comes from your store catalog." If you sell things that run out, hide out-of-stock products in WooCommerce (WooCommerce › Settings › Products › Inventory) so they never reach the app.

The product page#

Cedar Tote
Cedar ToteNatural · Large
4.8(428 reviews)
$48.00$64.00
You save $16
Color
NaturalSelected
BlackAvailable
OliveAvailable
Add to cart
Specifications
Brand—
Model—
Weight—
Warranty—
DescriptionSpecsReviews
The product page. The specifications table below Add to cart is a placeholder — four fixed labels, every value an em dash.

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.
Star ratings are invented when a product has none

A product card with no real reviews still shows stars — a rating between 4.0 and 4.9 and a review count between 40 and 500, generated from the product's ID. The product page falls back to 4.8 stars and 428 reviews. Real ratings appear as soon as a product has real reviews. If invented ratings are a problem for you, turn the reviews off in the block's settings rather than leaving them on.

The cart#

Your cart3 items
Cedar Tote — Natural / Large$ 48
−1+
Fjord Wool Scarf$ 34
−1+
Have a promo code?
Enter codeApply
Subtotal (3 items)$ 130
Delivery feeFree
Total$ 130
Free deliveryArrives in 3–5 business days
Total · 3 items$ 130
Continue to checkout
The cart. The promo-code box is decorative, and the delivery fee is always Free.

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.

Secure checkout
Nordvik SupplyReview your order and pay securely.
ProductTotal
Cedar Tote × 1$48.00
Fjord Wool Scarf × 1$34.00
Subtotal$130.00
Total$130.00
Credit card
Card number
Place order
The second half of checkout: your own store's payment page, opened full screen inside the app.

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.

Test your own checkout before you launch

Two things to check with a real order on your own phone:

Abandoned checkouts leave pending orders. Every shopper who reaches the payment page and backs out leaves a Pending payment order in WooCommerce. That is normal, and the same thing your website does — but app orders can make the list longer than you are used to.

The app decides the payment worked by watching where your store redirects to. It looks for the standard WooCommerce thank-you address. Almost every gateway lands there. If yours sends customers to a custom-named confirmation page, the app will sit on the payment screen and the cart will not clear, even though you have been paid. One test order will tell you.

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#

Account
S
Sara Lindqvistsara@example.com
My Orders
Wishlist
Addresses
Log out
Home
Shop
Wishlist
Cart
Account
The Account tab once a shopper signs in. Wishlist sits between Orders and Addresses and goes nowhere.

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.

Three dead ends to know about

Wishlist does nothing. The tab, the header heart and the hearts on product cards all toggle or navigate, but nothing is ever saved, synced or listed. If you would rather shoppers did not tap it, remove the Wishlist tab in Sections › Footer tabs.

Order cards are not tappable. There is no order-detail screen, no tracking view and no way to pay a failed order again from inside the app. Shoppers who need more detail use the email you already send them.

A signed-out shopper who opens My Orders sees "No orders yet." rather than a prompt to log in. Point customers at the Account tab first.

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 appWhat actually happens
Wishlist tab, header heart, card heartsNothing is saved. The tab opens the Account screen
Promo code box in the cartApply does nothing; coupons cannot be redeemed in the app
Specifications tableFour fixed labels, every value an em dash
Reviews block and the Reviews tabFixed 4.6 / 128 reviews for every product
Star ratings on cardsInvented when a product has no real reviews
Related / frequently bought togetherOrdinary catalog products, unrelated to the one on screen
Newsletter signup blockThe address is never sent anywhere
Shipping costNever added to an app order
Out-of-stock statusNot shown anywhere
Order detail, tracking, re-payNo 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.