Products elements let you showcase multiple products together to redirect shoppers to product pages, or add products to their cart and drive them to checkout.

Want to showcase just 1 product hero? Use the product hero element instead →

To add a products element, click to create an element and click the "Products" element. Either choose a template, or create from scratch.

First, select the product source you'd like to use. Product elements can use products either added to ConvertFlow or your connected ecommerce platform, such as Shopify.

Filtering Shopify products

If you have Shopify connected to ConvertFlow, you'll have the option to choose "Shopify" as a product source. This allows for the products element to dynamically populate with Shopify products when the products element is displayed on your Shopify store.

The products element can display:

Adding ConvertFlow custom products

These are custom products added to ConvertFlow, meaning they don't rely on an external integration to display.

You can add custom products, and adjust their title, price, image, description, product URL, etc.

Conditional product recommendations

Using the product element's conditional recommendations feature, you can conditionally show products.

This is useful for product quiz outcomes and product recommendation feeds, where you want to dynamically recommend products based on conditions, without having to create separate campaigns or funnel steps.

Start by clicking to add a "conditional product recommendation".

Once you've added a conditional product recommendation, you'll want to click to add conditions for the product recommendation scenario.

For example, you may want to have conditional product recommendations based on answers from your product quiz.

You can add as many conditions as you'd like using ConvertFlow's entire selection of targeting conditions, as well as control whether ALL conditions or ANY condition must be met for the product recommendation to show.

Once you've set the conditions up for your conditional product recommendation, you'll then want to configure which products should conditionally by controlling the Shopify products filter (e.g. Shopify product collection A), or by adding custom products if using the ConvertFlow custom products source.

Add as many conditional product recommendations as you need to the products element to dynamically show the right products to each of your shopper segments.

Using the quiz auto recommendation filter

By using the "Quiz Auto Recommendation" product filter, ConvertFlow will automatically use answers submitted to your quiz questions and custom fields, to filter products in your catalog.

You can toggle between products matching ANY or ALL answers, to set how strict you want the product recommendations to be.

If there are any quiz questions or custom fields that you don't want to be considered in your product recommendation, select them using the exclusion dropdown setting.

Using A/B/C mapping

To quickly map quiz answers to product recommendations when building long and complex product quizzes, you can use "If answers are mostly A/B/C" conditions to map lots of answers to multiple product recommendations, based on each answer's alphabetical order.

This way, you can map answers to product collections A/B/C/... efficiently by positioning the quiz answers alphabetically.

Example: selecting mostly A answers will recommend Shopify collection A, and so on...

Advanced: Query using quiz answer merge tags

ConvertFlow's Shopify products filter supports adding merge tags to the setting, so you can combine quiz answers and other keywords to build product queries.

When using this method, you'll want the values of your quiz answers to map to how your products are named.

Example: {apparel_type} to only show hoodies, if the shopper selects hoodie.

You can also use merge tags to filter product variants.

Example: {shirt_size} to only show small sizes if the shopper selects small.

Pro tip: When using comma separate values or merge tags in product filters, you can configure the filter if the product name contains all keywords, or any keyword, by toggling the AND/OR operator.

When editing the products element, scroll down to control how many products show, as well as which content shows for each product.

Toggle product content such as the product title, image, price, reviews (from Yotpo, Okendo, etc), description, product variant pickers, quantity selector, subscription options, and a button for each product.

Showing discounts

You can display products with a discount by clicking to edit the price, and then selecting a discount type (amount or percentage), followed by choosing the amount/percentage to visualize. This can optionally visualize a discount already being shown by Shopify.

All of your product elements can be styled at once using the theme tab. Style the container sizing, padding, border, fonts, sizing, etc.

Styling the layout

To toggle between a vertical or horizontal products layout, click to the "Design" tab while editing a products element.

You'll need to configure what happens upon selecting a product, such as redirecting to the product page or adding the product to the cart.

Click to the "Actions" tab while editing the products element. Then edit the default action.

You can also adjust other settings, such as:

When the button is set to add the product to cart, you can also control the button that displays after the product has been added to cart.

The 2nd button click can be configured to redirect to cart, to checkout, to another funnel step, etc.