Although all of the previous Shopify sections we’ve covered in this series have specific layouts, there are two section types that are much more wide ranging and flexible — the rich text and image section and the page section.
New section: Rich text and image
The rich text and image section lets you quickly and easily add a block of content to the homepage:
- Each section can have an optional heading. If no heading is defined, the section height adjusts itself.
- Sections can optionally have an image that displays above the text. If no image is defined, the layout adjusts automatically.
- The section can also have an optional button that links to a location of your choice along with custom button text. If you do not indicate button text or a URL, the button does not appear.
- Each section also offers text size and alignment options.
- The body text of each section can include bold or italic text, but other formatting or image positioning is not available. It’s also not possible to include links within the body content (use the button for this, instead). If you need more advanced control, use the page section.
The exact look and feel of this section varies from theme to theme:
- In Turbo, the section appears with a horizontal rule separating the header and other content.
- In Retina, the content appears in the “Home page content background” color from your color selections under general settings.
- In Responsive, the heading text also features a horizontal divider line.
- In Mobilia, the section gets a simple layout with larger header.
- In Parallax, the section has a thicker separator line.
Using the rich text and image Shopify theme section
Here are some creative ways to use the rich text and image Shopify theme section:
- Promotions: The quick and straightforward layout of the rich text and image section make it a great option for creating eye-catching promotions for sales, specials or new products on the fly. Just write some catchy text, upload an image and link to the appropriate collection, product or page and you’re set.
- Text only promotions: Although adding an image is frequently an effective way to draw attention to a promotion, using text only can also be just as effective. This is also a great way to add content to your site very quickly when there’s no time to work on a design or find a photo.
- Blog: Use one of these sections for a space efficient way to link users to one or more of your blog main pages. Although you won’t be able to display the latest posts, this approach can reduce clutter while still spotlighting your blogs.
- About us: Use one or more sections to introduce customers to your company and products. To engage users to keep scrolling down, stack one rich text and image section on top of each other, with each section serving to tell a part of the story along with a corresponding image.
- Steps or how it works: Similar to the about us content strategy, this section type is great for stacking step-by-step content.
- Highlight a product: add one main image (perhaps an interesting shot of the product in use, rather than a typical "product shot") then list the product features or benefits and link to the product page.
- Add basic text anywhere: skip the image, headline and button and just use this section to insert bits of text anywhere you want on the homepage.
New section: Page
The page section is a more advanced approach to the rich text and image section and allows you to include custom HTML content inside a section.
To create content for this section, first create a page under Sales Channels > Online Store > Pages. Although you’re creating a separate page, think of it more as a “holder” for the content you’ll be creating.
Once you add a page section to your homepage and select the page you’ve created, the theme will “grab” the content from this page and output it on your homepage.
Note that the section will only use the content (and HTML code) from within the page content but won’t include the page’s header, navigation, sidebars or footer.
Using the page Shopify theme section
Here are some creative ways to use the page Shopify theme section:
- Advanced layouts: The page section type gives you the flexibility to use more advanced custom code, including columns created using our column grid.
- “Page within a page”: You can also use the column layout to create a page within a page — a large section with an effective layout that can provide users with information without having to load a separate page.
- Third party widgets: If you need to include a third party widget, such as a social media feed, video, map, certification badges or seals, you can paste in the provided code into the code view of the page content and then add it as a section to the homepage.
- App integration: Similarly, you can embed features from apps on your homepage using the same method. This often requires you to paste in a snippet of code, typically JavaScript, provided by the app developer.
- Display text with hyperlinks: If you know you want to have some of the words in a text section link to other pages in your shop or elsewhere, use this section rather than the Rich text and image section
- Insert a table: Use the page editing tools to create a page with a table (for example, for pricing, sizes or other content) then insert it on your homepage using the page section.
