Overview
When creating impactful, eye-catching, and valuable Shopify pages—it’s imperative you know how to efficiently prioritize content. Doing this requires an in-depth understanding of Shopify sections. In the following piece, we will be discussing Shopify sections and how you can use them to improve user experience.
Inverted Pyramid Design
Firstly, it’s important we should discuss a timeless design concept, the ‘Inverted Pyramid’. The inverted pyramid should influence almost everything in your Shopify site. In relation to your pages, it simply means that your most important or newsworthy content is displayed first (above the fold), and your least important content is displayed last (below the fold).
You will often hear inverted pyramid design associated with newspaper design (remember those?), where content is either displayed above the fold or below the fold. However, it’s important to remember that this is eCommerce and there is no longer a fold! Mobile commerce especially has changed the way users interact with a page, especially with regards to scrolling and Shopify merchants need to adapt.
The inverted pyramid is still a relevant concept to understand in terms of basic content prioritization and this article. But, when put in the context of modern user experience, take it with a grain of salt.
Defining Shopify Sections
Shopify Sections have been around for a while now, first being introduced at Unite 2016. Sections are Shopify’s way of making themes more modular, meaning merchants and developers can gain more control of each individual component that makes up a theme, without having to edit any code.
Sections allow merchants to edit complex themes by simply dragging and dropping components in Shopify’s theme editor. This would have previously only been possible with the help of a Shopify expert. Merchants are still limited to using the sections built by a theme developer. Some sections such as a header or footer are fixed (you cannot delete these, but you can edit them) on every page.
Sections are very flexible, and what you have available to work with depends on what the theme includes, which could be anything as big as slideshows, product galleries, testimonials, or sitemaps—to more specific elements such as an image, or an image with text overlay. The order in which these sections are displayed is up to the merchant and because each section was built to be both flexible and cohesive, you will always end up with a responsive and professional layout.
With Shopify Sections Comes Great Responsibility
Shopify sections have empowered merchants with more control over their pages, which means they have the potential to create more engaging pages. At the same time, if you don’t know what you’re doing, you have a greater potential to make a meal of that landing page your campaign is relying on. Therefore, you need to understand what content types you want to implement and what Shopify sections pair best with that content.
Understanding Content Types
All the content you want to display on a page should fall into one of the following categories:
Necessary text explanation: Text content that ranges from anywhere from a sentence to a couple paragraphs. This content needs to be there to accurately explain something. This could be a product or service description, a business purpose (usually headed as ‘Why?’ or ‘Why you should choose us’), or a charity initiative.
Content that can be adequately conveyed with an image: For the user, images are quicker and more enjoyable. If you can save writing a sentence or more with an image—do it.
Content that is best displayed with an image and text: This is pretty self-explanatory. When an image can’t serve the entire purpose of a piece of content, the additional text should provide the remaining context.
Data points and relevant facts your customers look for: These could be client retention rates, review ratings, contact information, “popular picks” etc.
Appropriate forms: Forms are technically ordinal data that encourages user engagement, can tailor the user experience and allow them to provide feedback. Common forms are contact forms, surveys or questionnaires, newsletter forms, event registration forms, service rating forms, or donation forms.
Pairing Your Content with Shopify Sections
Below we’ll be identifying different Shopify sections and explaining which type of content should feature in that section.
Featured Collections/Promotions: This type of section should be used to display information that needs one sentence to two paragraphs to explain the promotion. Images or icons can be included within featured collections, ensure that any image you upload is clearly relevant to your promotion.
The good thing about this type of section is that you can create it ahead of time, hide it, and have it ready-to-go when your promotion begins, activating it by simply unhiding it.
Images With Text Overlay: This section should be used to highlight key features, this should only be used if you feel adding text to the image is necessary. This section should be used when a sentence or more should be overlaid over an image.
Images With Text: Larger images that only require one or two images, this should be used to highlight a product category, collection, sale, or blog post.
Slideshows and Galleries: Used to display products.
Rich Text: This section is flexible in terms of what content you can plug here. We’ll go through some common uses below.
- Brand promotion: usually headered as an ‘About Us’ section
- Promotion through text: When you lack the time to find an image to use for promotion, replacing an image with adequate text is an option, but is not recommended
- Blog promotion: You cannot actually display your latest or relevant blog posts here. But you can use this section to link relevant blogs to the user. Especially if your users are unlikely to navigate to your blog
- Instructional content: This section provides a good opportunity to feature any content that requires you to explain something in steps, or provide tips
- Product promotion: Add an image of a top seller or new product that you want to push. This will appear above any text describing the product
Improving Page Readability
Pages that have a clear layout, are divisible to the reader and have aligned their content with the optimal sections to perform better.
To enhance your pages’ readability, your users should be able to effortlessly distinguish between the sections you’ve implemented. Why? Because your sections should have different purposes, therefore the user can easily find which section they’re looking for. They should know that they are scrolling from a slideshow to a newsletter form. Here are some tips to aid the user and create separation amongst sections and improve your pages’ readability:
- Do your best to avoid placing two of the same section in a row. However, if it’s the only way to display your content, do not cram that content into a different section, in this case, it’s acceptable to have the same section following
- Use different background colors to separate each section, high contrasting colors are the best
- Change the size, color, or font of the typeface you’re using. A slight change in size or even a shade lighter or darker enhances readability
- Place a divider section after each section, this is usually a bar that sits between sections, like an outline. This is only available if this section has been pre-built into your theme. Otherwise, you will have to implement this through custom CSS.
Current Sections Not Cutting it? Try a Custom Shopify Theme
Especially if you’re using a free Shopify theme, it’s likely that the pre-built sections are lacking in terms of what functionality they can provide, or simply lacking in originality. Perhaps your section layout is technically accurate in terms of inverted pyramid design and section to content alignment—but you still look the same as every other Shopify store.
This leaves you in a tough spot, you could try rearranging your Shopify sections, this could make your pages more original but will negatively affect your readability.
This is why many Shopify merchants will have a custom Shopify theme that is unique to their store. Custom Shopify themes have custom-built sections that align with your brand, have exactly what you need in terms of functionality and integration, are more scalable, and will increase your site speed.
Ultimately, custom themes play a large role in increasing user engagement. That’s where we come in, if you’re a fast-growing Shopify merchant looking to lead user engagement in your business niche, you can always hire Shopify theme developers from the team at CodeClouds.
Similar Reads
How can we help?
Tell us about your inquiry and we’ll get back to you as soon as we can.
