Lagom WHMCS Client Theme Documentation
Docs v2.x
/ /website-builder/ /extensions/ /module-integration/ /order-form/

# Section Product Groups

Welcome to the documentation article on utilizing "Product Groups" (see demo) (opens new window) boxes with Lagom WHMCS Website Builder. In this guide, we'll walk you through the seamless process of incorporating and optimizing "Product Group" boxes to showcase your offerings effectively. Learn how to leverage this feature to organize products, personalize packages, and create a visually appealing website that captures your audience's attention.

# Section Description

  1. Caption - Caption text shown above section title. Leave this field empty if you do not want to display that element.
  2. Title - Section title placed in <h2> tag. HTML tags are allowed in that field.
  3. Subtitle - Section subtitle, placed below section title. Leave this field empty if you do not want to display that element. Content can be customized using text editor.

# Product Group List

# Product Groups

Presents inventory of product groups that have been included in this section and are set to be showcased on the website page. This compilation provides you with the ease of organizing items through a simple drag-and-drop mechanism, enabling you to finely tune their order as needed.

  1. Product groups - List of product groups added to this section.
  2. Edit - The "Edit" button opens a modal where you can personalize already added "Product Group" to the list.
  3. Remove - Remove "Product Group" from the list.
  4. Add New - Add new "Product Group" item to the list.

# Add/Manage Product Group

# Choose Product Group

When "Add New product" modal will be shown, you wil be asked to choose the "Product Group". This select list product which has been configured in WHMCS "Product and Services" (opens new window) page.

# Product Group Title & Description

Product group title and description is automatically loaded from WHMCS database, and these fields can not be managed via this modal.

  1. Title - Can be managed via WHMCS product configuration page. Title load string from "Product Group Name" (opens new window) field. To manage this element click on the "Edit" button next to the field label.
  2. Description - Can be managed via WHMCS product configuration page. Title load string from "Product Group Tagline" (opens new window) field.

# Linked Page

Choose the WHMCS page or CMS page to which a specific product group will be linked. You can select from a comprehensive list of all available WHMCS pages and CMS pages to seamlessly integrate your product group.

# Show Graphic

When the "Show graphics for this item" option is turned on, a list of available icons and graphics will be displayed. Learn more about "Media Modal".

# Advanced Settings

Custom Class - Adds custom class to the product package container, which lets you to write your own CSS rules, to modify our product based on your requirements.

# Group Product Groups

The "Group" option enables you to generate multiple product groups, which will subsequently appear on the frontend as distinct tabs.

Take a look at an illustrative example of how these groups might be presented on the resulting website page.:

# Manage Group

  1. Group Name - Set the group name, which then will be shown as "tab", above "Feature" items list.
  2. Close/Edit - Click to hide or expand management options.
  3. Remove - Click to remove group and its items. IMPORTANT: all "items" from this group will be removed.
  4. Add Group - Click to create new group, where you can assign new Feature items.
  5. Product Groups - List of "Product Group" items assigned to specific group.
  6. Group Heading - Second group heading, when "management" options are hidden.

# Product Group Settings

# Product Group Type

Choose the appearance of the product boxes on your generated website page by selecting one of the predefined types from the provided list.

# "Type 1" - Package with big price and "Learn More" button

# Product Group Style

Choose the style for the created packages to determine how you want them to be displayed on the generated website page.

# "Boxed" Style

# "Bordered" Style

# Product Group Slider

The "Product Group Slider" feature empowers you to determine the screen resolutions at which the product packages will be displayed as a slider. This option proves beneficial especially when you have a substantial number of products to showcase, and you aim to prevent excessive page length.

When enabled you'll see additional multi select field, where you'd be able to choose multiple options from below list

  1. All - Slider will be visible on all screen resolutions.
  2. Desktop - Displayed on screens wider than 1320px.
  3. Tablet horizontal - SDisplayed on screens with widths ranging from 992px to 1319px.
  4. Tablet vertical - Displayed on screens with widths ranging from 768px to 991px.
  5. Mobile - Shown on screens with width smaller than 767px.

Here's an example of how the slider featuring "Product" packages appears on the generated website page:

# Price Display

The "Choose product group price display" option allows you to decide what pricing should be shown for selected product group box.

# Product Columns

  1. Columns on desktop - Define the number of columns for features displayed on screens wider than 1320px.
  2. Columns on tablet horizontal - Specify the number of columns for features displayed on screens with widths ranging from 992px to 1319px.
  3. Columns on tablet vertical - Choose the number of columns for features displayed on screens with widths ranging from 768px to 991px.
  4. Columns on mobile - Set amount of columns with features, shown on screens with width smaller than 767px.

# Section Actions

In this section you are able to add additional CTA buttons which will be shown below product boxes. Learn more how to add buttons using Add Button Manager modal.

# Section Advanced Settings

  1. Combine This Section With Section Below - When activated it will remove bottom padding and border from this section. This setting was designed to combine two sections into single section - learn more.
  2. Overlay Section Below on This Section - This setting pull below section over this section, moreover it adds additional bottom padding - learn more.
  3. Product Custom Class - Allows you to assign custom class to all product packages added to this section.
  4. Section Anchor - Allows to set name for the section anchor, which then could be used, to link people to specific section - learn more.
  5. Section Custom Class - This setting assign custom classes to the section container - learn more.

# Tips

# Product Discount Calculation

Our product include a powerful feature that illustrates to customers which billing period offers the best value. This tool is particularly useful for resellers who wish to demonstrate the cost-effectiveness of different billing cycles.

If you do not wish to utilize this function, our Hide Billing Cycle Discounts feature lets you disable the discounts on your pages.

Within the "Products/Services" settings under the "Pricing" section in WHMCS system, you can set up various billing periods such as monthly, quarterly, and semi-annually.

Our feature calculates the monthly cost for each billing period and compares it to the price of the product for the first billing cycle.

Here is how the discount calculation is presented, using example product prices:

Billing cycle and its price Price per month How much % profitability relative to the monthly price
Monthly ($4.69) $4.69 -
Annually ($53.47) $4.46 ($53.47 / 12 months) 5% cheaper relative to the Monthly price
Biennially ($101.30) $4.22 ($101.30 / 24 months) 10% cheaper relative to the Monthly price
Triennially ($143.64) $3.99 ($143.64 / 36 months) 15% cheaper relative to the Monthly price

The greatest savings (15%) are realized when customers choose the triennial billing cycle.

← Section Product Comparison →