Above the fold on Shopify mobile: what a phone shows first

Above the fold on a Shopify mobile homepage is what a phone shows before any scrolling; Store Decode calls it the first screen. It draws a line where the first screen ended for most of your mobile visitors, and prints how many did not view the section just below it. Sections that phones view far less than computers carry a signal of their own, Phones skip it.

Type it in Find

• What do visitors see on the first screen?
• Which homepage sections do phones skip?
• Do phones see less of the homepage than computers?

Type it in Find on Home or Explore and Store Decode opens the view with your numbers.

Store Decode Mobile · 7 days

40% viewed Bestsellers

Your first screen ends in the hero.

Sample store · 1,642 of 4,100 sessions

Sample store · Mobile · 7 days · 1,642 of 4,100 sessions

Where to find it

1. Open Explore and pick Homepage.
2. Choose Mobile in the card header. The page map draws your homepage inside a phone.
3. Find the dashed line labelled “Typical first screen ends”. The text beside it reads, for example, “9% didn’t view Shop by category”.
4. To see the sections phones skip, choose the Phones skip it chip above the sections table.

Home shows the same two findings as pills on its page map card: “First screen ends after {section} on most phones” and “{n} sections phones skip”. Each pill opens Explore on that view.

What the numbers mean

The first-screen line

As each page loads, Store Decode notes which sections started on the visitor’s own screen. The line is drawn after the last section that started there in at least half of the page views that held it. “9% didn’t view” is 100 minus that next section’s Views: the share of sessions that had it on the page in which at least half of it was visible. The glossary has every term.

The phone is drawn at the most common screen size among your mobile visitors, and its caption says so, for example “Phone shown: most common among your visitors · 390 × 844”. An amber bracket beside it spans the range where the first screen ended in 75% to 25% of views. The line and the bracket are drawn; the percentages beside them are measured on each visitor’s own screen.

The line needs 50 homepage page views on the device. Until then the map names what it is waiting for. All devices has no line, because a first screen belongs to one screen size. The scroll depth page explains the method in full.

Phones skip it

A section gets Phones skip it when its Views on desktop are at least 35 points above its Views on mobile. Both devices need 300 sessions with the section on the page. It marks a section that computers view and phones mostly do not.

Desktop here includes tablets, and a section can carry only one signal. Dead clicks and Seen, not clicked come before Phones skip it when both apply.

In the sample store

Tidewell Home is an invented sample store, and every number here is made up. Its phone screen is 390 by 844 px. The announcement bar is 36 px, the header 64 px and the Hero slideshow 760 px, which add up to 860 px. That fills the screen, so the line is drawn after the hero and Shop by category starts below it.

Sample store, Mobile · 7 days · n=4,100	Height	Sessions that viewed it	Views
1. Announcement bar	36 px	3,981	97%
2. Header	64 px	3,944	96%
3. Hero slideshow	760 px	3,772	92%
Typical first screen ends		9% didn’t view Shop by category
4. Shop by category	360 px	3,731	91%
5. Bestsellers	640 px	1,642	40%
6. Why Tidewell	520 px	1,189	29%
7. Our story	240 px	861	21%
8. New arrivals	640 px	697	17%
9. Newsletter	220 px	533	13%
10. Footer	360 px	451	11%

Shop by category sits just below the line and was viewed by 3,731 of 4,100 mobile sessions. The bigger step comes after it: Bestsellers was viewed by 1,642.

On desktop (Desktop · 7 days · n=1,900) the line is also drawn after the hero. The bar, header and hero add up to 920 px against a 900 px window, and Shop by category was viewed by 1,731 of 1,900 sessions.

No sample section has the 35-point gap for Phones skip it. The widest is Bestsellers: viewed in 60% of desktop sessions and 40% of mobile ones, a gap of 20 points.

You could

Store Decode makes an observation when at least 35% of mobile homepage sessions never see anything below the second section of the page. Sections in your theme’s header group, such as the announcement bar and the header, never count as seen for this rule, and the card puts it as seeing nothing below the hero. It looks at the last 7 days and needs 300 mobile homepage sessions. The sample store has no such card. The rule’s option reads:

You could: shorten the hero so the next section shows sooner, then compare how many visitors see section 2 over the two weeks after.

In that option, section 2 is the same second section the rule reads.

If a card made you change the page, mark it done and Store Decode reports the before and after for you. If you changed the hero’s height in its settings without a card, compare by hand. Set Explore to Mobile and the same number of days on each side of the change. Then look at where the line falls and at the Views of the section that was just below it.

Common questions

How many pixels does a phone show before scrolling?

There is no single number: it depends on the phone, the browser bars and your theme. Store Decode draws the screen size most common among your own mobile visitors, and places the line from where sections really started on their screens.

What should be on the first screen of a Shopify homepage?

Store Decode does not prescribe a layout. It shows what your first screen holds on each device and how many sessions went on to view the next section. Those two numbers are where any change starts.

Do mobile visitors scroll past the first screen?

Each section’s Views tells you how many did: in the sample store, 91% of mobile sessions viewed the first section below the line and 40% the one after it.

Why is there no first-screen line on my map?

The line needs 50 homepage page views on that device, and it appears after the next hourly update once they are in. It is never drawn on All devices. Store Decode not working? has the other checks.

Related

• The page map: a section heatmap of your Shopify homepage covers the map’s other colourings.
• Scroll depth on Shopify, section by section explains how Views and the line are measured.

See the first-screen line on the sample store’s map