Collapse Menu
Classic Docs
Order Page Config, Design and Page Flow
Advanced Features
Subscriptions and Saasy
Contact Support

Displaying Multiple Products on One Page

Overview

This article will teach you how to display multiple products together on one common page. There are three ways that you can achieve this within SpringBoard, and each has its own benefits and drawbacks.

This article will teach you how to display multiple products together on one common page. There are three ways that you can achieve this within SpringBoard, and each has its own benefits and drawbacks.


Option 1: Using Containers

A quick and simple way to offer multiple products on one common page is to create a container page that lists all of the products that you associate with it. A container page contains radio buttons, drop-down menus and/or checkbox elements, which allow a buyer to choose to purchase other products that you offer. 

You should make sure that the products to be used in the container page are set up prior to creating the container page itself. After creating the container page, you will need to add your other related products.

You can create a container page by going to SpringBoard's Store Home » Products and Pages  » Create Container Page. For more information, see Creating Container Pages.

There is one main drawback to using containers to display multiple products in one common page.  There is not much that can be done to customize the layout of the page. FastSpring can style various elements with CSS, but if you are looking for a very specific layout, using containers is not the best choice. 

While you can display a description and an image on a container page, you can not display descriptions and images for individual products. You can add an image and a description for each Option Group, rather than each product within that group. To add a description to the products in the container page, go to SpringBoard's Store Home » Products and Pages  » select container » "Edit" Product Options » "Edit" Product.  Add a description in the description field, click close and then remember to click Save.

Option 2: XML Template Pages

Creating an XML template page is another option to display multiple products on one common page. They offer a great amount of flexibility in terms of page layout, but they are complex to create and maintain if you have lots of products or make updates frequently. They require some knowledge of xml, html and CSS.

You can create an XML template page by going to SpringBoard's Store Home » Product and Pages » Create Template Page.

One benefit of XML template pages is that they can use product names, prices, images, and descriptions you have already configured in SpringBoard.

If you would like to try to use XML template pages, but are not comfortable creating the XML page, we can help you with the setup process. Please open a support ticket and give us a detailed description of what you are hoping the page will look like.

For example, you could attach:

  • The layout mocked up in an html document
  • An image which gives a rough idea of your desired layout
  • Examples from other website stores that show what you want to attain
  • An over-all detailed description of the objects you want and where they are to be placed on the page

Please also send a list of the products in the order that you would like them to appear.  If we create an XML template page for you, it can get very cumbersome to manage with more than ten products. Every time you want to add, edit, or reorder products you will need to submit a new support ticket.

Option 3: Host the Page Yourself

If you want to create a page to display all products with descriptions and images, the best option is to create and host the page yourself.  Hosting the page yourself gives you the maximum amount of flexibility and control in terms of how you present your products together. It is also simpler to create and maintain your own page than to create and maintain XML template pages.

You can get a shopping cart style flow by linking to the product order pages as described under Products and Pages » select your product » View Additional Page Linking Options » Option 4 or 5. For more information, see page linking options.

You can also display multiple products on one page via cross-sells, which you can offer in various locations in the order process.
 

Container Pages

Container Pages can be used to create a catalog of your products, related products and services, and allow custimizable quantities for your customers. With a Container Page, you can:
  • list multiple products at once
  • list various versions of a single product

Create a Container Page

Go to SpringBoard's Store Home » Products and Pages  » Create Container Page

productsandpages.pngcreatecontainerpage.png

Enter in a name for your container page which will be displayed on your live page. If you are using a container page to offer multiple versions of one product, here is where you would enter in the description of the product and choose the file of a screenshot of the product. If you are using a container page to show multiple products, you most likely will not enter in information for the description nor should you choose a file of a screenshot.

containerpageinfo.png

Add Option Groups

To configure options for the product group contained in the container page, enter in a display name which will be the heading displayed for a specific group of options. For example, if you are offering types of licenses, one possible header would be "License Types." Then select a Selection Type (described below) for this group of options and click Next.

Select Types and Requirements

containerpageinfo_moreinfo_selection_type.png

 

One Selection:

This selection type allows the customer to select only one of the options you give them, using radio buttons. One example of a situation when this selection type is appropriate is offering license types for one product, such as:

  • student license and professional license
  • 1 user, 5 user, or 10 user licenses

Multiple Selections:

This selection type allows the customer to select multiple options you give them, using check boxes. The are many examples of a situation when this selection type is appropriate.  When you are suggesting configuration options to your customers, such as different plug-in options, extras, or support, you want your customers to be able to pick as many options as they want.  You might want to offer your customers the chance to also order some of your other products, so you want your customer to be able to pick whichever products they want.

Selection Type: Bundle / Auto-Select

This selection type will include the product options that you add, but the customer will be required to choose them because they are included in the order by default and cannot be de-selected. These are rarely used in a container page.

Selection Required

Leave this box checked if you want to require that the customer pick at least one of the options you provide, e.g. when you require that a customer choose a license type. 

Add Product Options to a Product Options Group

Now you need to add the options that your customer will see on your container page. Click Add Option. A box will pop up.

containerpageinfo_moreinfo_addoption.png

Choose the product that you want to include as an option in the option group. These products must already be set up in SpringBoard. Click Create.

containerpageinfo_moreinfo_addoption_choose.png

Click Add Option and repeat this process for all product options you want to offer. Remember to click Save when you have added all product options.

licne.png

The order in which your products appear in SpringBoard is the order in which they will appear in your container page. You can change the displayed ordering of option groups (if you add more than one group), and options within groups, by dragging the handles next to each item. Remember to click Save when you make changes to the display order.

licne2.png

If you go to store testing, you can see what your container page will look like. You can then go back and make changes.