Mobile-first store: the design the shopper sees
Mobile-first store: the design under the thumb, with the same content as desktop, a generous tap target and a photo Google can index.
by Cristiano · E-commerce and Shopify · October 19, 2026 · 11 min read
The short answer
A mobile-first store means designing the storefront at phone width, with the finger as the mouse, and only then seeing how that rearranges on the monitor. Google indexes the mobile version of the site, crawled with the smartphone agent. What you hide or delete on the phone stops existing for search, even if it looks great on desktop. A store theme is almost always responsive: the same page, the same URL, and the layout changes with the screen. Responsive does not mean it was designed for the phone. It means the desktop shrank. Below I show the order I design in, what cannot disappear, the tap size and what to check on the phone checkout.
1. Google reads the phone, not the monitor
Mobile-first indexing means this: the version Google uses to index and rank is the phone version. A mobile version is not required to appear in search. Google says it is strongly recommended.
For a store, the path Google recommends is responsive design. The same HTML, the same URL, and the presentation changes with the screen size. The other two paths (different HTML on the same URL, or a separate m-dot site) exist, and they take more work to keep the title, the content and the links the same. A Shopify theme is already born on the first path. I do not open a second site for the phone.
The detail that changes the design: if the phone has less content than the desktop, Google warns that you can expect a loss of traffic, because it no longer sees the whole page. Accordions and tabs are accepted as a way to save space. Deleting a block is not.
If you are building the whole store, the e-commerce project is where the home, the collection and the product come in together. The product page itself, with photo, variant and price, is in the article on what the design needs to show on the product page.
2. What cannot disappear when the screen shrinks
Google asks for the same primary content, the same clear headings, the same title, the same meta description and the same alt text on images. Structured data on both versions as well. If you have to prioritize what to mark up on the phone, the order Google gives is Breadcrumb, Product and VideoObject.
That becomes a layout rule. A hamburger menu can hold secondary pages. It cannot hold the product name, the price, the variant and the buy button. A photo that is "desktop only, because it is heavy" removes from search the image the person would use to decide. Google also asks for a quality image on the phone, not a blurry thumbnail in place of the large photo.
Text about measurements, delivery time and exchanges can go into an accordion under the button. The text needs to be in the page HTML, not behind a click that loads something else. Google states that it does not load primary content that depends on swiping, clicking or typing. An accordion that already brings the text on the page, only hidden visually, is different from a button that fetches the text later.
An ad or a banner at the top eats the phone screen. Google cites Better Ads and says an ad at the top can take up too much space. In the store, the equivalent is stacking a shipping bar, a cookie notice and an app bar. I keep one short bar. The rest waits until the person scrolls.
A product video stays near the top, not after ten blocks. Google's help says a video that is hard to find on mobile, because it requires a lot of scrolling, can hurt the video in search.
| What to check | On the phone | Why |
|---|---|---|
| Primary text | The same as the wide version, even inside an accordion | Google indexes mobile |
| Title and meta description | The same on both versions | They are the same ad in search |
| Photo alt text | The same | An image without alt is incomplete |
| Product data | Product, and Breadcrumb if the store uses it | The priority Google lists |
| Top banner | One line, without stacking notices | A tall ad gets in the way of the page |
| Video | Near the product, without scrolling the whole page | A hard-to-reach position hurts the video |
Source: Google Search Central, mobile-first indexing page, updated on 10/12/2025, read on 16/10/2026.
3. Design at thumb width
I start the layout file on a narrow screen. Home, list and product. Only when the purchase makes sense at that width do I stretch it to desktop. The reverse produces an empty column on the phone, a button below the fold and a menu that exists only on hover. Hover does not exist on a finger.
On the home, the first block answers "what this store sells" without depending on a slider that changes by itself. A slider that changes by itself hides the sentence Google and the person needed to read. One photo, one sentence, one button.
On the list, the card shows the photo, the name and the price without cutting the price with an ellipsis. A filter cannot be a sidebar that, on the phone, becomes a full page with no visible apply button. I put the filter in one button, with apply fixed at the bottom of the screen.
On the product page, the gallery, the name, the price, the variant and buy fit in the first fold or right at the start of the scroll. Abandonment research helps remember what cannot be left for "further down": extra cost is the reason for 40% of abandonments, aside from people who were only browsing (42%). Shipping and delivery time are not the footer. They are part of the decision, and on the phone the footer is far away.
Contrast follows the WCAG: 4,5:1 for normal text and 3:1 for large text (18 points, or 14 in bold). In sunlight, light gray on white disappears. I avoid price text in gray over a photo.
If your store was designed on a monitor and on the phone the price, the button or the shipping disappears, send the URL and a sample product. If you have not created the store yet, talk to me before you create it: the store is born as a development store, is built ready and transferred to your name.
4. Tap target
WCAG 2.2 criterion 2.5.8 asks that the pointer target be at least 24 by 24 CSS pixels. There are exceptions: smaller targets can exist if a circle of 24 pixels on each one does not touch its neighbor, if another equivalent control exists on the page, if the target sits in the middle of a sentence, if the size comes from the browser, or if the small size is essential.
In the store, this covers the menu, the size variant, the quantity, the cart trash icon and the filter's "see more" link. Tiny type with an icon stuck to its neighbor is where the person buys the wrong size. I enlarge the clickable area even when the icon drawing stays small. The area counts, not only the stroke.
The buy button is the largest target on the page. Column width on the phone, short text ("Buy" or "Add"), and a color that passes contrast. A secondary button ("favorite", "notify me when it is back") does not get the same size and the same color, or the two compete.
5. A photo Google can still see
Lazy loading is normal in a long list. Google's limit is a different one: do not let primary content depend on a gesture in order to exist. The first product photos enter the page without the person having to tap a "more" that fetches the file.
The phone photo is the same photo, not a crop that cuts off the product. A URL that changes on every load makes it harder for Google to index the image. Alt text describes the product ("white sneaker, side view"), not the word "image" repeated.
If the store uses a different image URL on desktop and on the phone, Google warns that image traffic can drop for a while, because the new URL does not yet have a history. In a responsive theme, the same URL at an adjusted size avoids that detour. I do not create a second "light" gallery with another file name just for the phone.
6. Checkout on the phone
Baymard's checkout review, updated in November 2025, found 63% of mobile sites with mediocre performance or worse. On desktop, 64%. Only 2% of mobile sites came out as good. Shrinking the desktop checkout does not fix it. The screen is already short. One more field becomes one more scroll.
On Shopify, the order summary and the coupon start collapsed on the phone. The person has to tap to see the total and the code. If the store lives on coupons, the admin leaves the coupon field always visible. I want the order amount readable before that tap. A cost that shows up late is on the abandonment list.
18% abandoned because the site asked them to create an account. 17% abandoned because the process was long or complicated. On the phone that hurts more: the keyboard covers the field, and each extra step is a reason to close the browser. Buying without an account stays the primary action. An account stays the path for someone who has already bought.
Shopify checkout is not designed in the theme. Colors, logo and font go in the checkout editor. The decision to use the native checkout or an external one (Yampi, Cartpanda) is in the article on Shopify checkout in Brazil. The phone layout still applies in both cases: a visible total, few fields, and a button the finger hits.
The documented average cart abandonment is 70,22%. Part of that is people only browsing. The part design can reach is cost, a required account and a long flow. On the phone, those three show up first.
7. Work order
When I take a store to review, the order is this.
First I open the home, the list and one product at phone width, without rotating to landscape. I note what does not fit: a cut-off price, a button off the screen, a menu that does not close, a banner that pushes the product down.
Then I check whether the text that exists on desktop is also on the phone, even inside an accordion. The page title and the description are the same. Photo alt is filled in.
Then the tap: variant, quantity, filter, buy. If two controls fit under the same finger, I space them apart.
Desktop comes last. There I use the space that is left to show more photos side by side, not to invent content the phone does not have. New content on desktop, with no pair on the phone, is content search does not use.
A ready-made theme speeds the work up. It does not replace this pass. A theme that is installed and never opened on the phone repeats the 63% mistake: the screen exists, the purchase does not.
Frequently asked questions
Does a mobile-first store mean a separate site for the phone?
No. Google recommends the same HTML and the same URL, with the layout adapting to the screen. A separate site, or different HTML on the same URL, requires the same title, content, images and links on both versions. A responsive store theme is already on the simpler path. The work is to design that narrow screen on purpose.
Can I hide text on the phone to keep the page cleaner?
You can collapse it in an accordion or a tab, with the text still on the page. You cannot delete it. Google indexes mobile. If the phone has less content, search loses what lived only on desktop. Primary content also cannot depend on a click that fetches the text later.
What is the minimum size of a button?
WCAG 2.2 asks for a target of at least 24 by 24 CSS pixels, with exceptions for space between targets, another equivalent control, a link in the middle of a sentence, a browser control and an essential case. In the store I apply this to the variant, the quantity, the filter and buy. The primary button takes the full column width.
Does Shopify checkout on the phone show the total on its own?
The summary and the coupon start collapsed. The person taps to open them. You can leave the coupon field always visible. The total needs to be readable early: a high extra cost is one of the abandonment reasons Baymard measures, for 40% of people who were not only browsing.
Does a promo banner at the top get in the way of search?
Google says an ad at the top can take up too much space on the phone and cites the Better Ads standard. One short bar for shipping or a campaign fits. Several stacked bars push the product and the photo down. I keep one.
Conclusion
A mobile-first store is the order of the design and the order of search: Google reads the phone, the person buys on the phone, and the desktop builds on what already worked on the narrow screen. The content stays the same, the tap stays generous, the photo stays sharp and the checkout shows the cost before the card. If your store was built on a monitor and never reviewed on the device, the e-commerce project is the place to see that work. Send the store URL and a product you want as the example. If you have not created the store yet, talk to me before you create it: the store is born as a development store, is built ready and transferred to your name.
