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.

Simplifying mapping quiz answers to lots of product SKUs

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 (e.g. selecting mostly A answers will recommend Shopify collection A, and so on...).

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.