0

Your Cart is Empty

by Michael P. Hill April 04, 2017

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.
Michael P. Hill
Michael P. Hill

Michael P. Hill is a Shopify, Shopify theme, content marketing, digital marketing and product management expert based in Chicago. Follow him on Twitter at @michaelphill or connect on LinkedIn.

Need Support?

Please don't post support questions or issues as a comment on this thread, as we may not be able to process it in a timely manner. Instead, please visit our Help Center to browse frequently asked questions or submit a support request directly to our team.



Also in Shopify Theme Blog

Shifting into next gear: Turbo 2.1 fueled by new features, sections
Shifting into next gear: Turbo 2.1 fueled by new features, sections

by Michael P. Hill June 20, 2017 0 Comments

After blasting through the Shopify theme world not once , but twice  with Turbo, the Out of the Sandbox Shopify theme team is shifting the ultimate Shopify theme into the next gear — again.  The newest version of Turbo also represents a big shift forward with the theme’s dedication to speed and performance.
Read More
Anatomy of a Shopify theme product page: Getting started
Anatomy of a Shopify theme product page: Getting started

by Michael P. Hill June 14, 2017 0 Comments

It’s one of the most important pages on your Shopify store — but it’s surprisingly often one of the most overlooked parts. It’s also where your customers spend much of their time learning about your store and becoming engaged with your brand. What is it?

Read More
Shopify theme 911: What do when your Shopify theme breaks
Shopify theme 911: What do when your Shopify theme breaks

by Michael P. Hill June 06, 2017 0 Comments

It was a dark and stormy night.  You are just about to try a new app or add a customization to your Shopify theme . It seems simple enough, but one click later and your entire store is broken. While no one wants to be trapped in this scary story, it's bound to happen — but here are some strategies to use.
Read More
News & Updates

Sign up to get the latest on sales, new releases and more …