The Scrollable Product Tour quickstart is a complete multipurpose one-page product tour for showcasing both digital and physical products. This template includes multiple interactive points, including: video for a product overview, and tooltips, accordions, tabs and flows to outline product features, resources, and testimonials.

  • Complexity: Medium
  • Experience type: Microsite
  • Use case: Sales Enablement

Features available

Here are the major features, abilities, and interactive elements used in this template.

  • Accordion
  • Animations
  • Counter
  • Flow
  • Form
  • Layered Tooltips
  • Lightbox Video
  • Tabs
  • Video Background

How-to use

Here is a helpful guide on how to handle all the major features, abilities, and interactive elements available to make the most out of this template.

>> Framing screenshots

Accordion

Step 1: To update the content within your Accordion, begin by selecting it on the canvas. 

Step 2: As a side note you are able to edit the Settings for the Accordion itself by always having the first section expanded, tagging each accordion section when it is clicked on (which is done by default), and closing an accordion section when anothis is expanded.

Step 3: Select an Accordion Section by clicking on it on the Canvas or by selecting in the Variables menu. Here in the Variables section you are able to update the Label for the specific Accordion Section, which is the front face title, and you are also able to provide it with a Tag.

Step 4: With the Accordion Section expanded on the Canvas, you can double-click on and edit the Text element, or add or remove content from within the Section.

Animations

Step 1: To change or remove an Animation, begin by selecting the element on the Canvas.

Step 2: To remove the Animation, click on the blue X to the right of the active Microtheme. To change the Animation, click on the Trigger dropdown above the active Animation and select a Trigger.

Step 3: From the second dropdown that appears, select an Animation from the available options.

Counter

Step 1: To change the odometer beginning or ending numbers, select one and open one of the three text elements.

Step 2: Within the Edit Text pop-up window, click on the source button.

Step 3: Here you can see a line of HTML code. Towards the beginning and end of the text we have our + and our % symbols. These can be replaced, removed or left alone.
data-delay dictates how many milliseconds the animation will delay before beginning to count up.
data-prev dicates the starting value of the odometer and data-val dictates the ending value.
The value 1, between the two less than and equal to signs (>1<), dictate what the default text that will be visible on the canvas within Creative Studio.

Step 4: Within the Page tab, click on the Scripts area to open the Edit Scripts pop-up window to verify that the correct scripts have both been added to the <head> and </body> areas.

Flow

Step 1: To update the content within your Flow, begin by selecting it on the canvas.

Step 2: Within the Flow, locate the first Flow Step at the top. Within this Flow Step is a one Row and three Column Responsive Grid. You can edit the contents within the columns, add content, or remove all of the content from the Flow Step.

Step 3: At the very bottom of the Flow is a numbered navigation that is used to indicate the active Flow Step and is also used as buttons to navigate through steps. You can remove this by visiting the Variables settings and removing the Microtheme. 

Form

Step 1: To change a field within your Form, begin by selecting the Form on the canvas.

Step 2: Select a field from within the form.

Step 3: Update the input’s Data Field within the Variables settings by clicking on it and then choosing a new Data Field from within the pop-up window.

Step 4: To change the Submit Button’s Behaviors begin by selecting it on the Canvas.

Step 5: Click on the Behaviors from within the Variables settings to change the Scroll To location. To remove the Behavior and add an Action, click on the trash can icon and then click on the + Actions button within the Variables settings.

Layered Tooltips

Step 1: To reposition the location of a Layered Tooltip, open the List tab, and then on the canvas, click on or in the area of one of them. Afterwards, use your up arrow key on your keyboard to navigate upwards until you see an Aqua Teal highlighted container with a link icon in the upper left corner of it. This lets you know that you have selected a Layer positioned element.

Step 2: Go back to the Edit tab and open up the Layout dropdown, and scroll down until you reach Position.

Step 3: Here you will see Layered selected in the dropdown, and below it two sets of toggles and three input fields.

Top & Bottom: Tell the web browser how close or far you would like to manually position the layered element from the top or bottom of the parent element. The Aqua Teal outline that we mentioned earlier represents the parent element, a.k.a the layered element’s boundaries.
Where Top and Bottom allow you to dictate the vertical position, Left and Right allow you to dictate the horizontal positioning.
We recommend using percentages for your inputs so that the tooltips will respond to the width of the parent element.

Step 4: In smaller viewports such as mobile, tooltips may not fit properly on the page and may overlap or get cut off. We recommend republishing the content in a more user-friendly format and placing the appropriate Show & Hide conditions on all elements.

Lightbox Video

Step 1: To change the Lightbox video, select the Lightbox element on your canvas.

Step 2: Open up the Content dropdown in your Variable settings.

Step 3: Click on the URL link to open the Edit Actions window. Then, select the page that contains the video that you would like to appear in your lightbox. You can select a page from the Creative by choosing from within the Go to Page tab, or you can choose the External URL tab and add a custom URL address.

Step 4: The page that contains your Lightbox video will be a page within your Creative and will most likely only contain a Video (Inline) element as seen here.

Tabs

Step 1: To update the content within your Tabs, begin by selecting it on the canvas.

Step 2: From the Variables settings, select a Tab tab dropdown that contains content within it. Like the Accordion you are able to edit the Label and a Tag.

Step 3: On the Canvas and within the Tabs content section, hover over the general area until you highlight the Tab Section and then select it. Within it there is currently a two column Responsive Grid, feel free to edit the grid itself, the contents within it’s columns, or remove it and in other interactive elements.

Video background

Step 1: To change the video background select the Video (Container Background) element on your canvas.

Step 2: Select your Video Type. Please keep in mind the Variable settings for each Video Type are slightly different.

Step 3: For your Video Placement select Background Container. This will set the video to take up the entire background of the parent container it is sitting in.

Step 4: Enter in your Video ID. This ID can be found at the end of your YouTube or Vimeo URL string. If your video does not show up after entering your string, you may have the video marked as private or unlisted on YouTube or Vimeo, and this setting will need to be changed there.

Content Writing Template

Here is the content structure’s template to make it easier for you when providing content guidelines or creating the copy for this template, from understanding the content structure to getting to know the amount of words needed to each text piece.

Related templates

If you like this template, you might want to check out these other similar models.

Have a question?

Still have questions or are facing troubles when handling this template? Please do not hesitate to send any additional questions to [email protected], so we can make sure to have this article constantly up to date.

Share this: