Sales Popup Design: Templates, Colors and Mobile

Good sales popup design is mostly about restraint. The card should be small, readable in a second, and look like it belongs to your store. Pick a simple template, use your theme’s font and colors, write one short line, and make sure it never blocks the buy button on a phone.

This guide covers the parts you control: the template, colors, text, mobile layout and animation. For where popups go on the page, see where to place social proof on a Shopify store. For the bigger picture, see our social proof guide for Shopify.

What does a well-designed sales popup look like?

A sales popup is a small card that shows a real recent order. For example: “Emma in London bought Linen Shirt, 2 minutes ago.” Shoppers glance at it while they browse, so every part has to earn its space.

A clean card has five parts:

1. Product image. A small square thumbnail. It is the first thing the eye lands on.
2. Title (optional). One or two words, such as “Just sold”. This is where an accent color goes.
3. Message. One line: who bought what.
4. Caption. Where and when, in a lighter, smaller font.
5. Close button. Lets shoppers dismiss it without hunting.

What to leave out: long product names that wrap to three lines, extra badges, stars that don’t belong to the order, and anything that makes the card taller than it needs to be. A taller card covers more of the page, especially on a phone.

Which notification template should you start from?

Start from a template, then change as little as possible. Templates give you a tested layout and default text, so you only adjust what doesn’t fit your store.

In Sam FOMO, Recent Sales notifications come with four templates. Other notification types, such as Live Visitors or Sold Count, have their own sets.

Two notes on honesty. “Verified Buyer” only fits when the popup shows real orders from your store. “Selling fast” only fits when the product really is selling fast. If neither is true, edit the title or use Classic. Our post on whether recent sales popups are fake explains why this matters.

How do you choose colors for a sales popup?

Choose colors from your store, then check that the text is readable. A popup that matches your brand looks like part of the site. One in a clashing color looks like an ad and gets closed.

Match your theme first

The quickest route is to copy your theme. In Sam FOMO, the Match store style option uses your theme’s font and corners. On the neutral templates it also uses your theme’s colors (design, placement and timing guide).

If you set your own style, you get:

• Solid fill or Gradient fill (two colors and a direction).
• Background color and Background opacity (from 20% to 100%).
• Title color, with a Use template color button to undo changes.

Check contrast

Body text should have a contrast ratio of at least 4.5:1 against its background. WCAG level AA sets that minimum for normal text, and 3:1 for large text (WebAIM). Google’s web.dev notes that 4.5:1 is the minimum, and 7:1 helps more people with low vision (web.dev).

Captions in popups are small, so they need the full 4.5:1. Paste your text and background colors into the WebAIM checker before you save.

Common color mistakes

• Low opacity over busy pages. A see-through card over a product photo makes the text hard to read. Keep opacity high unless the page behind is plain.
• Gradients behind text. Check contrast at both ends of the gradient, not just one.
• Red everywhere. Red reads as alarm. Use it for a short title at most, and only for real urgency.
• Light gray captions on white. They look neat in a mockup and vanish on a phone in daylight.

How should a sales popup look on mobile?

On phones, a popup should be one slim strip at the top or bottom edge, clear of everything shoppers tap. A corner card that looks fine on desktop often covers the add to cart bar on mobile.

Pick the edge, not the corner

Phone screens are narrow, so popups usually span the width of the screen. In Sam FOMO, the left and right corners share one spot on phones: top corners use the top edge, bottom corners use the bottom edge. Under More placement options, you can set a separate position for phones: Same as desktop, Top or Bottom. You can also set a vertical offset for phones, so the card sits above a sticky bar instead of on it.

How to choose:

• Sticky add to cart bar at the bottom? Use Top, or raise the bottom offset above the bar.
• Chat button in a bottom corner? Check the popup doesn’t sit on top of it.
• Cookie banner on first visit? Make sure both can show without stacking into half the screen.

Google warns that popups covering the main content frustrate users and can hurt search performance. It suggests small banners instead (Google Search Central). A slim sales strip is a banner. A tall card over the product is not.

Make it easy to dismiss

Keep Show close button on. Google’s web.dev recommends tap targets of about 48 by 48 pixels, spaced about 8 pixels apart (web.dev). A tiny “x” next to the product link makes shoppers open the product when they meant to close the card. Test it with your thumb, not a mouse.

Shorten the text

One line of message and one line of caption is plenty on a phone. Use the Mobile preview in the editor to see where long product names wrap. If you don’t want popups on phones at all, you can turn off Mobile under Devices.

How do you write sales popup text?

Write one short line that says who bought what, and put place and time in the caption. Shorter text reads faster and keeps the card small.

In Sam FOMO you write the message and caption yourself, using variables such as {{first_name}}, {{city}}, {{country}}, {{flag}}, {{product_name}}, {{price}} and {{order_time}} (Recent Sales guide). A few patterns that work:

Tips for the words:

• Skip the last name. Most shoppers won’t mind a first name and city. Fewer like seeing their full name on a stranger’s screen.
• Keep product names short. If your product titles are long, a version without the name, plus the product image, can read better.
• Translate your own text. Built-in text such as time units follows the shopper’s language, and each popup has a Translations section for the text you write.

For more on wording that doesn’t feel pushy, see urgency marketing phrases.

Which popup animation should you use?

Use a quiet one. The animation only needs to tell shoppers that something new appeared, not grab them by the collar.

Sam FOMO has three animations for desktop: Slide from side, Slide from bottom and Fade in-out. On phones you choose Slide or Fade in-out. A slide fits a corner card. A fade is calmer and suits pages with a lot going on.

Some shoppers turn on a “reduce motion” setting on their device, because moving elements can cause discomfort for people with vestibular disorders (MDN). Short, simple motion is kinder to them than bouncing or shaking cards.

How do you set up popup design in Sam FOMO?

Every notification in Sam FOMO has the same Design, Placement, Timing and Translations sections below Content. The preview on the right updates as you go.

1. Open the notification. Go to Notifications and edit one, or create a notification.
2. Pick a template under Design.
3. Set the style. Tick Match store style, or set your own fill, colors and opacity.
4. Set the image. Choose Fill the frame (edges may be cropped) or Fit inside the frame for product images.
5. Keep the close button on.
6. Write the message and caption in Content, and check the Desktop and Mobile previews.
7. Set the phone position under Placement, then More placement options.
8. Click Save in the bar at the top of the page.

For the first setup from scratch, including turning on the app embed, see how to add recent sales popups to Shopify.

How do you know if your popup design works?

Look at what shoppers do with it. A design that gets closed far more often than clicked is usually too big, too loud or in the way.

• Check close rate and the device split. In Sam FOMO, Analytics shows impressions, clicks, CTR, close rate and the mobile/desktop split for each popup type (analytics guide). A high close rate on mobile only points to a phone layout problem.
• Test on a real phone. Open a product page, scroll, and try to tap add to cart while a popup shows.
• Change one thing at a time. Swap the template, or the colors, or the phone position. Then compare over a couple of weeks.
• Watch speed too. Design changes rarely affect load time, but it’s worth a check; see sales popups and page speed.

A quick design checklist before you go live:

• The card is one line of message and one line of caption.
• Text passes 4.5:1 contrast, including the caption.
• Font, corners and colors match your store.
• On phones, the popup never covers the add to cart bar, chat or cookie banner.
• The close button is easy to tap.
• The title (“Verified Buyer”, “Selling fast”) is true for what the popup shows.
• Every name, place and order comes from real store data.