Landing Page With Product Selection

Use this Quick Start to showcase your products in an engaging and informative way. Users can manually scroll between the six sections or engage with prominently placed CTA’s that jump the user to a comparison section at the bottom of the page. As users scroll through the experience users will be encouraged to engage with testimonials, product highlights, or details.

We recommend that you receive intermediate-level ion training before using this Quick Start because it requires familiarity with flow, in-page linking, and custom forms. Feel free to contact your customer success manager for a brief orientation if needed.

What You’ll Need to Get Started

• Content/copy for each section
• 1 large image
• 2 medium images
• 3 small images
• Data export

Get to Know This Quick Start

Here's a brief orientation to this Quick Start.

Landing Page with Product Selection

The introduction section of the landing page features a headline and subheadline that explain the content found within the experience. A prominently placed button within the hero navigates the user to the bottom of the page where they can compare up to four products. As users scroll through the page, this button remains sticky so that they can access the plans at any time. Below the hero, a medium size image is paired with copy and an additional button to move users to the compare section of the experience.  

A testimonial section includes four text boxes where users can read reviews or see benefits of purchasing one of the products. Below this section there is another descriptive section that includes a button to the plans.

A flow step section includes three buttons that navigate to the user between three services. This can be used to showcase three important benefits or features of the products.

The final section of the experience includes all four plans and includes pricing, descriptive copy, and a handoff link.

This page includes:

• Flow steps are leveraged to showcase important information without crowding the screen. For more information on the Flow Step component, click here.
• Header published into sticky container so it stays visible as respondents scroll down. For more information on sticky containers, click here.
• This page includes CTA’s that navigate the user to the bottom of the experience. For more information on in-page linking, click here.

Tips & Tricks

• We recommend you complete intermediate ion interactive training to use and modify this Quick Start because it contains sophisticated advanced rules and custom forms for the quiz. If you use this Quick Start with no custom modifications at all, expert skills are necessary.
• Everything within this experience can be edited by double clicking each page element. For more information on publishing & editing content within ion interactive pages, click here.
• You can adjust the layout of the page content by altering the grids, columns and rows that are published into the creative’s containers. For more information on working with grids, click here. We recommend intermediate ion training to adjust the layout of your pages.
• Update the placeholder form to one from your ion interactive Form Library. Double click the placeholder form and navigate through the Form Library to select your own form. This requires that you already have a form created in your library.
• Connect the form to your own pre-configured export, to ensure the data that is collected is exported to your external third party systems. For information on connecting your form to your exports click here, or for information on export options, click here.
• For this expert Quick Start we assume you will use an existing form from your ion interactive Form Library. For more information on creating forms with ion interactive, click here. We recommend intermediate training for form building.