How to “Highlight Product” in CartFlows Checkout Page?

Highlight Product lets you draw attention to a specific product variation on the CartFlows checkout page by applying a visually appealing layout. This feature displays a selected product prominently based on the settings you choose in the checkout step’s product options.

This documentation will guide you through using the Highlight Product feature and customizing it for your checkout page.

What is Highlight Product?

The Highlight Product feature allows you to emphasize a chosen product variation on the checkout page. This helps draw customer attention to specific products or variations you want to promote.

Note: This feature works only on the CartFlows checkout page when the Product Option toggle is enabled from the Product Options tab.

Accessing Product Options

1: Navigate to Checkout Settings > Products to view all products added to the checkout.

2: Click the small settings icon next to a product to access its product-specific options.

3: Here, you will find the Highlight Product option.

Available Product Option Settings

• Selected Products: Displays all products selected for the checkout.
• Shortcodes: Use these shortcodes in the product subtext for dynamic content:
  • {{product_name}} – Displays the product name.
  • {{quantity}} – Shows the selected quantity.
  • {{discount_value}} – Displays the discount amount.
  • {{discount_percent}} – Shows the discount percentage.
• Product Option Conditions: Set rules for displaying the highlighted product and variations.

Layout Options

In the checkout step settings, go to Design > Product Options to customize the layout:

• Section Title: Change the title of the product options section.
• Section Position: Place the section before checkout, after customer details, or before order review.
• Skin: Choose between Classic and Cards layout styles.
• Show Product Images: Toggle product image display on or off.

Design Options

Use the design settings to customize colors and styling of the Highlight Product section, including text and background colors.