Product Collections

If you are building out your storefront inside of the CheckoutChamp funnel builder, you might find it easier to automatically populate the catalog pages with the appropriate products instead of having to manually set each product box to the appropriate items.

This can be accomplished within the funnel builder by using the Collections feature.

Create Collection

Inside app.checkoutchamp.com, edit to the funnel that you would like to add collections to.

Next, edit the funnel’s settings and click on Collections in the settings panel.

Inside the Collections page, create as many collections as you need by clicking the Add Collection button

Next, inside the “Create New Collection” screen, add a Title for the collection, a description, and then choose if the collection type should be Manual or Automatic.

After you add products to the Collection, you will see them listed in the Products section on the right side of the window.

Here is an example using the Automatic Collection Type with the conditions requiring that the products in the collection must be tagged with the “mens” tag. Due to the conditions, the products tagged as “mens” automatically loaded into the Products section.

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, remove any existing boxes that would contain your different products.

Next, replace each of those boxes with the “Product Row” element. This is found under the Products section of the building blocks.

Once you drag this onto the page, you will see a single product box surrounded by a larger “Product Row” element.

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)

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.

This will open a panel called “Main Menu Navigation”. On this panel, click “Add Menu Item” to begin creating your menu.

On the side panel that displays, create a name for the menu option (your customers will see this), choose how the menu should link (choose collection) & the collection that should should display, and also the page that the customers will land on after clicking the menu option.

This example below uses the Men’s collection from earlier in this document and routes the customers to the Men’s Catalog Page.

You can create as many menu options as needed.

You can reorder the Menu options by clicking and holding the three horizontal lines next to the Menu Title and dragging it to the desired location. Additionally you can also nest menu options under a parent menu option by dragging the menu to the right.

Here is an example of nested menu options under the Men’s and Women’s Collection:

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 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.