MobiCart
Product blocks put your products on your Shopify mobile app’s Home page: a Product Grid, a Product Slider that swipes sideways, and an endless Product Feed at the bottom. You add and style them in the MobiCart Builder, with no code. This tutorial covers every setting of the three blocks and what shoppers see on iPhone and Android.
In short: in the Builder, open Home, click Add blocks, pick a product block, choose which products it shows under Products, style its cards under Layout, then Save as Draft, check it with Live preview and Publish.
The three product blocks #
All three show product cards with a photo, the product name and its price. A tap on a card opens the product page. They differ in how the cards are laid out and how many there are.
| Block | What shoppers see | Products | Where |
|---|---|---|---|
| Product Grid | A grid of 1 to 4 columns | Up to 20 (6 by default) | Anywhere on Home, as many as you like |
| Product Slider | One row of cards that swipes sideways | Up to 20 (8 by default) | Anywhere on Home, as many as you like |
| Product Feed | Endless cards that keep loading as shoppers scroll | No limit: 24 at a time | One per Home, always the last block |
A good Home often uses all three: a slider of new arrivals near the top, a grid of best sellers in the middle, and the feed at the bottom so shoppers who keep scrolling never reach a dead end.
Settings at a glance #
| Setting | Product Grid | Product Slider | Product Feed | Default |
|---|---|---|---|---|
| Show (where the products come from) | Yes | Yes | Yes | Best selling (Feed: All products) |
| How many | 1 to 20 | 1 to 20 | No limit | 6 (Grid), 8 (Slider) |
| Sort by, In stock only, price range | For a collection | For a collection | For All products or a collection | Featured, off, no limit |
| Show title and Title | Yes | Yes | Yes | On; “Our products”, “Featured products”, “You may also like” |
| Show View more link | For a collection | For a collection | No | Off |
| Columns / Card size | Columns 1 to 4 | Card size | Columns 2 or 3, or the List layout | 2 / Medium / 2 |
| Spacing, Card style, Corners, Image shape | Yes | Yes | Yes | Medium, Elevated, Medium, Portrait (3:4) |
| Show price, Show sale price and badge | Yes | Yes | Yes | On, on |
| Buy buttons | Yes | Yes | Yes | None |
| Keep at the top while scrolling | No | No | Yes | On for a new feed |
| Let shoppers filter and sort | No | No | Yes | On for a new feed |
Part 1: Set up product blocks in the merchant dashboard #
Step 1: Add a product block to Home #
In your Shopify admin, open the MobiCart app and go to the App Builder, then open the Home page. The panel on the left lists Home’s blocks. Click Add blocks, and the block picker opens with its groups. Under Product blocks you find Product Grid, Product Slider and Product Feed.
Click one to add it. A Grid or a Slider lands at the end of your blocks, or where you clicked a + between two blocks, and you can drag it to another place.
The Product Feed works differently: Home has at most one, and it always stays last. In the list it shows a lock, “Always at the bottom”, and it can’t be dragged. Once Home has a feed, the picker no longer offers it.
Step 2: Choose which products the block shows #
Select the block and look at Products in the settings on the right. The Show menu picks the source:
| Show | Grid and Slider | Feed | What it shows |
|---|---|---|---|
| All products | No | Yes (default) | Your whole catalog in your store’s own order |
| Best selling | Yes (default) | Yes | Your best sellers, as Shopify ranks them |
| Newest | Yes | Yes | Your most recently added products |
| A collection | Yes | Yes | One collection: click Pick collection |
| Products I pick | Yes | No | Products you choose: click Pick products, up to 20 |
For a Grid or a Slider, How many sets the number of products, from 1 to 20. The feed has no limit: it loads 24 products, then the next 24 as shoppers scroll.
When the products come from a collection, three more settings appear (on the feed, they also apply to All products):
- Sort by: Featured (the collection’s own order), Best selling, Newest, Price: low to high, Price: high to low or Name: A to Z.
- In stock only: leave out products that are sold out.
- Minimum price and Maximum price: both start at No limit. If the minimum is above the maximum, the Builder warns you and the app shows the collection without a price range.
A block with no products to show, such as an empty collection, is hidden in the app, so shoppers never see a title over an empty space.
Step 3: Set the title and the View more link #
Under Title, Show title is on by default. Type your own Title or leave it empty for the default: “Our products” on a Grid, “Featured products” on a Slider and “You may also like” on the Feed.
On a Grid or a Slider that shows a collection, you can switch on Show View more link. It sits right-aligned beside the title and opens the whole collection. For any other source the switch is greyed out, with the hint “Pick a collection to add a View more link.”
The link has its own settings:
| Setting | Options | Default |
|---|---|---|
| Link text | Up to 30 characters | Empty: “View more” in the shopper’s language |
| Style | Text link, Underlined text, Outline button, Filled button | Text link |
| Color | Brand color, Accent color, Text color, Custom | Brand color |
| Size | Small, Medium, Large | Small |
| Weight | Regular, Bold | Bold |
| All caps | On or off | Off |
| Icon | None, Arrow, Chevron | Arrow |
| Icon position | After the text, Before the text | After the text |
| Corners (buttons only) | None, Small, Medium, Round | Round |
Step 4: Style the product cards #
Under Layout, choose how the cards look. These settings work the same on all three blocks:
| Setting | Options | Default |
|---|---|---|
| Spacing | Small, Medium, Large | Medium |
| Card style | Elevated (a soft shadow), Outlined (a thin border), Flat (no frame) | Elevated |
| Corners | None, Small, Medium, Large | Medium |
| Image shape | Portrait (3:4), Square | Portrait (3:4) |
| Show price | On or off | On |
| Show sale price and badge | On or off | On |
Each block then has its own size setting:
- Product Grid: Columns, 1 to 4 (2 by default).
- Product Slider: Card size, Small, Medium or Large. Medium fits about two and a half cards across a phone, which shows shoppers there is more to swipe.
- Product Feed: Columns, 2 or 3, or the List layout (Step 6).
With Show sale price and badge on, a product with a compare-at price shows its old price next to the new one and a Sale badge on its photo.
Step 5: Add buy buttons #
Under Buy buttons, Show on each product lets shoppers add to the cart without opening the product page:
- None (default): a tap on the card opens the product page.
- Plus button next to the price: a round + beside the price adds the product to the cart.
- Button under the price: a button row under the price. Switch on Show Buy now to add a Buy now button beside it.
Products with options, such as sizes, open a picker first, so the shopper chooses one. Sold-out products show the button greyed out. On a Grid of 3 or 4 columns the cards are small, so the button row is a single bag button, without Buy now.
Step 6: Set up the Product Feed #
The feed has a few settings of its own.
Keep at the top while scrolling pins the feed’s title, with its Sort and Filter pills, under the header while shoppers scroll the feed. It is on for a feed you add now.
Under Shopper filters, Let shoppers filter and sort adds a Filter pill beside the title, and Show Sort beside Filter adds a Sort pill. Shoppers filter within the products you chose: on a collection, by availability, price and any filters set up in Shopify’s Search & Discovery app; on the other sources, by the options your products have. Two more switches, both on by default:
- Hide options with no products: an option with 0 matching products is left out.
- Tidy tag names: a tag filter shows brand_apple as Apple. What it filters by stays the same.
On a collection feed, Filters shoppers see, in order lists the collection’s filters, so you can choose which ones shoppers see and in what order.
Under Layout, the feed can also switch from Grid to List: one product a row, with the photo on the left and the details on the right. List replaces Columns and Image shape with Row height (Slim or Roomy) and Photo shape (Square or Portrait (3:4)), and adds Row details, all off by default:
| Row detail | What it shows |
|---|---|
| Subtitle | Product type, Variant name, Short description or a Custom field |
| Highlight line | Variant name, Product type or a Custom field, in your accent color, for example “12 stems” |
| Show vendor as a badge | The product’s vendor |
| Badges from tags | One tag per line, up to 5. A row shows 2 at most, in your order |
A custom field is one of your product metafields of type text, number or measurement, with Storefront access turned on in Shopify.
Step 7: Preview and publish #
The phone in the middle of the Builder shows your changes as you make them. Click Save as Draft to keep them: a draft is only visible on your preview device.
To check it on a real phone, click Live preview in the top bar and scan the code with your phone’s camera. It opens your app in MobiCart Preview. When you’re happy, click Publish to push Home live to your customers’ apps. Publishing to your own branded app needs a paid plan: see MobiCart pricing.
Part 2: What shoppers see in the app #
Shoppers see your product blocks on Home, in your theme’s colors, on iPhone and Android alike.
- A tap on a card opens the product page.
- The Product Slider swipes sideways, so a row of products takes little room on the page.
- The View more link opens the whole collection.
- The + button adds the product to the cart at once, and the card shows a tick. A product with options opens a picker first, where the shopper chooses one.
- Button under the price does the same, and Buy now opens checkout for that product alone, leaving the shopper’s cart as it is.
- The heart on a card saves the product to the shopper’s wishlist, while your app’s wishlist is on.
- The Product Feed keeps loading products as shoppers scroll, 24 at a time. With its title pinned, the Sort and Filter pills stay in reach the whole way down.
- Sale prices show the old price struck through and a Sale badge on the photo; in the feed’s List layout, the percentage off.
Recommended setups #
| Store type | Near the top | Middle of Home | Bottom |
|---|---|---|---|
| Fashion and apparel | Slider of Newest, Portrait (3:4) | Grid of a sale collection, Sort by Price: low to high | Feed, 2 columns, filters on |
| Beauty and wellness | Slider of Best selling | Grid of a bundle collection, Square images, + buttons | Feed of All products |
| Electronics and big catalogs | Slider of Products I pick | Grid of a collection with View more | Feed in List layout with a Subtitle and filters |
| Food and flowers | Grid of Best selling, 2 columns, + buttons | Slider of a seasonal collection | Feed in List layout with a Highlight line |
| Small catalog (under 30 products) | Grid of Products I pick | Slider of Newest | Feed of All products, filters off |
Troubleshooting #
| Problem | Cause | Fix |
|---|---|---|
| A product block doesn’t show in the app | Its source has no products, for example an empty collection, or every product is filtered out | Pick another source, or turn off In stock only or widen the price range |
| Show View more link is greyed out | The block doesn’t show a collection | Set Show to A collection and pick one |
| Product Feed is missing from the picker | Home already has a feed | Select the feed at the bottom of the list to edit it |
| “The minimum is above the maximum” | Minimum price is higher than Maximum price | Lower the minimum or raise the maximum |
| The cards have no Buy now button | Buy now needs Button under the price, and a Grid of 3 or 4 columns has no room for it | Use 1 or 2 columns, or a Slider |
| My changes don’t show in the app | They are a draft | Click Publish |
Frequently asked questions #
How do I add products to my Shopify app’s home page? #
Open the MobiCart Builder, go to Home, click Add blocks and pick Product Grid, Product Slider or Product Feed. Then choose the products under Show and publish.
What’s the difference between Product Grid and Product Slider? #
A Grid shows its products in rows and columns that shoppers scroll past. A Slider shows one row that swipes sideways, so it takes less room on Home.
How many products can a Product Grid or Slider show? #
Up to 20 each. You set the number under How many. The Product Feed has no limit: it keeps loading products as shoppers scroll.
Can I show a specific collection? #
Yes. Set Show to A collection, click Pick collection, then choose its sort, In stock only and a price range if you want them.
Can I hand-pick the products? #
Yes, on a Grid or a Slider: set Show to Products I pick and click Pick products. You can pick up to 20.
Why can’t I add a second Product Feed? #
Home has one feed, and it is always the last block, because it keeps loading products and nothing below it would ever be reached.
Can shoppers add to cart from Home? #
Yes. Set Show on each product to Plus button next to the price or Button under the price. Products with options open a picker first.
Do product blocks update when I change products in Shopify? #
Yes. The app reads your products from your Shopify store, so new products, prices and sale prices show without changing the block.
Need a hand? #
Book a free 30-minute demo and we will set up your Home page’s product blocks with you.
