MobiCart
The product page in your Shopify mobile app is the screen a shopper sees after tapping a product, and in MobiCart you design it in the Builder with no code: pick one of five templates, then choose what it shows. One design applies to every product in your store.
In short: in the Builder, open Product from the page list, pick a template under Templates, set its options on the right, set Products open as and the wishlist in App settings, then Save as Draft, check it with Live preview and Publish.
What the product page is, and why it matters #
The product page is where a shopper picks a size or color, reads the details and taps Add to cart. Everything else in your app leads here, from product blocks on Home to collections and search, so its layout decides how easy it is to buy.
MobiCart builds the page from your Shopify product data: photos, variants, prices, sale prices, stock and description. You choose how that data is laid out and which extras show. You don’t design each product one by one.
The five templates #
Each template is a complete layout. Your options carry over when you switch, so you can try each one.
| Template | What shoppers see | Good for |
|---|---|---|
| Classic | Photos in a row that swipes, with everything stacked underneath | Any store; the most options to adjust |
| Immersive | A tall edge-to-edge photo, details in a card over it, and Add to cart pinned at the bottom | Fashion and lifestyle with strong photos |
| Compact | A small photo beside the title and price, options as dropdowns, and the description folded away | Big catalogs, spare parts, products with many options |
| Showcase | The photo fills the page behind the header, with color dots on it, details in a card and a big buy button | Single hero products, products with color swatches |
| Boutique | A rounded photo card with a badge, options as photo tiles, and a floating price button | Gifts, beauty, products with a photo per variant |
The template descriptions above are the Builder’s own words.
Settings at a glance #
| Section | Setting | Options | Default |
|---|---|---|---|
| Layout | Photo shape (Classic, Boutique) | Square, Portrait (4:5), Landscape (16:10; Classic only) | Square on Classic, Portrait on Boutique |
| Layout | Photo badge (Boutique) | Discount, when on sale; The first tag; None | Discount, when on sale |
| Layout | Photo fit (Classic, Immersive, Showcase) | Fill the frame, Show the whole photo | Fill the frame; Show the whole photo on Showcase |
| Layout | Title size (Classic) | Small, Medium, Large | Medium |
| Layout | Chosen option (all but Compact) | Outlined, Filled | Outlined on Classic, Filled on the others |
| Layout | Corners | None, Small, Medium, Large | Medium |
| Layout | Show the chosen variant’s photo first | On or off | On |
| Product details | Show brand | On or off | Off |
| Product details | Show product type and tags | On or off | Off |
| Product details | Show original price when on sale, then Show sale badge | On or off | On, on |
| Product details | Show unit price | On or off | On |
| Product details | Show back-order note | On or off | On |
| Product details | Show in-store pickup | On or off | Off |
| Product details | Show description heading and Description heading (Classic) | On or off; text | On; “Description” |
| Buying | Button text | Text | “Add to cart” |
| Buying | Button style (Classic) | Filled, Outlined | Filled |
| Buying | Show the price on the button (Showcase) | On or off | On |
| Buying | Show quantity picker | On or off | Off; on for Showcase |
| More on the page | Show related products and Related products title | On or off; text | On; “You may also like” |
| More on the page | Show shipping and returns | On or off | Off |
| Reviews | Show reviews | On or off | On (drawn once Judge.me is connected) |
| Reviews | Show rating under the title, Reviews title, Style, Reviews shown | On or off; text; Cards or List; 3 to 10 | On; “Reviews”; Cards; 5 |
| Reviews | Let shoppers write a review | On or off | On |
| App settings | Products open as | Full page, Bottom sheet | Full page |
| App settings | Let shoppers save products, Wishlist icon | On or off; Heart or Bookmark | On; Heart |
Part 1: Design the product page in the merchant dashboard #
Step 1: Open the Product page #
In your Shopify admin, open the MobiCart app and go to the App Builder. At the top of the left sidebar, open the page list and choose Product.
The left panel now shows Templates, with the line “Pick a layout for every product. Its options are on the right.” The product page is one layout for every product, so unlike Home there are no blocks to add or reorder. The phone in the middle shows a sample product in your theme’s colors.
Step 2: Pick a template #
Click a template card to use it: Classic, Immersive, Compact, Showcase or Boutique. Each card has a small sketch of its layout. The phone preview changes at once.
At the top of the settings on the right, the Builder names the template you’re on and reminds you: “Change it under Templates on the left; your options carry over.” Settings that only one template uses stay saved when you switch away and come back.
Step 3: Set the layout #
The Layout section changes with the template, so you only see options that apply:
- Photo shape: on Classic, Square, Portrait (4:5) or Landscape (16:10). On Boutique, Portrait (4:5) or Square.
- Photo badge (Boutique): the badge on the photo shows the discount when the product is on sale, the product’s first tag, or nothing.
- Photo fit (Classic, Immersive, Showcase): Fill the frame crops the photo to the shape; Show the whole photo fits it inside. Use the second for products shot on white, like shoes or electronics.
- Title size (Classic): Small, Medium or Large.
- Chosen option: how a selected size or color looks, Outlined or Filled. Compact has no such option, because it shows options as dropdowns.
- Corners: None, Small, Medium or Large: how round the corners on the page are.
- Show the chosen variant’s photo first: when a shopper picks a variant that has its own photo in Shopify, that photo moves to the front.
Step 4: Choose the product details #
Under Product details, decide what sits around the title and price:
- Show brand: the product’s vendor from Shopify, above the title.
- Show product type and tags.
- Show original price when on sale: the compare-at price, struck through. With it on, Show sale badge adds a sale badge.
- Show unit price: for products sold by measure, like “$4.80 / 100 g”.
- Show back-order note: for variants that are out of stock but can still be ordered. Shoppers see “Ships when back in stock”.
- Show in-store pickup: needs Local pickup set up in Shopify. Shoppers see where pickup is available.
- Show description heading and Description heading (Classic only): the heading above the description, “Description” by default.
Step 5: Set up buying and the extras #
Under Buying:
- Button text: “Add to cart” by default. Keep it short, like “Add to bag”.
- Button style (Classic): Filled or Outlined.
- Show the price on the button (Showcase): the buy button carries the price.
- Show quantity picker: follows the minimum, maximum and step set on each variant in Shopify. It is on by default only on Showcase.
Under More on the page:
- Show related products: products related to this one, from Shopify, under the title you set in Related products title (“You may also like” by default).
- Show shipping and returns: your store’s shipping and refund policies, as rows that open.
Step 6: Add reviews #
Reviews come from Judge.me. Until it’s connected, the Builder shows a notice: the phone preview shows sample reviews and the app hides this section. Click Connect Judge.me in that notice to set it up.
With Show reviews on, you can:
- Show rating under the title: stars, the average and the number of reviews.
- Set the Reviews title (“Reviews” by default).
- Pick a Style: Cards or List.
- Choose Reviews shown: 3 to 10 (5 by default). The rest open with Show more.
- Let shoppers write a review: adds a Write a review button that opens a review form. New reviews wait for your approval in Judge.me.
Step 7: Set how products open, and the wishlist #
Two options that change the product page live in App settings in the Builder’s top bar, because they apply to the whole app:
- Products open as: Full page (the default) or Bottom sheet. It applies when a shopper taps a product anywhere in the app. A bottom sheet slides up over the screen the shopper is on, so they can swipe it away and carry on browsing.
- Let shoppers save products: adds a wishlist button to product cards and product pages, and a Wishlist row to the Account screen. It is on by default. Pick the Wishlist icon, Heart or Bookmark, and the Wishlist layout of the saved list.
App settings save right away and need no publish.
Step 8: Save, preview and publish #
Click Save as Draft to keep your product page changes: a draft is only visible on your preview device. To check it on a real phone, click Live preview and scan the code with your phone’s camera; it opens your app in MobiCart Preview (see Preview and publish your app). Open a few real products, with and without sale prices.
When you’re happy, click Publish to push the product page live to your customers’ apps. Which stores your app publishes to, and how many orders and pushes it includes, depends on your plan: see MobiCart pricing.
Part 2: What shoppers see in the app #
On iPhone and Android, the product page uses your theme’s colors and the template you picked.
- Photos: swipe through them; with Show the chosen variant’s photo first on, picking a color shows that variant’s photo.
- Options: chips, photo tiles (Boutique) or dropdowns (Compact). Options that are sold out show as unavailable.
- Add to cart adds the chosen variant and the quantity, and the button confirms with “Added to cart”. On Immersive, Showcase and Boutique the button stays pinned at the bottom.
- The wishlist button (heart or bookmark) saves the product. The icon fills at once, and the product shows in the Wishlist on the Account screen.
- The rating sits under the title, and reviews further down, with Show more and Write a review.
- Related products and Shipping and Returns rows keep shoppers on the page without leaving to search.
- As a bottom sheet, the product opens over Home or a collection, and swiping it down returns the shopper to the same place.
Recommended setups #
| Store type | Template | Options worth turning on |
|---|---|---|
| Fashion and apparel | Immersive or Classic, Portrait (4:5) | Show the chosen variant’s photo first, Show sale badge, related products |
| Beauty and wellness | Boutique | Photo badge: Discount, when on sale; reviews with the rating under the title |
| Electronics and parts | Compact or Classic with Show the whole photo | Show brand, Show product type and tags, Show shipping and returns |
| Food and groceries | Classic, Square | Show unit price, Show quantity picker, Show in-store pickup |
| One hero product or few products | Showcase | Show the price on the button, reviews as Cards |
Troubleshooting #
| Problem | Cause | Fix |
|---|---|---|
| Reviews don’t show in the app | Judge.me isn’t connected | Click Connect Judge.me in the Reviews section, then publish |
| Photo shape or Title size is missing | Those options belong to other templates | Switch to Classic (or Boutique for Photo shape) |
| Show sale badge is missing | Show original price when on sale is off | Turn it on |
| In-store pickup never shows | Local pickup isn’t set up in Shopify | Set up Local pickup for a location in Shopify |
| The quantity picker jumps by more than 1 | The variant has a quantity step in Shopify | Change the variant’s quantity rule in Shopify |
| My changes don’t show in the app | They are a draft | Click Publish |
| Products still open as a full page | Products open as is set to Full page | Change it in App settings; it saves right away |
Frequently asked questions #
Can I have a different layout for each product? #
No. The product page is one template for every product in your store. Each product fills it with its own photos, options and description from Shopify.
Which product page template should I choose? #
Start with the photos you have. Tall, high-quality photos suit Immersive or Showcase; many options or a big catalog suit Compact; a photo for each variant suits Boutique. Classic works for any store and has the most options.
Do I lose my settings if I switch templates? #
No. Your options carry over, and settings that only one template uses stay saved for when you switch back.
Where do product reviews come from? #
From Judge.me. Once it’s connected, the app shows the product’s reviews and rating, and shoppers can write a review that waits for your approval in Judge.me.
Can products open in a bottom sheet instead of a new page? #
Yes. In App settings, set Products open as to Bottom sheet. It applies everywhere in the app and saves right away.
How do I add a wishlist to my Shopify app? #
The wishlist is on by default. In App settings, Let shoppers save products controls it, and you can pick a heart or a bookmark icon.
Can I change the Add to cart text? #
Yes. Change Button text under Buying, for example to “Add to bag”.
Does the product page update when I change a product in Shopify? #
Yes. The app reads your products from Shopify, so new photos, prices, stock and descriptions show without changing the design.
Need a hand? #
Book a free 30-minute demo and we will design your product page with you.
