MobiCart
Banners in your Shopify mobile app are the blocks at the top of your Home page that announce a sale, a new collection or an offer, and send shoppers straight to it. MobiCart has three, all no-code: the Image Slider, the Promo Banner and the Countdown Timer. This guide covers every setting and what shoppers see on iPhone and Android.
In short: in the App Builder, open your Home page, click Add blocks, pick a block under Banner blocks, fill in its settings on the right, then Save as Draft, check it with Live preview, and Publish.
What the banner blocks are #
The three banner blocks each do one job:
- Image Slider: full-width slides that swipe and autoplay, with an optional heading, text and a button. Each slide can open a product or a collection.
- Promo Banner: one tappable banner with a short message and a button, on your brand color or over an image.
- Countdown Timer: counts down to the end of a sale, then hides itself or shows a message.
You can add each one as often as you like and move it anywhere on the Home page. A link always goes to a product or a collection in your Shopify store.
Banner blocks at a glance #
| Block | Main settings | Defaults | Tap opens |
|---|---|---|---|
| Image Slider | Slides (up to 10), Text overlay, Layout, Display options | No slide text, Landscape (16:9), Medium corners, dots, arrows and autoplay on, 3 seconds per slide | The slide’s product or collection |
| Promo Banner | Layout, Image, Content, Style | Standard layout, Brand color background, Start alignment, Medium size and corners | The banner’s product or collection |
| Countdown Timer | Layout, Countdown (end date and time), Content, Style | Centered layout, Show days on, When it ends: Hide the block, Brand color background | The button’s product or collection |
Text limits, from the Builder: headings 80 characters, subheadings and subtitles 160, button labels 30, the Promo Banner’s Small text above 40, and the countdown’s ended message 120.
Part 1: Set up banners in the merchant dashboard #
Step 1: Add a banner block #
In your Shopify admin, open the MobiCart app and go to the App Builder. With the Home page open, click Add blocks. The block list is grouped; the first group is Banner blocks. Hover a block to read what it does, or type in Search blocks.
Click Image Slider, Promo Banner or Countdown Timer. The block is added to your page, the phone in the middle shows it, and its settings open on the right.
Step 2: Add slides to the Image Slider #
The slider’s settings start with Slides, which shows how many you have out of 10, for example Slides (3/10).
- Click Add slide. The new slide opens.
- Under Choose an image, drop or pick an image. The Builder takes JPG, PNG, WebP or GIF files up to 5 MB. Images about 1200 px wide stay sharp without slowing the app.
- Under Link, click Link a product or Link a collection. Tapping anywhere on the slide opens it. Without a link, Tapping this does nothing.
Each slide row has Move up, Move down and Remove slide buttons to change the order. The Builder warns you when an image is narrower than 1000 px (“may look blurry”), and when its shape doesn’t match the slider, so its edges are trimmed. The preview shows what shoppers will see. A slide with no image is not shown in the app.
Step 3: Add text to your slides #
Under Text overlay, turn on Show slide text. Each slide then gets a Heading, a Subheading and a Button label (leave the label empty to hide the button). If a slide has a button but no link, the Builder reminds you to add one.
| Setting | Options | Default |
|---|---|---|
| Text position | Top, Center, Bottom | Bottom |
| Alignment | Left, Center, Right | Left |
| Darken image | None, Light, Medium, Strong | Medium |
| Shade style | Stripe behind text, Gradient | Stripe behind text |
| Text color | Light text, Dark text | Light text |
Darken image puts a shade under the text so it stays readable on any photo: dark under light text, light under dark text. Shade style decides its shape: a stripe sits just behind the text, a gradient fades out across the slide. It is hidden when Darken image is None.
Step 4: Set the slider’s layout and motion #
Under Layout:
- Shape: Square, Landscape (16:9) or Wide (21:9). Default Landscape.
- Full width: slides touch both edges of the screen, with square corners. Off by default.
- Corners: None, Small, Medium or Large (hidden when Full width is on). Default Medium.
Under Display options: Show dots, Show arrows and Autoplay are all on by default. With Autoplay on, Seconds per slide goes from 2 to 10, default 3. Dots and arrows only show when the slider has two or more slides.
Step 5: Set up a Promo Banner #
Add a Promo Banner from Banner blocks. Its settings come in three sections.
Layout. Pick Standard (text on your color, or over a full-width image) or Image on the right (text on your color, with the image beside it). Then add an optional Image with Upload image. In Standard, the image fills the banner and the text turns white over the darkened image. In Image on the right, the image takes the right half; until you add one, the banner is just its color.
Content. Small text above, Heading, Subtitle, Button label (leave empty for no button) and Link. The whole banner is tappable and opens the link.
Style.
| Setting | Options | Default |
|---|---|---|
| Background | Brand color, Secondary color, Light | Brand color |
| Text alignment | Start, Center | Start |
| Size | Small, Medium, Large | Medium |
| Corners | None, Small, Medium, Large | Medium |
Background is hidden in the Standard layout once it has an image, because the image is the background. The colors come from your app’s color theme. A banner with no text and no image is not shown.
Step 6: Set up a Countdown Timer #
Add a Countdown Timer from Banner blocks.
Layout. Pick Centered (heading, subtitle and labelled time boxes, centered), Side by side (heading and subtitle beside a compact timer, in one short strip) or With image (the centered countdown over a darkened image). With image asks for an Image; until you add one, the countdown shows centered on its color.
Countdown.
- Ends on: the date, in your timezone. The block doesn’t show without an end date.
- Ends at: the time, on the hour or half hour.
- Show days: on by default. Turn it off to count in hours only (days fold into the hours).
- When it ends: Hide the block (default) or Show a message. With a message, type it in Message; if you leave it empty, shoppers see “This offer has ended.”
Content. Heading, Subtitle (optional, under the heading), Button label and Link. The button shows while the countdown runs, and only when the block has a link.
Style. Background (Brand color, Secondary color or Light; hidden in With image once it has an image) and Corners.
Every shopper’s phone counts down to the same moment, wherever they are, because the end is saved as one exact time.
Step 7: 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 banners on a real phone.
- Click Publish to push the page live to your customers’ apps. More on this in Preview and publish your app.
If the button says Upgrade to publish, your plan doesn’t include publishing to your own app yet. See pricing.
Part 2: What shoppers see in the mobile app #
The banners look and behave the same on iPhone and Android, in your theme’s colors.
| Block | What shoppers see | What a tap does |
|---|---|---|
| Image Slider | Slides they can swipe; dots and arrows when there are 2 or more; autoplay moves on after your Seconds per slide | Opens the slide’s product or collection. Tapping a dot or arrow changes slide |
| Promo Banner | One banner with your text and button | Opens the banner’s product or collection |
| Countdown Timer | Days, Hours, Min and Sec boxes that tick every second | The button opens its product or collection |
A product opens the way your app opens products everywhere else; a collection opens its collection screen. Swiping the slider restarts the autoplay clock, so shoppers aren’t pulled away from a slide they just chose.
When the countdown reaches zero, the block hides, or shows your message if you chose Show a message. The button disappears when the sale ends.
The banners are built for large text sizes too: a Promo Banner grows with the shopper’s text size instead of cutting text off.
Recommended setups #
| Store type | Image Slider | Promo Banner | Countdown Timer |
|---|---|---|---|
| Fashion and beauty | 3 to 5 lifestyle slides, Landscape or Square, text on | Image on the right for a new collection | Centered for a weekend sale |
| Electronics and home | 2 or 3 product slides, Wide, short headings | Standard on Brand color for free shipping | Side by side, above a product grid |
| Food and drink | Seasonal slides, Full width | Standard over a photo for a bundle | With image for a limited drop |
| Big catalog | Slides that each open a collection | One banner per campaign | Only while a sale runs, with Hide the block |
Two rules: one message per block, and every slide and banner links somewhere. To fill the rest of the page with products, see product blocks.
Troubleshooting #
| Problem | Cause | Fix |
|---|---|---|
| The countdown doesn’t show in the app | No end date, or it has ended and When it ends is Hide the block | Set Ends on, or choose Show a message |
| The countdown’s button is missing | No link, an empty Button label, or the countdown has ended | Add a link and a label; the button only shows while it runs |
| A slide is missing in the app | It has no image | Add an image to the slide |
| Tapping a slide or banner does nothing | No link set | Pick a product or collection under Link |
| The slider has no dots or arrows | Only one slide, or they are switched off | Add a second slide, or turn on Show dots and Show arrows |
| An image looks cut off | Its shape doesn’t match the slider’s Shape | Use an image in the same shape, or change Shape |
| An image looks blurry | It is narrower than 1000 px | Use an image about 1200 px wide |
| Shoppers don’t see my change | It is saved as a draft | Click Publish |
Frequently asked questions #
How many slides can an Image Slider have? #
Up to 10 slides per slider. You can add more than one Image Slider to the Home page if you need to.
What image size should I use for banners? #
About 1200 px wide, in the slider’s shape (square, 16:9 or 21:9). JPG, PNG, WebP and GIF files up to 5 MB are accepted.
Can a banner link to a web page? #
No. Banner links open a product or a collection from your Shopify store, so the shopper stays in the app.
What time zone does the Countdown Timer use? #
You pick the end date and time in your own timezone. MobiCart saves it as one exact moment, so every shopper’s countdown ends at the same time.
Does the countdown end my Shopify discount? #
No. The Countdown Timer only shows the time left. Set its end to match the discount’s end time in Shopify.
Can I change how fast the slider moves? #
Yes. With Autoplay on, set Seconds per slide from 2 to 10. Turn Autoplay off to let shoppers swipe on their own.
Can I translate banner text? #
Yes. If your app has more than one language, switch language in the Builder’s top bar and type each block’s text in that language.
Do banners work on both iPhone and Android? #
Yes. The same blocks and settings drive both apps.
Need a hand? #
Book a free 30-minute demo and we will set up your Home page banners with you.
