Loading and Motion
Movement That Feels Premium and Never Gets in the Way
Small movements tell a shopper that the store is listening: a card that lifts, a sheet that springs open, a section that rises in as they scroll. Mercayo's motion is tuned to feel like a big brand's app and is built so that it never delays the first screen, never moves the layout and stops completely for anyone who asks their phone for less.
- In every plan
- Free for 14 days
Kosha is a demo store on Mercayo. Its products, orders and customers are sample data.
In short
What It Does
Motion on a Mercayo store comes from one set of timings and springs shared by every part of the store:
- Sections enter as shoppers scroll to them: rising a little, fading, or with their items arriving one after another. Only sections below the first screen, only once.
- Things respond to touch: buttons lift and press, links draw their underline, chips and tabs press in, focus rings settle.
- Panels open with a spring: the bag drawer and bottom sheets spring up and can be flicked closed, the phone menu slides with its own spring, toasts rise.
- Pages change smoothly: a fade between pages where the browser supports it, with the header and announcement bar staying put, and a slim progress bar if a page takes a moment.
You set how much of it your store uses: Full, Calm (quick fades and colour changes only) or Off. Checkout, the thank-you page and the account are calm to start with, so paying never feels slowed down.
Loading is part of it. When a shopper switches a tab, changes a filter or sorts a list, the products already on screen stay there, softly blurred and dimmed with a slow sheen, until the new ones are ready; a fast answer shows no veil at all. Where nothing is on screen yet, a placeholder of the final size holds the place. Nothing ever flashes empty, and nothing jumps when the content lands.
For your store
Why It Matters
On a mid-range phone on a patchy 4G connection, a page that goes blank for half a second while a tab loads feels broken, even when it is not. A shopper who taps twice because nothing seemed to happen ends up with two items in the bag. These moments add up to "this store feels cheap", whatever your photos look like.
Mercayo's loading and motion rules exist to remove those moments: content stays on screen, taps get an answer, layouts never jump.
Motion is also a matter of respect. Some shoppers feel unwell with movement on screen and ask their phone for less; on a Mercayo store they get none, with nothing hidden from them. And movement is drawn with the browser's own lightest effects, with no animation library to download, so it does not cost your page speed.
Step by step
How It Works
Choose How Much Your Store Moves
Open Online Store → Theme → Motion. How Much Pages Move is Full (sections rise in, cards lift and sheets spring open), Calm (quick fades and colour changes only) or Off (everything appears at once). The preview shows the difference at once.
Set Where It Moves
Under Where It Moves, Movement on Store Pages switches movement off everywhere when you turn it off. How Sections Enter sets the default entrance for sections: Rise, Fade, Stagger or None. Movement at Checkout and in the Account is Calm to start with; choose Full for the same movement as the rest of the store.
Give One Section Its Own Entrance
In the page editor, choose a section and open its Style tab. Entrance is "Store default" to start with; choose None, Rise, Fade or Stagger for this section alone. A page's first section never has an entrance: the first screen always shows at once.
Let Loading Take Care of Itself
There is nothing to set for loading. Product rows with tabs, product lists with filters and sorting, LOAD MORE, search suggestions, reviews and the account's tabs all keep what is on screen veiled while the next content loads, and fetch the likely next tab while the shopper looks. LOAD MORE holds card-sized places for the cards on their way, so the page never jumps.
Trust the Shopper's Own Setting
A shopper whose phone or computer is set to reduce motion sees no movement at all on your store, whatever you chose: no entrances, no moving sheen, no sliding. Everything is still there; it simply appears.
Your shoppers
What Your Shoppers See
Shoppers get a store that answers every tap: a pressed button dims or presses in, a tab glides to its place, the bag springs open. There is no grey or blue box flashing over what they tap, and the keyboard focus ring shows only when they use a keyboard. While a list reloads they keep seeing the last products, veiled, so they never stare at an empty space. Shoppers who ask for less motion get a still store.
Settings
Settings You Control
Each one is in your admin. A new store starts with the value shown.
Mercayo
Mercayo's Controls
Each motion setting follows Mercayo's rule: Mercayo's override for your store if there is one, then your choice, then the default. Mercayo's team can force motion off or calm for a store, or mark the Motion section as set by Mercayo, with a written reason that is logged. How loading behaves is not a setting: it is how every Mercayo screen works, for your shoppers and for your team in the admin alike.
Limits today
Good to Know Before You Start
- Motion comes as fixed levels and entrances; you cannot set your own timings or easing.
- A parallax banner moves only at the Full level, and moving galleries and the ticker stand still for shoppers who ask for less motion.
- The page-to-page fade appears only in browsers that support it; others change pages without it.
Questions
About Loading and Motion
Will animation make my store slower?
No. Movement uses only the browser's own lightest effects, with no animation library to download, starts only after the page is ready, and never touches the first screen. It never moves the layout, so it does not count against your page's stability either.
What does a shopper with reduced motion see?
No movement at all: no entrances, no sliding sheets, no moving sheen while loading, only a gentle dim. Every section and button is still there.
Why is checkout calmer than the rest of the store?
Paying is a moment for clarity, not show. Quick fades and colour changes confirm each step without making the shopper wait for anything to finish moving. You can choose Full for checkout and the account if you prefer.
Can I switch motion off for one section only?
Yes. In the page editor, set that section's Entrance to None in its Style tab. The rest of the page keeps the store's default.
What does the shopper see while products load?
The products already on screen, slightly blurred and dimmed with a slow sheen, until the new ones arrive; on a fast connection nothing at all. Where nothing was on screen yet, a placeholder the size of the final content holds its place.
Related
Related Features
- Theme EditorColours, fonts, shapes, header, cards, product page, motion, logo and sharing picture, in one editor with a live preview, readability checks and undo.
- Home Page SectionsHero sliders, product rows, category tiles, stories, real reviews, reels and sign-up boxes, all drawn from your theme so the page always fits together.
- Page SpeedPages are kept ready and refreshed the moment you change something, photos are sized for each screen at full quality, and nothing on the page jumps.
- Collections and FiltersEvery list of products gets filters with exact counts, quick chips, sorts, badges and LOAD MORE, the same on collections, categories, sale and search.
More in Design and Page Editor: Page Editor · Home Page Sections · Theme Editor · Store Looks · Menus and Mega Menu · Announcement Bar · Product Templates
Try It on Your Own Store
Every feature is in every plan, free for 14 days.