Product and Services Page Templates

On your website you should tell users what you offer in terms of services or products. It is also important that you ensure that the user can quickly get an overview of your various services/products. If you have a lot of products or services, categorize them in a way that makes sense and use summary pages with links so a visitor can quickly click through to find what they are looking for.

1: Product Page - Category Level | Example One

Below is an example of a category-level product page with a Jumbotron at the top. Note that we've hidden this module in the mobile view and replaced it with a simple headline module that works better in the mobile format.

Click on Enlarge below the image to see the modules explained.

2: Product Page | Example One

This product page is built in a two-column page layout. On the left side the product is described and on the right side a fact box followed by supporting download modules. Note that in the mobile version the right column stacks underneath the product description modules. The Gallery module is placed at the bottom of the page (below the two column placeholders) and therefore is placed at the end of the page in both desktop and mobile versions.

Click on Enlarge below the image to see the modules explained.

3: Product Page - Category Level | Example Two

For a more visual introduction to the page, you can use a Jumbotron with Text in a Box module. Note the text box moves under the image in the mobile view.

Click on Enlarge below the image to see the modules explained.

4: Product Page | Example One

Here you can see an example of a longer product page broken up with the use of full-width modules. 

Click on Enlarge below the image to see the modules explained.