Beyond the scroll — how to use Shopify sections to create engaging pages

Last month, we took a look at how prioritizing content is important when you design and create engaging pages that extend beyond the scroll using your Shopify theme.

This week, we’re actually returning to that time where there were these things called newspapers.

Newspapers, which still do exist, of course, featured the news of the day written by a team of journalists. However, there was often more news than could “fit” in on the pages — so editors would often have to cut off articles.

Because of this, these journalists used a style of writing known as the “inverted pyramid.”

As its name suggests, the inverted pyramid is essentially an upside down triangle — think of a triangle balancing on its “point.”

The idea was that you would put the most important and newsworthy facts at the top of the story — in this case the “wider” part of the triangle. As the story progressed, the details got less and less important.

The very bottom of the pyramid (where it’s narrowest) represents less vital and general information.

The reason for this writing style was that, when rushing to meet deadlines, editors might not have time to read the full story and move information around to make sure readers got all the important facts.

Essentially it let editors “cut off” paragraphs of the story to make it fit on the page without having to worry, at least on the surface, that essential information was being cut.

It also had a secondary advantage for readers who didn’t have the time or desire to read an entire article — they could generally get the key parts of the story by reading, say, the first third or so.

The inverted pyramid is a good analogy to think about in terms of prioritizing information on your pages, like we discussed last month.

The idea of taking a shape to illustrate this concept also brings up the other key factor in how your page information is shown on a page — presentation.

Presentation methods

Newspapers and other printed publications also use a variety of design techniques to help explain the news or provide more information — whether it be a small photo of a person mentioned in the story or a “sidebar” column with background information or a bullet list of important events.

Digital design has borrowed heavily from print design in this respect — and, thanks to Shopify sections, you’re given a palette of presentation options to show your information in a variety of ways to keep things not only visually interesting but easier to understand.

Types of content

First, look at the content you want to display for a particular point on your page. Inevitably, it will fall into one of these groups:

• Details that require at least a sentence — if not a paragraph or two — to explain properly.
• Key facts or points that users are likely to keep an eye out for when shopping.
• Important numbers or other data points.
• Steps, processes or other “ordered” data.
• Information that can be best presented with an image and a bit of text.
• “A picture is worth a thousand words” where an image can convey all or most of the point.

So, now it’s a matter of picking the right section type for your content:

• Featured promotions (as well as Flex’s icon bar) are great options to display key facts and blurbs of essential information. You can opt to include an accompanying image or icon as well — but be sure to select something that is immediately clear what it represents and how it connects to the element you’ve highlighted.
• Another great way to spotlight key features, services or other information is image with text sections. These are typically better if you feel you need a bit more text to make sure you get your point across.
• Both featured promotions and images with text can also be used to display processes and steps in creative ways. In general, featured promotions are better for showcasing “steps” that need more of a “timeline” feel since they run left to right on desktop.
• Larger, simpler blocks of text that can be blended with high-quality imagery are perfect for image with text overlay sections.
• Of course, slideshows and gallery sections are ideal for showcasing photos.
• Likewise, rich text sections can be used for longer or shorter text. Even though rich text doesn’t support bullet lists, a workaround to this is to type a short line of text, hit enter and then continue with each point. The built in Shopify theme CSS will separate each line into a distinct block of text, making it easier to scan.
• Flex and Turbo users can also use the HTML section to create ordered (numbered) and unordered (bullet) lists.

When available, don’t forget to consider taking advantage of linking specific elements to other pages on your site that can provide more detailed information. Even if there isn’t a direct call to action, users interested in a specific object will often discover it’s clickable — which means more engagement with your content.

‘Scanability’ and readability

Combining the concept of prioritizing and presentation is the idea of creating pages that are “scannable.”

This refers to users (potential customers) “scanning” the page with their eyes.

Clean pages that are well laid out, have clear division, and use the best section type for the content being shown tend to be more scannable.

While scanning a page is, by definition, as a cursory onceover, this can be a key way to, quite literally, catch a shopper’s eye and get them to dig deeper and read your content in more detail.

Once you’ve hooked a user into investing in reading more information, it’s important to keep it easy for them to read and understand your content — and this can be achieved through a combination of design, presentation selection and, of course, providing compelling and useful information.

You can use a variety of design techniques to create visual separation between elements of your page to ensure it’s not only scannable but also readable.

• If possible, use a variety of section types as you go down the page. In general, putting two of the same section type on top of each may make it hard to understand that it’s two separate elements.
• That said, you can always use the “divider” section type to provide a literal visual signal that your content is about to change gears.
• In addition, don’t try to “force” a certain type of content into a section type that doesn’t make much sense for it just because you’ve used all the other ones or simply like the way it looks. Content should always drive which section type you pick.
• Switch background colors — high contrasting ones work best — to create separate “canvases” for your content.
• Changing the size, color and font of your typography is also huge in making pages both scannable and readable. Even just a few points difference in size or a slightly lighter shade of gray can help a user’s brain distinguish for example, between a header and body of text.
• Flex users can also take advantage of adjusting the spacing on many section types. Other theme users can use custom CSS.