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