Once upon a time, there were these things called newspapers.
Newspapers would come off printing presses with their ink still damp and go through giant machines that would fold them in half. This made it possible for them to be proudly displayed on racks around town and inside boxes that opened when you put a coin in.
But these newspapers had to find a way to quickly grab the attention of those passing by — so they came up with the idea of ”above the fold.” This led to one of the most talked-about concepts in website design — ”above the scroll.”
Newspapers, which still do exist, of course, are commonly published in two sizes: Broadsheet and tabloid. Broadsheet layouts were taller than they were wide — more of a portrait orientation.
In order to save space on display racks and vending machines (and make them easier to carry around), broadsheet newspapers were typically folded in half at the middle of the longer side.
This meant that any content in the top half of the page was “above the fold” and would be when the newspaper was on display.
Because of this, it quickly became common practice in the newspaper industry to get as many important and attention catching headlines “above the fold” — even if the story continued below.
This was done in hopes that a casual reader might spot a headline of interest and buy the newspaper — and the more headlines you could get above the fold, the better the chance you had of grabbing the interest of a wider range of readers.
Tabloid (the name originally referred to the format, not the content) newspapers are more square or book-shaped — and can generally have their entire cover visible on a rack or vending machine.
Flash forward to the digital age and the word “fold” was replaced with the quasi-rhyming word “scroll.”
The two concepts obviously differ in that a fold can only be done with physical paper — and a scroll requires pixels on a screen.
The idea, however, is still the same — viewers still see the top portion of a page when a web page, including those built with a Shopify theme, first loads.
If the page contains more content, then users have to scroll down to see it. It’s sort of like an immutable law of how the web works. Because of this, it’s very common to hear people talk about the importance of keeping important content above the scroll on a website design.
At its core, this concept is solid. Naturally, you want to grab users’ attention with whatever content first appears on the screen.
That’s true whether you’re a news site, blog, or online store.
However, it’s also fairly easy to get too focused on “above the scroll” and forget that all that space below the scroll still has value.
More often than not, Shopify’s built-in sections feature encourages store owners to build sites that divide content into segments running down the page — which is a key foundation in building pages that are mobile-friendly but also engaging.
This forces us to prioritize content and consider ways that the most important or visually engaging content is what appears first.
Fair warning, it can quickly become frustrating to try to fit everything in above the scroll for mobile devices — but with some careful prioritization and creativity, you can create highly engaging experiences for shoppers:
It’s tempting to use gorgeous, full-width content that takes up most or all of the height of the browser window too, but allowing some of the content below to “peek up” above the scroll is a simple visual cue that there’s more to see on the page.
As you continue down the page, you’ll want to keep two key points in mind: Priority and presentation.
We’ll look more at presentation next week, but for now here, let’s explore how prioritizing strategies help build your pages.
Priority involves placing the more important content (or content more likely to convert customers) higher up on the page.
Ultimately, your goal with prioritization should be to get shoppers invested higher up on the page.
This is true for almost any type of page — whether it’s a Product page, About Us page, or even more mundane ones such as policies and return information.
Show how your company, products, or services can solve a problem, make people’s lives easier or just how awesome they look.
With the Flex Shopify theme, store owners and designers now have the ability to add content above the standard production gallery, information, and form using an alternate product page template, which opens up interesting possibilities for product page design.
Many successful ecommerce stores are shunning the traditional product page layout in favor of using imagery and text to present their products or services, gaining trust and buy-in and then including the “add to cart” area:
Product pages using this approach also have the advantage of feeling less “in your face” about being a sales pitch. Instead, shoppers are encouraged to get to know the product or service — the digital equivalent of picking up an item, examining it and seeing if you like it.
Of course, there will always be stores that still benefit from the traditional layout, so if you do try this approach it’s a good idea to closely monitor conversion rates after it goes live.
Even if you don’t (or can’t) use the more advanced Flex product page layout or find it doesn’t work for your store, consider moving that content below the gallery and product form.
Despite it not being the first thing users see, savvy online shoppers often treat that “above the scroll” content as more of a summary and look for more detailed information, images and more below.