Common Page Elements
- Tyler Martorano
- Chris Rivera
When working on a funnel, you may find that it would be easier to manage the styling of a header or footer element in a single place instead of going into each page and making the adjustments.
This can be accomplished within the funnel builder by utilizing the Common page type, which can be found towards the bottom of the page type selection on the funnel visualizer.
Once you drag the Common page to your visualizer, click on the settings gear to select a template.
On the page, drag a Header, Footer, or Order Bump element if there is not one present.
Common Header
After dragging the Header element to the page, click on the element and view the settings. Inside the settings, set the Id to “cartCommonHeader” (without the quotations).
The default Header element contains a single menu option which is linked with CheckoutChamp’s Common Menu feature. This single place holder will be replaced with all of the Common Menu options that you have created. Each of the Common Menu options that you create will follow the same styling as the single menu option inside the builder.
If you are creating a Common Menu, do not duplicate the single menu placeholder as this will cause multiple sets of your Common Menu to appear on the page.
If you are not creating a Common Menu, you can remove the single menu placeholder and drag new elements to the Header.
For more information on Common Headers, please view this article.
When you are finished, save and exit the Common Page.
Next, go into each page of the funnel that you want to share the same Header as the Common page and add a Header element if one does not exist yet.
From there, open the settings of the Header and set the Id here to cartCommonHeader as well.
Once you are done setting cartCommonHeader to all of your pages, go back to the Common page once more and save the page. This will then save the common header to all the pages that you added cartCommonHeader to.
Any time you edit or add another page to the funnel with cartCommonHeader, you must go back into the Common Page to save.
Any time you save the Common Page, you must publish for those changes to take effect on the live site.
Common Footer
After dragging the Footer element to the page, click on the element and view the settings. Inside the settings, set the Id to “cartCommonFooter” (without the quotations).
You might need to use the Up Arrow on the element tool bar to ensure you have actually selected the Footer. The Settings panel will show “Selected: Footer” if you have selected the footer.
When you are finished, save and exit the Common Page.
Next, go into each page of the funnel that you want to share the same Footer as the Common page and add a Footer element if one does not exist yet.
From there, open the settings of the Footer and set the Id here to cartCommonFooter as well.
Once you are done setting cartCommonFooter to all of your pages, go back to the Common page once more and save the page. This will then save the common footer to all the pages that you added cartCommonFooter to.
Common Order Bump and Order Bump Variants
After dragging one Order Bump or Order Bump Variants element to the page, click on the element and view the settings. Inside the settings, set the Id to “commonOrderBump” or “commonOrderBumpVariants“ respectively (without the quotations).
When you are finished, save and exit the Common Page.
Next, go into each page of the funnel that you want to share the same order bump as the Common page and add an order bump element if one does not exist yet.
From there, open the settings of the order bump and set the Id here to “commonOrderBump” or “commonOrderBumpVariants“ depending on the type of element chosen.
Once you are done setting commonOrderBump or commonOrderBumpVariants to all of your pages, go back to the Common page once more and save the page. This will then save the common order bump to all the pages that you added the respective commonOrderBump or commonOrderBumpVariants to.