...
This can be accomplished within the funnel builder by using the Collections feature.
| Table of Contents |
|---|
...
Create Collection
Inside app.checkoutchamp.com, edit to the funnel that you would like to add collections to.
...
Once you are complete with the collection settings, click “Save & Continue” to save and close the window so you can make any other additional collections that you might need.
...
Add Common Header to pages in the funnel
Please follow this document to learn how to create a Common page inside the funnel and to create a Common Header which will be present across all the funnel pages that you decide.
...
Add “Product Row” Element to Catalog pages
Inside of each of your catalog pages, Add a Catalog Page to your funnel and edit the page to remove any existing boxes that would contain your different products. A separate Catalog Page should be created any time a Collection/Catalog has a unique design.
Next, replace each of those deleted boxes with the “Product Row” element. This is found under the Products section of the building blocks.
...
Click on the empty space of that Product Row element to choose how many columns should populate in each row, and also if the images should Lazy Load (only load images once the user scrolls and reveals the images)
...
...
Sort Order
In some cases, especially with larger stores, you may want to give your customers the option to sort the products displayed. This feature is built into the builder’s options.
...
To add this feature, add a new select to the page to your page above the Product Row.
...
In the select’s settings, choose the Name “Sort Order”. The sorting options will be automatically applied, so no need to set any of the options. Save the page. The sorting options will be available when the funnel is published.
...
Create Menus in Common Page settings
On the funnel visualizer, click on your Common Page and then click the settings gear, and then click Main Menu.
...
Once you are complete, click the “Save & Return To Funnel” button.
...
Apply Collection Menus to Funnel Pages
At this point you have now created your Collections, adjusted your funnel pages to use Collections, and created your Navigation Menu options.
The last steps now are next step is to edit and save your Common Page, even if all edits are complete. Saving the Common Page will apply the Common Header (and Common Footer) to all of the pages in the funnel which contain a header with the cartCommonHeader Id.
Once the funnel builder saves the Common Page, go back to the funnel visualizer and Publish the funnel.
| Info |
|---|
Any time you edit or add another page to the funnel with cartCommonHeader or cartCommonFooter, 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. |
...
Create Product Detail Page
Typically a Catalog page will display all the available products, and the customer can click on a product to view a Product Detail page for this specific product before adding it to the cart - especially if there variants on the offers. This Product Detail page is dynamic and has the same layout for all products.
To accomplish this, drag a Product Detail page to the funnel, select a template, and make any design changes that you would like.
Once you are complete, draw an arrow from each Catalog Page to the Product Detail page, and apply the Product Images option to the arrow(s).
...
...
Finish the rest of the funnel
Beyond your Catalog page(s), Common Page and Product Detail Page, you will also need to add a Shopping Cart page, a Checkout Page and a Thank You page. You can also add as many upsells as you see fit.
Additional notes for finishing the funnel:
Be sure to add buttons/link to navigate around the funnel, and use the arrow routings to determine which buttons/links will send the customers to which page.
Examples)
Your Shopping Cart page might have a “Continue Shopping” button which will redirect the customer back to a Catalog page.
Your Checkout Page might have a “Back to Cart” button which will redirect the customer back to the Shopping Cart page.
Your Shopping Cart page has an edit button, which will redirect the customer back to the Product Detail page for the appropriate product.
The Product Detail page can route customers to a Shopping Cart page, or directly to the Checkout Page. After you add a Shopping Cart page and a Checkout Page; use the arrow routings to set the View Cart button to redirect to the Shopping Cart page, and set the Buy Now buttons to redirect to the Checkout Page.
You can also add Buy Now buttons to your Catalog pages and route them to your Checkout Page using the arrow routings.