Product Pricing Tables

This component requires a short setup before you can fully customize it. Make sure you’ve already imported your WHMCS products and TLDs.

After adding the component you may see the following message: Loading Collection — Collection does not exist. This is expected and means the component still needs to be connected.

Instructions

1. Click the component.

2. In the right sidebar, open the Source → Select… dropdown and choose Products.

3. Select the Image

   • Connect the Fill via: + Content → Set Variable → Image

4. Select the Title

   • Connect the Content via: + Content → Set Variable → Name

5. Select the Text

   • Connect the Content via: + Content → Set Variable → Description HTML

6. Select the first ProductPriceDisplay in the table and connect the price by clicking:

   • Connect the Product ID via: + Content → Set Variable → Product ID

   • Connect the Fallback via: + Content → Set Variable → Price USD Monthly (or any other price and period)

7. Select the Product Button

   • Connect the Link via: + Content → Set Variable → Product URL

8. Now we’ll adjust some styling settings that depend on your CMS data. Start by selecting the Products collection in the Layers panel.

   • Connect Padding via: + Content → Set Variable → Featured → Equals

9. Connect Fill via: + Content → Set Variable → Featured → Equals

10. Select Product Item in layers

    • Connect Padding via: + Content → Set Variable → Featured → Equals

11. Select MOST POPULAR in layers

    • Connect Visible via: + Content → Set Variable → Featured