🎥 Products elements - How to build product recommendations

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.

Choosing the product source

First, select the products element and then click the "Manage Products" button.

Next, select the product source you'd like to use. Product elements can use products either added to ConvertFlow or Shopify. 

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:

  • Shopify products added to the cart
  • Shopify products in a collection
  • Shopify products related to a product (e.g. related to a selected product, related to a product in the cart)
  • Shopify products filtered by name or tag
  • Manually selected Shopify products

Important: Shopify products will only populate the products element when the campaign is displaying on your Shopify store because ConvertFlow's Shopify products source is powered by Shopify's product recommendations engine, which isn't available on web pages that are not your Shopify store. For your Shopify products to display on your ConvertFlow landing pages, you’ll want to choose your Shopify store as the page’s domain name .

ConvertFlow custom products

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

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

You can also add multiple variants that can be selected through a dropdown.

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 survey 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, or by adding custom products if using the ConvertFlow custom products source.

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

Controlling what happens when clicking a product

You'll then be able to select what you'd like to happen upon selecting a product, such as redirecting to the product page or adding the product to the cart.

You can also adjust other settings, such as:

  • Providing a discount code to apply to the Shopify cart upon redirecting
  • Triggering automations (e.g track event in Klaviyo)
  • Firing scripts (e.g conversion pixels)
  • Adding conditional actions

Configuring discounts

You can display products with a discount by selecting a discount type to visualize (amount, percentage or product sale/compare at price), and choosing the amount/percentage to visualize if applicable.

Pro tip: When adding custom products to the ConvertFlow product source, you can set a relative discount (amount or percentage) for all products, as well as set fixed sale prices for individual product, to override the relative discount.

With Shopify products, you can have a discount code automatically applied upon redirecting to the product or the cart, by entering it in the discount code setting in the confirmation actions.

Styling the product element

Product elements can be styled using the campaign theme tab (which applies to all product elements in the campaign), or by adjusting the design settings directly upon the product element.

To do this, select the product element and scroll the builder panel down to "Design".

Here you'll be able to adjust:

  • The product layout (grid or vertical list)
  • How many products can show, how many per row, container width, spacing between products, product background color, borders, shadows, etc.
  • Product image height
  • Text and button styling