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

  • Add Common Header to pages in the funnel

  • Add “Product Row” Element to Catalog pages

  • Sort Order

  • Create Menus in Common Page settings

  • Apply Collection Menus to Funnel Pages

  • Create Product Detail Page

  • Finish the rest of the funnel

    • Additional notes for finishing the funnel:

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.

Manual - Use the Product search bar to add the individual products into the collection.

Automatic - Use conditions to automatically add existing and future products to the collect who fit within the conditions.

If using Automatic, choose if the products that should be added to the collection should match ALL conditions or just ANY of the conditions.

Field : Product Name, Product Tag, Price, Compare at Price, Weight, Variant Title

Condition : Is Equal To, Is Not Equal To, Starts With, Ends With, Contains, Does Not Contain

Value : Enter in the value in which the condition should select the products.

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

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.

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

All of the products on the page will use the same styling as the box displayed here. Feel free to adjust the font, font size, font color, and any dimensional changes.

You can also add an Add To Cart button into the product box (make sure the button action is set to Add To Cart).

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.

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

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.

PreviousOffers and UpsellsNextCoupons