MobiCart
The cart page is the screen in your Shopify mobile app where shoppers review what they picked, change quantities and go to checkout. In the MobiCart Builder you set up the row of recommended products under the cart lines, where those products come from and how they look, with no code. Checkout itself is Shopify’s own checkout.
In short: in the Builder, open the Pages menu and choose Cart, keep Show recommendations on, choose where the products come from under Products, set the Layout, then Save as Draft, check it with Live preview and Publish. The add button’s icon is in App settings.
What the cart page is #
Shoppers open the cart from the Cart tab in your bottom navigation or the cart button in your Home header. The page has three parts:
- The cart lines: each product with its photo, options, line total, a quantity stepper and Remove.
- The recommendations: a row of products that go with what is in the cart, titled You may also like unless you change it.
- Subtotal and Checkout, pinned at the bottom of the screen.
The lines and Checkout are always there. The recommendations are the part you design. There is one cart page for the whole app.
How checkout works #
Checkout is Shopify’s checkout. When a shopper taps Checkout, the app opens your store’s Shopify checkout inside the app, over the cart. If the app can’t open it that way, it opens the same checkout in the in-app browser, so shoppers can always pay.
- Signed-in shoppers are attached to the cart just before checkout opens, so Shopify fills in their email, addresses and saved payment methods. If that step fails, checkout opens as a guest checkout.
- After the order, the app empties the cart and shows “Thanks for your order!” and “You’ll get a confirmation email shortly.”
What the app controls, and what it doesn’t:
| Part | Who controls it |
|---|---|
| Cart lines, quantities, Remove and Undo | The app |
| The recommendations, their source and their look | You, in the MobiCart Builder |
| The add button’s icon | You, in App settings |
| Payment methods, shipping rates, taxes | Your Shopify settings |
| Discount codes | Entered in Shopify’s checkout; the cart screen has no code field |
| How checkout looks and what it asks for | Your Shopify checkout settings |
The cart shows the subtotal with the note “Taxes and shipping are calculated at checkout.”
Settings at a glance #
| Setting | Where | What it does | Default |
|---|---|---|---|
| Show recommendations | Recommendations | Turns the row of suggested products on or off | On |
| Title | Recommendations | The heading over the products, up to 60 characters | Blank: “You may also like”, in the shopper’s language |
| Products come from | Products | Shopify’s complementary products, A collection, or Products I pick | Shopify’s complementary products |
| When Shopify has none | Products (Shopify source only) | Related products, A collection, or Nothing | Related products |
| Most to show | Products | The most products shown, 2 to 10 | 6 |
| Recommendations layout | Layout | Row that swipes, or List | Row that swipes |
| Card style | Layout | Elevated, Outlined or Flat | Your Collection page’s card style |
| Corners | Layout | None, Small, Medium or Large | Your Collection page’s corners |
| Image shape | Layout (row only) | Portrait (3:4) or Square | Portrait (3:4); the list uses square photos |
| Show price | Layout | The price on each product | On |
| Show original price when on sale | Layout | The crossed-out price when a product is on sale | On |
| Cart button icon | App settings (top bar) | Plus, Cart, Bag or Basket on product cards’ add buttons | Not chosen: + on round buttons, a bag on row buttons |
Part 1: Set up the cart page in the merchant dashboard #
Step 1: Open the Cart page #
In your Shopify admin, open the MobiCart app and go to the App Builder. At the top of the left panel, open the Pages menu and choose Cart. The right panel is headed Cart page.
The cart page is one template, not a page of blocks, so there is nothing to add or reorder on the left. The left panel explains what shoppers see. The phone in the middle shows a sample cart made from your store’s products, with the recommendations as your options set them.
A note at the top of the options says: “Apps built before the Cart page could be designed keep their current cart until they are updated.”
Step 2: Turn on recommendations and give them a title #
Under Recommendations, keep Show recommendations on. The app then suggests products that go with what is in the cart. Turned off, shoppers see their cart lines and Checkout only.
The row hides itself when there is nothing to suggest. In the app, it only shows when:
- the cart has at least one product and loaded from Shopify, and
- at least 2 products are left to show once the cart’s own products and sold-out products are taken out.
Title is the heading over the products. Leave it blank and shoppers see “You may also like”, translated into their language. If you write your own, it can be up to 60 characters, and you can translate it for each language your app has.
Step 3: Choose where the products come from #
Under Products, Products come from has three choices:
| Choice | What the app shows | Changes with the cart? |
|---|---|---|
| Shopify’s complementary products | The complementary products you set up in Shopify’s Search & Discovery app, chosen for what is in the cart | Yes |
| A collection | Products from one collection you pick | No |
| Products I pick | Up to 10 products you choose, in your order | No |
Shopify’s complementary products looks at the three products most recently added to the cart. For each one, it uses the complementary products you set up for it in Search & Discovery, and mixes the lists so every product contributes. This source needs nothing more from you in MobiCart.
When Shopify has none decides what to show for a cart product that has no complementary products in Shopify:
- Related products: Shopify’s related products for it. This is the default, so the row works even before you set up any complementary products.
- A collection: products from a collection you pick, used when none of the cart’s products has complementary products. Click Pick collection to choose it. Until you do, the app uses related products.
- Nothing: no suggestions for that product.
A collection: click Pick collection and choose one. The app shows that collection’s products, leaving out the ones already in the cart and the ones sold out. Until you pick one, the Builder shows a warning and the app uses Shopify’s complementary products instead.
Products I pick: click Pick products and choose up to 10. The panel shows how many you picked (“3 of 10 products picked”); use the arrows to change the order and the x to remove one. Pick at least 2: with only one, the app hides the row. With none, the app uses Shopify’s complementary products instead.
Most to show sets the most products in the row, from 2 to 10 (6 by default). Products already in the cart and sold-out products are left out, so shoppers may see fewer.
Step 4: Lay out the products #
Under Layout:
- Recommendations layout: Row that swipes shows product cards side by side that shoppers swipe through. List shows the products one under another, photo on the left and the add button on the right.
- Card style (Elevated, Outlined or Flat) and Corners (None, Small, Medium or Large). Until you change them, the app uses your Collection page’s card style and corners, so the cart matches the rest of your app (see Set up the collection page and filters).
- Image shape: Portrait (3:4) or Square, for the row. The list always uses square photos.
- Show price and Show original price when on sale: the price lines on each product. The second appears only while Show price is on.
Step 5: The buy button and its icon #
Each recommended product has a round add button. A tap adds the product to the cart, and it leaves the row at once. A product with options, such as sizes, opens its product page first so the shopper can choose. There is no Buy now button in the cart.
The icon on that button is an app-wide setting. In the Builder’s top bar, click App settings and choose one of the tiles under Cart button icon: Plus, Cart, Bag or Basket. It is drawn on product cards’ round add button and in their Add to cart buttons, everywhere in the app, including the cart’s recommendations.
Until you choose one, round buttons show + and row buttons show a bag. App settings save right away and reach phones on their next sync; they don’t need Publish.
Step 6: Save, preview and publish #
- Save as Draft keeps your changes. Only your preview device sees them.
- Live preview shows a QR code. Scan it with your phone’s camera to open your app in MobiCart Preview and try the cart with real products.
- Publish sends the cart page to your customers’ apps.
More on drafts and previews: Preview and publish your app.
Part 2: What shoppers see in the app #
On iPhone and Android, the cart works the same way:
- Quantities: the − and + change a line’s quantity. The line shows a spinner until Shopify confirms, and the other lines stay usable. If Shopify refuses a change, for example because a product sold out, the app shows Shopify’s reason.
- Remove and Undo: Remove takes a line out and leaves “Removed (product).” with Undo in its place. Undo puts the same option back at the same quantity, at the end of the cart.
- Bundles: a bundle line lists the products inside it.
- Recommendations: under the lines, as you set them up. Products already in the cart, products the shopper just removed, and sold-out products are left out. If the cart’s products change, the suggestions follow after a short pause.
- Subtotal and Checkout stay pinned at the bottom, with “Taxes and shipping are calculated at checkout.”
- Empty cart: “Your cart is empty” with Keep shopping. If the cart can’t load, “Can’t load your cart” asks shoppers to check their connection.
Recommended setups #
| Store type | Products come from | When Shopify has none | Layout |
|---|---|---|---|
| Fashion and accessories | Shopify’s complementary products (set up outfits in Search & Discovery) | Related products | Row that swipes, Portrait (3:4) |
| Beauty and skincare | Shopify’s complementary products | A collection of best sellers or minis | Row that swipes, Square |
| Food and coffee | A collection of add-ons (filters, snacks, gift cards) | (not used) | List |
| Small catalogs | Products I pick, 4 to 6 products | (not used) | Row that swipes |
| Big catalogs | Shopify’s complementary products | Related products | Row that swipes, Most to show 8 |
Troubleshooting #
| Problem | Cause | Fix |
|---|---|---|
| No recommendations in the app | Fewer than 2 products are left once the cart’s products and sold-out products are taken out | Raise Most to show, add complementary products in Search & Discovery, or pick a fuller collection |
| No recommendations, and the source is Products I pick | Only one product is picked | Pick at least 2 |
| The row shows related products, not the ones I chose | No complementary products are set up in Shopify for the cart’s products | Set them up in Search & Discovery, or choose Nothing or A collection under When Shopify has none |
| I chose A collection but see other products | No collection is picked yet | Click Pick collection |
| The cards don’t match my Collection page | Card style or Corners was changed here | Set them to match, or leave both as they were |
| The add button opens a product page | The product has options, such as sizes | Expected: the shopper picks the option there |
| My changes don’t show in the app | They are a draft | Click Publish |
| The cart looks the old way | The app was built before the cart page could be designed | It updates with the next app update |
Frequently asked questions #
Does MobiCart have its own checkout? #
No. The app opens your store’s Shopify checkout inside the app. Payments, shipping, taxes and discount codes all work as they do in your Shopify store.
Can I change the checkout page in MobiCart? #
No. The cart page is yours to design in MobiCart; the checkout follows your Shopify checkout settings.
Where do complementary products come from? #
From Shopify’s Search & Discovery app, where you choose which products go with each product. MobiCart reads them; you don’t set them up twice.
What if I haven’t set up complementary products? #
The row still works. With When Shopify has none on Related products (the default), the app shows Shopify’s related products instead.
Can I turn recommendations off? #
Yes. Switch off Show recommendations. Shoppers then see their cart lines and Checkout only.
Do signed-in shoppers have to type their details again? #
No. Just before checkout opens, the app attaches the signed-in shopper to the cart, so Shopify fills in their email, addresses and saved payment methods.
Does the cart button icon need publishing? #
No. App settings save right away and reach phones on their next sync.
Need a hand? #
Book a free 30-minute demo and we will set up your cart page with you.
