The product hero element makes it super easy to create product heroes that showcases 1 product from your store, which is perfect for product landing pages and headless funnels.

Want to showcase multiple products together? Use the products feed element instead →

To add a product hero element, click to create an element and click the "Product Hero" element. Either choose a template, or create from scratch.

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

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 Shopify product shows conditionally, or by adding a custom product if you're 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 products A/B/C/... efficiently by positioning the quiz answers alphabetically (e.g. selecting mostly A answers will recommend Shopify collection A, and so on...).

Choose whether you want the product hero to have the image on the left or right.

Then, toggle product content such as title, price, description, quantity selector, reviews, variant pickers, subscription plan options, offer badges, and more.

Click to edit the title, description, etc. to fine-tune copy by overriding the Shopify product title and description with your own content.

Showing discounts

You can display 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.

Your product hero can be styled at once using the theme tab. Style the container sizing, padding, border, fonts, sizing, etc.

You'll need to configure what happens upon click the product button, 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.

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