Eight Themes Support Documentation

Introduction to page templates

Page templates are the foundation of your Online Store. Each unique template contains an organized collection of sections, carefully crafted to shape your storefront's appearance.

You can customize templates by adding, removing, and editing sections to match your store's style and needs.

Flow's templates include:

  1. Home page
  2. Product page
  3. Collection page
  4. Collection list
  5. Blog
  6. Blog post
  7. Cart
  8. 404 (error page)

Additionally, you can create theme Pages. Pages are essentially blank templates that you can customize and fill with a variety of theme sections. Some examples of website pages that are commonly built using Pages are About UsContact, and FAQs

FAQs page example (Crafted demo):

Crafted - Page.gif

In this guide, we'll explain the essential functions of each page template to help you determine the most effective way to utilize them for your store.


Home page

Your Home page is your store's main page. Home pages play a crucial role in establishing a positive first impression and providing customers with a comprehensive overview of what you have to offer.

You can display a variety of eye-catching sections to highlight popular products and collections, including Featured collection, Featured product, Collection list, Animated text, and Slideshow. These are all fully interactive sections, making direct navigation to the product or collection effortless!

Additionally, take full advantage of sections designed for captivating content, like Collage builder, Video header, and Image with text overlay to connect with your audience. The more you engage your customers, the more likely they are to spend time exploring your store.

Example (Luxe demo):

Luxe - Home Page.gif

 

To learn more about how to customize your homepage, read our tutorial on Introduction to sections.

Product page

Your Product page is the cornerstone of your Online Store. It's the go-to destination for customers seeking information to make informed decisions about a product. If the page effectively communicates everything a customer might want to know, visitors to your store will feel more inclined to add the item to their cart or go directly to checkout.

On this page, you have the flexibility to showcase a range of product media (images, videos, and 3D models) as well as product variants. You can change the variant based on the thumbnail, alter the product variant style, hide sold-out variants, and change the thumbnail position.

Furthermore, you can use Product form options to display a range of blocks, like the product description, stock level indicator, trust badges, star ratings, vendor, SKU, local pickup availability, dynamic checkout buttons, and more!

Product page example (Nourish demo):

Nourish - Product.png
 
Did you know? You can create custom Product page templates and assign them to specific products, so customers see different content depending on the product they select.

 

Note: The actual contents and configurations of a product are set up through the Products area of your Shopify admin dashboard. The template pulls this information and displays it inside the Product form.

Products.png

Collection page

A Collection page is designed to exhibit your collections - i.e. a specific category of products that you have grouped together. For example, a clothing store may have a collection just for t-shirts.

A single product can be featured in multiple collections across your store. For instance, a t-shirt might appear in a second collection that's been created for discounted products, and a third for summer clothing.

Collection pages help your customers find products more easily. And by using filters and sorting options, results can be narrowed down even quicker.

The Collection grid settings allow you to define the pagination type and determine the number of products displayed per row on both desktop and mobile platforms. Additionally, you can incorporate filtering/sorting options, and decide if you want to present your collection description to provide customers with more context.

Underneath each product, in addition to the product title and price, you can display additional information such as the vendor and a Quick shop button. Quick shop allows customers to conveniently add the product to their cart (or buy it now) directly from the Collection page!

Nourish - Collection.gif

 

Note: Collections are not controlled by the theme. They can be created either manually or automatically within the Collections area of your Shopify admin. Read Shopify's Collections help pages to learn more.

Collections.png

Collection list

You can utilize the Collections list template to showcase multiple collections on a single page - providing an effective way to highlight the diversity of your products.

Within the Collection list settings, you have the flexibility to present either all of your collections or add a select few in your preferred order. Customize the look of your lists by choosing the layout style (preview or grid view) and determining the number of products featured per row.

Example (Luxe demo):

Luxe - Collection List.gif
 
Note: Looking for your Collections list page on your storefront? Simply add /collections to the end of your site's main URL. For example: yourstore.com/collections

This URL is also the prefix to your catalog page. For example: yourstore.com/collections/all

Blog

Your Blog page lists and previews the posts within your storefront's blog, latest news, or press releases. Take full advantage of this space by adding extra sections to further personalize it.

Blog page example (Nourish demo):

Nourish - Blog.png
 
Note: Your blogs are managed within your Shopify admin settings under Online Store > Blog posts

Blog Posts.png

Blog post

A Blog post template showcases blog post content (also known as articles). Again, you can add more sections to this page to catch the attention of your readers and keep them reading for longer!

Example (Crafted demo):

Crafted - Blog Article Page.png
 
To learn more about the difference between a blog and a blog post, check out Shopify's help pages for Blogs.

Cart

Your Cart page (also known as the trolley or basket), serves as the virtual space where customers gather the products they wish to purchase while navigating your store. The Cart allows customers to review and make adjustments to the items they have added, such as increasing or decreasing the quantity.

While specific settings aren't available directly within the Cart, customization options are accessible under Theme settings. For example, you can offer customers a message note field to provide additional order instructions. There's also a designated space for adding a personalized gift message.

Like all other templates, you can add extra sections to show off products, collections, and content to try and extend your customers' visits to your store before they complete their purchases.

Example (Crafted demo):

Crafted - Cart Page.png
 
Note: The Cart is not the same as the Checkout. The Checkout is where payment and delivery details are processed. This is handled by the Shopify platform and is therefore outside the theme's control. Read Shopify checkout help pages to learn more.

Checkout

Your Checkout page template is controlled by Shopify's platform. As a result, there are no sections available for you to edit here. However, you can customize several visual elements of the checkout through your Theme settings.


404 page

A 404 page error can appear when a page is not found. This is typically due to manual URL typos or clicking on a link that doesn't correspond to any location on your site.

These errors commonly arise when links to products or pages are shared on external websites (e.g., social media) but have been altered or removed before the customer clicks on them.

We recommend adding a touch of personality to this page and offering various destinations for the customer to click on and get back on track. Landing on a 404 can be frustrating but you have an opportunity to make something fun and playful!

Example (Luxe demo):

Luxe - 404 Page.png

Thanks for reading! If you haven't checked out these guides yet, we highly recommend doing so to help you get the most out of your theme:

Was this article helpful?