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.

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.

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

This is useful for product quiz outcomes and personalized product recommendations, 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 product hero 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.