MobiCart
A Collection Slider and Category Chips put your Shopify collections on the Home page of your mobile app, so shoppers can jump into a category with one tap. Both are no-code blocks in the MobiCart App Builder. This guide covers every setting, what shoppers see on iPhone and Android, and when to use each one instead of the Category Browser.
In short: in the App Builder, open your Home page, click Add blocks, pick Collection Slider or Category Chips under Collection blocks, choose your collections, set the layout, then Save as Draft, check it with Live preview, and Publish.
What the two blocks are #
Both blocks show collections from your Shopify store, with each collection’s own image and name. They differ in size and job:
- Collection Slider: cards for the collections you pick, with their images and names, in a row that swipes sideways. It has a title above it (“Shop by collection” by default).
- Category Chips: small round collection images with their names, for quick browsing near the top of the page. No title, just the row.
A tap on a card or a chip opens that collection in the app. You can add each block more than once and move it anywhere on Home.
Collection Slider, Category Chips or Category Browser? #
MobiCart has three ways to show collections on Home. Pick by how many collections you have and what you want shoppers to do.
| Collection Slider | Category Chips | Category Browser | |
|---|---|---|---|
| Best for | Showing off a few collections with big images: new arrivals, a seasonal edit, gift guides | A handful of quick shortcuts near the top of Home | Big catalogs with collections inside collections |
| Where the collections come from | Collections you pick (up to 12), or your store’s first 6 | Collections you pick (up to 12), or your store’s first 8 | Your store’s menu (the one you build in Shopify) |
| Looks | Image cards in a swiping row, with a title | Small circles or rounded squares with names | A chip row with a pinned All button |
| Extras | Name below or on the image | Chips share the row when they fit | An All sheet with search and subcategories |
| Guide | This page | This page | Category Browser guide |
A simple rule: up to about a dozen collections you want to feature, use a Collection Slider or Category Chips. A menu of categories and subcategories that shoppers should be able to search, use the Category Browser.
The two blocks at a glance #
| Block | Setting | Options | Default |
|---|---|---|---|
| Both | Show my store’s collections | On or off | Off (you pick) |
| Both | Pick collections | Up to 12 collections from your store | None picked |
| Collection Slider | Show title / Title | On or off / your own text | On / “Shop by collection” |
| Collection Slider | Card size | Small, Medium, Large | Medium |
| Collection Slider | Image shape | Square, Portrait (3:4), Landscape (4:3) | Square |
| Collection Slider | Collection name | Below the image, On the image | Below the image |
| Collection Slider | Spacing | Small, Medium, Large | Medium |
| Collection Slider | Corners | None, Small, Medium, Large | Medium |
| Category Chips | Image shape | Circle, Rounded square | Circle |
| Category Chips | Size | Small, Medium, Large | Medium |
| Category Chips | Show collection names | On or off | On |
Part 1: Set up the blocks in the merchant dashboard #
Step 1: Add a Collection Slider #
In your Shopify admin, open the MobiCart app and go to the App Builder. With the Home page open, click Add blocks in the left panel. Under Collection blocks, click Collection Slider.
The block is added to your page, the phone in the middle shows it, and its settings open on the right. Until it has collections, the phone shows a note instead: “Pick collections to show. This section is hidden in the app until it has some.”
Step 2: Choose the collections #
The first section, Collections, gives you two ways to fill the block.
- Show my store’s collections: switch this on and the slider “Shows your store’s first 6 collections, so new ones appear without editing this block.” The app reads them live from your store, in the order Shopify lists them. Category Chips show the first 8.
- Pick collections: leave the switch off and click Pick collections. Shopify’s own picker opens; choose up to 12 collections. The names you picked show above the button, which then reads Change collections.
If you switch to your store’s collections after picking some, the Builder keeps your picks: “Your picked collections are kept. Switch this off to show them again.”
Each card uses the collection’s image and title from Shopify. A collection with no image shows a plain tile with a collections icon, so give each collection an image in Shopify first.
Step 3: Set the slider’s title #
Under Title, Show title is on by default. Type your own text in Title, or leave it empty: the app then shows “Shop by collection” in the shopper’s app language. Turn Show title off for a row of cards with no heading.
If your app has more than one language, use Languages in the top bar to write the title in each one.
Step 4: Set the slider’s layout #
Under Layout:
| Setting | Options | Default | What it changes |
|---|---|---|---|
| Card size | Small, Medium, Large | Medium | The card’s width: 112, 148 or 200 points |
| Image shape | Square, Portrait (3:4), Landscape (4:3) | Square | The shape of each collection image |
| Collection name | Below the image, On the image | Below the image | Below: one line under the image. On the image: up to two lines in white over a soft dark fade at the bottom of the image |
| Spacing | Small, Medium, Large | Medium | The gap between cards |
| Corners | None, Small, Medium, Large | Medium | How round each image’s corners are, from your theme’s corner sizes |
Small cards show more collections at once; large cards make each image count. On the image suits photos with a calm lower half; Below the image keeps every name easy to read.
Step 5: Add Category Chips #
Click Add blocks again and pick Category Chips under Collection blocks. Choose its collections the same way as in Step 2: Show my store’s collections (your store’s first 8) or Pick collections (up to 12).
Then, under Layout:
- Image shape: Circle (default) or Rounded square.
- Size: Small, Medium (default) or Large: images of 56, 68 or 84 points.
- Show collection names: on by default. Turn it off for images only.
Category Chips have no title. Most stores place them near the top of Home, under the header or the first banner.
Step 6: Save, preview and publish #
- Click Save as Draft. A draft is only visible on your preview device.
- Click Live preview and scan the code with your phone’s camera. It opens your app in MobiCart Preview, so you can tap through your collections on a real phone.
- Click Publish to push the page live to your customers’ apps. More in Preview and publish your app.
If the button says Upgrade to publish, your plan doesn’t include publishing this page to your own app yet: the Builder asks for the Launch plan. See pricing.
Part 2: What shoppers see in the mobile app #
Both blocks look and work the same on iPhone and Android, in your theme’s colors.
| Block | What shoppers see | What a tap does |
|---|---|---|
| Collection Slider | The title, then a row of collection cards that swipes sideways, lined up with the page margin | Opens that collection, with its name at the top |
| Category Chips | A row of small images with names. If they fit across the screen, they share the row equally; with more, the row swipes sideways | Opens that collection |
How many chips fit across the screen before the row starts to swipe: 5 at Small, 4 at Medium, 3 at Large.
Images and names come from your Shopify collections. When you rename a collection or change its image in Shopify, the app shows the change without a new publish. The app keeps a saved copy, so the row appears at once when Home opens and refreshes in the background.
A block with no collections to show, for example when none are picked or the store has none yet, is hidden in the app rather than shown empty.
Recommended setups #
| Store type | Near the top | Further down |
|---|---|---|
| Fashion and beauty | Category Chips: Women, Men, Accessories, Sale | A Collection Slider of seasonal edits, Portrait (3:4), names on the image |
| Electronics and home | Category Chips with Rounded square images | A Collection Slider of room or product-type collections, Landscape (4:3) |
| Food and drink | Category Chips for your main ranges | A Collection Slider of bundles or gift boxes |
| Big catalog (dozens of collections) | A Category Browser | A Collection Slider for the few you want to feature |
| New store, collections still changing | Category Chips with Show my store’s collections on |
Troubleshooting #
| Problem | Cause | Fix |
|---|---|---|
| The block doesn’t show in the app | No collections picked, or the store has none yet | Pick collections, or add collections in Shopify |
| A card shows a plain grey tile | The collection has no image in Shopify | Add an image to the collection in Shopify |
| The order of my store’s collections is not what I want | Show my store’s collections shows them in the order Shopify lists them | Turn it off and pick the collections yourself |
| A collection I added in Shopify is missing | Picked collections only show what you picked | Click Change collections and add it, or switch on Show my store’s collections |
| Long names are cut off | Names get one line below a card or chip, two on the image | Use shorter collection titles, or On the image on the slider |
| The chips swipe instead of filling the row | More chips than fit at that size | Use fewer chips or a smaller Size |
| My change isn’t in the customers’ app | It is saved as a draft | Click Publish |
Frequently asked questions #
What is the difference between a Collection Slider and Category Chips? #
A Collection Slider shows large image cards in a swiping row with a title; Category Chips show small round images with names, for quick browsing. Both open a collection on tap.
How many collections can I show? #
Up to 12 when you pick them. With Show my store’s collections, the Collection Slider shows your store’s first 6 and Category Chips the first 8.
When should I use the Category Browser instead? #
When you have many collections organised in a menu, with subcategories. The Category Browser reads your store menu and adds an All sheet with search.
Can I change a collection’s image just for the app? #
No. Both blocks use the collection’s image from Shopify, so the app and your website match. Change it in Shopify and the app follows.
Can I add more than one Collection Slider? #
Yes. Add as many as you like, each with its own collections and title, for example one for new arrivals and one for gift guides.
Can I hide the collection names? #
On Category Chips, turn off Show collection names. On the Collection Slider the name always shows, below the image or on it.
Do these blocks work on iPhone and Android? #
Yes. The same blocks show in both apps.
Need a hand? #
Book a free 30-minute demo and we will set up your collections with you.
