{"id":7651,"date":"2025-08-26T14:57:38","date_gmt":"2025-08-26T14:57:38","guid":{"rendered":"https:\/\/ioninteractive.com\/ionacademy\/?p=7651"},"modified":"2026-07-22T16:12:06","modified_gmt":"2026-07-22T16:12:06","slug":"product-demo-template","status":"publish","type":"post","link":"https:\/\/ioninteractive.com\/ionacademy\/product-demo-template\/","title":{"rendered":"Product Demo template"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Product Demo template lets you create an engaging, guided tour of your product with interactive tooltips and supporting content sections. Visitors can explore your product step by step, reveal key information, and finish with a clear call to action\u2014making it an ideal choice for product education, onboarding, or lead generation.<\/p>\n\n\n<p class=\"wp-block-paragraph\">Here\u2019s how to set it up and customize it for your content:<\/p>\n\n\n<h2 class=\"wp-block-heading\">What is the Product Demo Template?<\/h2>\n\n\n<p class=\"wp-block-paragraph\">The Product Demo template is an immersive, interactive walkthrough that highlights your product\u2019s features in an intuitive and engaging way:<\/p>\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Tooltip-Driven Tour: Upload a product image and add interactive tooltips that display small info boxes with explanatory text. Each tooltip includes a Next button, guiding users through the demo in a structured flow.<\/li>\n\n\n<li class=\"\">Guided Completion Screen: At the end of the flow, visitors reach a dedicated results page with your CTA message and button, encouraging them to take the next step.<\/li>\n\n\n<li class=\"\">Additional Content Sections, the template also includes:\n<ul class=\"wp-block-list\">\n<li class=\"\">Accordion for FAQs or feature breakdowns<\/li>\n\n\n<li class=\"\">Image + Text blocks for visual storytelling<\/li>\n\n\n<li class=\"\">Form section for lead capture or newsletter signup<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n<h2 class=\"wp-block-heading\">Step-by-Step Guide to Using the Template<\/h2>\n\n\n<h3 class=\"wp-block-heading\">Add Your Product Visual<\/h3>\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Upload a screenshot, UI mockup, or product image. With the image selected, click on the smaller version on the right side of the panel and once the popup box appears, click on \u201cReselect Image\u201d:<br\/><figure class=\"wp-block-image size-large\"><img alt=\"Current New Creative template filters\" decoding=\"async\" height=\"532\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/academy-current-20260722-new-creative.png\" width=\"3056\"\/><figcaption class=\"wp-element-caption\">The current New Creative screen provides template, complexity, industry, and use-case filters.<\/figcaption><\/figure><br\/><\/li>\n\n\n<li class=\"\">You can also create a new library category, just click on \u201cAdd Category\u201d, name it and drag and drop your images into the box.<br\/><figure class=\"wp-block-image size-large\"><img alt=\"Current icon selector\" decoding=\"async\" height=\"900\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/academy-current-20260722d-icon-library.png\" width=\"1600\"\/><figcaption class=\"wp-element-caption\">The current icon selector provides searchable global, campaign, and creative icon categories.<\/figcaption><\/figure><\/li>\n\n\n<li class=\"\">This template has show\/hide features, with the tooltip containers showing up below the image on smaller screens, make sure to also change them. Change your viewport to XS and update your content.<br\/><figure class=\"wp-block-image size-large\"><img alt=\"Current Reveal component settings\" decoding=\"async\" height=\"900\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/academy-current-20260722d-reveal.png\" width=\"1600\"\/><figcaption class=\"wp-element-caption\">The current Reveal component supports overlay or toggle behavior and click or hover triggers.<\/figcaption><\/figure><br\/><\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\">Customize Tooltip Position<\/h3>\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Using the Element Layers tab on the left side of the Creative Studio, select the item \u201cReveal\u201d.<br\/><figure class=\"wp-block-image size-large\"><img alt=\"Current Layers panel\" decoding=\"async\" height=\"900\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/academy-current-20260722d-layers.png\" width=\"1600\"\/><figcaption class=\"wp-element-caption\">Use Layers to inspect and select nested page elements.<\/figcaption><\/figure><\/li>\n\n\n<li class=\"\">Once selected, on the right side of the Creative Studio, change the tab from Settings to Design and open the Layout accordion under the Styles section.<br\/><figure class=\"wp-block-image size-large\"><img alt=\"Current Pages panel\" decoding=\"async\" height=\"900\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/academy-current-20260722d-pages.png\" width=\"1600\"\/><figcaption class=\"wp-element-caption\">Use Pages to navigate or add pages within the creative.<\/figcaption><\/figure><\/li>\n\n\n<li class=\"\">Scroll down to Position and adjust the location of your tooltip according to your liking.<br\/><figure class=\"wp-block-image size-large\"><img alt=\"Current Creative Studio\" decoding=\"async\" height=\"900\" loading=\"lazy\" src=\"https:\/\/ioninteractive.com\/ionacademy\/wp-content\/uploads\/2026\/07\/academy-current-20260722d-studio.png\" width=\"1600\"\/><figcaption class=\"wp-element-caption\">Creative Studio provides Design, Settings, Page rules, Layers, Pages, Preview, and Tag Map controls.<\/figcaption><\/figure><\/li>\n\n\n<li class=\"\">Use Preview to better check the position on all viewports.<br\/><br\/><\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\">Set Up Supporting Sections<\/h3>\n\n\n<ul class=\"wp-block-list\">\n<li class=\"\">Use the accordion for FAQs or additional context.<br\/><\/li>\n\n\n<li class=\"\">Add images and supporting text to highlight use cases or success stories.<br\/><br\/><br\/><\/li>\n<\/ul>\n\n\n<h3 class=\"wp-block-heading\">Test and Publish<\/h3>\n\n\n<p class=\"wp-block-paragraph\">Preview the walkthrough to confirm that tooltips display correctly, flows run in the right order, and the CTA screen works as intended. Be sure to test accordion interactions, text formatting, and form submissions to ensure a seamless experience across devices. Once everything looks polished, your product demo is ready to publish and share with your audience.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Product Demo template lets you create an engaging, guided tour of your product with interactive tooltips and supporting content sections. Visitors can explore your product step by step, reveal key information, and finish [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":9769,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","footnotes":""},"categories":[1088,2107,39],"tags":[],"class_list":["post-7651","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-content-driven-templates","category-ion-templates","category-the-templates-gallery"],"_links":{"self":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/comments?post=7651"}],"version-history":[{"count":1,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7651\/revisions"}],"predecessor-version":[{"id":7652,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/posts\/7651\/revisions\/7652"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media\/9769"}],"wp:attachment":[{"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/media?parent=7651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/categories?post=7651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ioninteractive.com\/ionacademy\/wp-json\/wp\/v2\/tags?post=7651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}