🎥 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 products source

Product elements can use products either added to ConvertFlow or Shopify.

ConvertFlow 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, redirect URL, etc. 

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

Shopify products

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

Important: Shopify products will only populate the products element when the CTA 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 .

The products element can display:

  • Products added to cart
  • Products related to a product (e.g. related to selected product, related to product in cart)
  • Products filter (search Shopify by name or tag)
  • Select products (manually select multiple products)

Controlling what happens upon selecting a product

Just like button, form and survey elements, the products element can have confirmation actions to perform when a product is selected.

To adjust the confirmation actions, with the products element is selected, click the blue button to the top right of the builder panel.

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

Applying discounts

You can display products with a discount by selecting a discount type (amount or percentage), and choosing the amount/percentage to visualize.

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

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 products element

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

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

Here you'll be able to adjust:

  • The products 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