Customizing Bump Content SectionAdd Custom AttributeBump Content 2.0 :: CF Pro Tools Add-On Features For ClickFunnels Pages




Description and Best Use Case For This Add-On:


The video above shows a quick guide on how to use Bump Content 2.0 for your ClickFunnels 2.0 Checkout Element.



Please Note:  This is only for CF 2.0, if you want to customize bump content for CF Classic, please use the original BUMP CONTENT add-on.


Build formatted content for your bump box including, images, paragraphs, font formatting, videos, and more.




OVERVIEW (For Advanced Users)


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




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


Here are the steps to add your live domain into CF Pro Tools:


1. Open CF Pro Tools and navigate to the "Domains" tab. 


2. Identify and have the live domain ready, which is essential for the proper functioning of the add-on.


3. Within the "Domains" tab, add your live domain to ensure compatibility with the CF Pro Tools add-on.




4. Additionally, add your ClickFunnels subdomain ending with "myclickfunnels.com" to maintain functionality, especially if the live domain hasn't been assigned yet.


5. Confirm that the added domain and subdomain enable the add-on to work not just in a preview environment but also on the live page.



For best review, watch this video tutorial:




Step 2:   Set-up an order page and add product in CF 2.0


You will need an ORDER TYPE page installed in your funnel on CF 2.0 in order for this add-on to work.    


On your order type page, make sure you have a 2-step order element or a customized 1-step order form process in place.


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


https://cfprotools.freshdesk.com/support/solutions/articles/29000046159-set-up-an-order-page-and-add-product-in-cf-2-0




Step 3:   Identify Your Product ID


Check this video tutorial on how to identify your Product ID: 


If you want further written instructions on how to identify your Product ID, click this link:


https://cfprotools.freshdesk.com/support/solutions/articles/29000046171-steps-on-how-to-identify-the-product-id




Step 4:   Customizing Bump Content Section


Create a new section at the bottom of your page and create the customized content you would like to show up inside of your bump element area.


Here are the step-by-step instructions you need to take to create a custom area in your editor:


1. Add a New Section: Navigate to the bottom of the page in the editor. Find the green "Add Section" button and click on it.

 



Choose a full-page section or adjust the size according to your preference.



2. Add a New Row: Inside the section, click on "Add New Row" and select a one-column row layout. 



3. Add Content: Start adding content to the row. This can include images, graphics, videos, headlines, paragraphs, bullet points, etc. Customize the content as desired.

 



4. Adjust Row Settings: Click on the row settings.


Adjust the padding to remove it for the top, bottom, and sides. Set the width to 100%.

 



5. Customize the Appearance: Arrange and style the content elements to your liking, ensuring it looks visually appealing. And Click Save.



For best review, do watch the video tutorial below:




NOTE:  For multiple bumps, create an additional SECTION and each section will have it's own custom attribute to associate the section with the correct bump.




Step 5:   Add Custom Attribute


Here are the steps you need to take to add a custom attribute in ClickFunnels 2.0


1. Access the Section Settings: Identify the section that you want to move. Click on it to access its settings.


 


2. Navigate to Advanced Settings: Look for the "Advanced" tab within the section settings.


 


3. Add Custom Attribute: Find the option to add custom attributes. It may be labeled differently depending on your interface, but it should be something like "Add Custom Attribute."

 



4. Input Custom Attribute: Enter the custom attribute name, which in this case is "bump-content-product." Make sure it's all lowercase. Then, enter the value, which is the product ID obtained in a previous step (e.g., "69692").

 


Please note that your Product ID is not going to be my product ID. Make sure to identify your product ID and enter that in the Value block in Custom Attribute.




5. Verify Custom Attribute: Check that the custom attribute is correctly added and appears in the list of attributes with the specified value.

 



6. Save Changes: After adding the custom attribute, click on "Save" to apply the changes.




For best review, do watch the video tutorial below:








Step 5:   Create and Install Bump Content 2.0 Add-on in CF 2.0


You can now follow follow along in CF Pro Tools to create the BUMP CONTENT 2.0 add-on (make sure NOT to select BUMP CONTENT for CF 1.0, you should use the BUMP CONTENT 2.0) add-on.   This one where you are looking at these instructions below.

  • 1. Access CF Pro Tools: Log in to your CF Pro Tools account. Navigate to Add-Ons: Click on "Add-Ons" and then


  • Create New Add-On: Click on "Create New" or navigate to the dashboard and select "Create New Add-On" from there.



  • 2. Copy the Code: Once the add-on is created, copy the provided code.



  • 3. Return to Editor: Go back to the ClickFunnels editor.



  • 4. Access Footer Code: Click on "Code" at the top of the editor, then navigate to the 

  • footer code section.



  • 5. Paste the Code: Paste the copied code into the footer code section of your 

  • ClickFunnels page.



  • Save Changes: Click on "Save" to apply the changes. Preview the Page: Click on the preview button to ensure everything is working correctly.

  • Final Checks: Make sure to hide the bump headline, set the product as a bump in the manage products settings, leave the description blank, and add content to the bump pre-headline as needed.


Verify Two-Step Checkout: If applicable, test the two-step checkout process to ensure it functions as expected.






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