Product Accordion  :: CF Pro Tools Add-On Features for ClickFunnels




Description and Best Use Case For This Add-On:


The Product Accordion add-on gives you a new and unique way to display your products with additional product information in a sidebar.   

Works best with a customized 1-step order layout when using ClickFunnels as your funnel building software.


OVERVIEW (For Advanced Users)


For those of you ready to jump in and are familiar with CFProTools, you can use this checklist:


  • Add Your Domain To CFProTools DOMAINS TAB

  • Create An Order Type Page

  • Create a Customized 1-Step Order Form

  • Create and Install PRODUCT ACCORDION

  • Please reference on-page setup below for more information...

  • Known Conflicts:  Does not work with DEFAULT PRODUCT.



Step 1:   Add Your Domain To CF Pro Tools DOMAINS TAB


Your first step will be to add your domain to the CFPT Domains Tab.


Here's a guide on how to do that:


https://cfprotools.freshdesk.com/support/solutions/articles/29000041078-how-to-add-a-domain-to-cf-pro-tools-online-installation-guides




Step 2:  Create Your ORDER Type Page


You will need an ORDER type page in your funnel on ClickFunnels in order for this add-on to work.


This specific add-on will require a ONE STEP Order Form


Here's a quick tutorial on how to create funnel pages using ClickFunnels:


https://help.clickfunnels.com/hc/en-us/articles/360060380833-Creating-A-New-Funnel-Step



Step 3:  On-Page Configuration


There is no configuration on the CF Pro Tools side for this add-on, everything will come down to how you setup your ON-PAGE configuration as it's all customized to suit your needs, and a few CSS TITLE changes will be needed.   


For a detailed overview of the on-page setup, please watch this video:





For each of your products, you will create a SECTION.  


Each SECTION should have a unique CSS TITLE set as follows:


  • Product SECTION CSS TITLE:  cf-product-container-xxxxxxxx

  • The xxxxxx's are the PRODUCT ID for the product the section is associated with

  • Create as many SECTIONS (with three rows) as you have products


Each SECTION will contain 3 (THREE) ROWS.


  • Inactive Row (Product Is NOT Selected)

  • Active Row (Product IS Selected)

  • Product (Product Details To Be Expanded or Contracted)


You will need to give your rows and sections specific CSS TITLES...


  • Inactive Row:   cf-product-selector-inactive

  • Active Row:  cf-product-selector-active

  • Product:   cf-product-details


To update the CSS TITLE, go into the settings for each ROW or SECTION, and at the bottom of the settings area, click the "#" icon to bring up your CSS TITLES.





Once updated with the correct title, click UPDATE.




Step 4:  Create Your Add-on Script


For most add-on installations of the PRODUCT ACCORDION script, you can simply click the CREATE NEW button:



Please note:  You can use this script over and over for other pages without having to create a new and unique script.




... now do a keyword search for PRODUCT ACCORDION




Once you have located the PRODUCT ACCORDION script, click the thumbnail image and create the add-on per the installation instructions.



You will need to name your script.   We recommend a naming convention like this:

PRODUCT ACCORDION (Book Funnel)

It's best to name it with the name of the add-on and in parentheses make sure to name which funnel it belongs to so the script location can be identified later as needed.


Once you have completed this area, click the red button below to create your add-on script.




Step 5:  Install Your Add-on Script


You can now copy your newly generated script out by clicking the blue button where your script is located.

The button says, "COPY CODE", this will copy the script to your virtual clipboard.



You are now ready to paste the script into your FOOTER TRACKING CODE AREA.


This add-on script should specifically be installed on an ORDER type page.


Click SETTINGS --> TRACKING CODE




Now click the FOOTER CODE TAB, and paste your code in:



Now SAVE your page, you are ready to preview and test your new add-on!



Known Conflicts:


  • Does not work with DEFAULT PRODUCT


What To Do Next:


Here Are A Few Other Help Docs You May Wish To Check Out:


Chances are you already have a CF Pro Tools account and you can find all available resources, there:   app.cfprotools.com


However, if you have do not yet have a CF Pro Tools account, you will need one in order to take the actions in this help doc.   You can sign up at any time here:   www.cfprotools.com


If you have questions, you can also hit us up in support at support@cfprotools.com