The downloaded package for the module is a .zip archive that needs to be unzipped before use. After it has been unzipped, inside the downloaded package you will find:

  1. the module's .zip archive - must to be installed using EXTENSIONS/MANAGE/INSTALL
  2. the ReadMe.txt file - has useful information about the product

Once installed, find the module in EXTENSIONS/MODULES and open it:

FavProducts Joomla module documentation main screen

MODULE SETTINGS - this tab controls the general settings, the ones that apply to all elements of the module.

MODULE CONTENT - this tab controls the individual settings for each element of the module such as images, text or title for each one of the products.

Module Settings

1. Module Layout

FavProducts Joomla module documentation settings main

  1. LOAD JOOMLA! JQUERY - This setting loads Joomla!'s jQuery library. Choose NO if your website loads jQuery from an external source.
  2. NUMBER OF COLUMNS - Choose the number of products on each row.
  3. LAYOUT EFFECT - Choose a CSS3 effect for the layout on page scroll and load. Note that the CSS3 features are not supported by older browsers.

2. Display module elements

FavProducts Joomla module documentation settings module elements

  1. SHOW IMAGE - Choose if the image for the products should be displayed or not.
  2. SHOW TITLE - Choose if the title for the products should be displayed or not.
  3. SHOW DESCRIPTION - Choose if the description for the products should be displayed or not.
  4. SHOW PRICE - Choose if the price for the products should be displayed or not.
  5. SHOW SEPARATOR - Choose if the separator for the products should be displayed or not.

3. Image Options

FavProducts Joomla module documentation settings image

  1. IMAGE BORDER COLOR - Choose the color for the border of the product image. A blank field reverts the setting to the default value.
  2. IMAGE BORDER WIDTH - Insert the border width for the product image using pixels (for example: 1px, not 1). A blank field reverts the setting to the default value.
  3. IMAGE BORDER TYPE - Choose the border type for the product image.
  4. IMAGE BORDER RADIUS - Insert the border-radius for the product image using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.
  5. IMAGE MAX HEIGHT - Insert the maximum height for the product image using pixels or percent (for example: 140px or 80%, not 140). A blank field reverts the setting to the default value.

4. Title Options

FavProducts Joomla module documentation settings title

  1. TITLE GOOGLE FONT - Insert the name of the Google Font for the title of the products, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  2. TITLE FONT WEIGHT - Set the font weight for the title of the products.
  3. TITLE FONT STYLE - Set the font style for the title of the products.
  4. TITLE FONT SIZE - Insert the font size for the title of the products using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  5. TITLE LINE HEIGHT - Insert the line height for the title of the products using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  6. TITLE TEXT ALIGN - Choose the text align for the title of the products.
  7. TITLE TEXT TRANSFORM - Choose the text transform for the title of the products.
  8. TITLE MARGIN - Insert the margin for the title of the products using pixels or percent (for example: 14px or 10%, not 14). The margin is a CSS property that sets the space around the content, including the padding. The margin can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.

5. Description Options

FavProducts Joomla module documentation settings description

  1. DESCRIPTION TEXT LIMIT - Select the maximum number of characters that will be displayed from the product's description. The text will be trimmed to the last full word.
  2. DESCRIPTION TEXT GOOGLE FONT - Insert the name of the Google Font for the description of the products, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  3. DESCRIPTION FONT WEIGHT - Set the font weight for the description of the products.
  4. DESCRIPTION FONT STYLE - Set the font style for the description of the products.
  5. DESCRIPTION TEXT COLOR - Choose the color for the description of the products. A blank field reverts the setting to the default value.
  6. DESCRIPTION TEXT FONT SIZE - Insert the font size for the description of the products using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  7. DESCRIPTION TEXT LINE HEIGHT - Insert the line height for the description of the products using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  8. DESCRIPTION TEXT ALIGN - Choose the text align for the description of the products.

6. Badge Options

FavProducts Joomla module documentation settings badge

  1. BADGE TEXT GOOGLE FONT - Insert the name of the Google Font for the badge for the products, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  2. BADGE FONT WEIGHT - Set the font weight for the badge for the products.
  3. BADGE FONT STYLE - Set the font style for the badge for the products.
  4. BADGE FONT SIZE - Insert the font size for the badge for the products using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  5. BADGE LINE HEIGHT - Insert the line height for the badge for the products using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  6. BADGE TEXT ALIGN - Choose the text align for the badge for the products.
  7. BADGE TEXT TRANSFORM - Choose the text transform for the badge for the products.
  8. BADGE BORDER RADIUS - Insert the border-radius for the badge for the products using pixels or percent (for example: 140px or 80%, not 140). Note that the CSS3 features are not supported by older browsers. A blank field reverts the setting to the default value.

7. Price Options

FavProducts Joomla module documentation settings price

  1. PRICE TEXT COLOR - Choose the color for the price of the products. A blank field reverts the setting to the default value.
  2. PRICE TEXT GOOGLE FONT - Insert the name of the Google Font for the price of the products, for example Open Sans or Roboto. A blank field reverts the setting to the default value.
  3. PRICE TEXT FONT WEIGHT - Set the font weight for the price of the products.
  4. PRICE TEXT FONT STYLE - Set the font style for the price of the products.
  5. PRICE TEXT FONT SIZE - Insert the font size for the price of the products using pixels, percent or em (for example: 14px, 120% or 1.2em, not 14). A blank field reverts the setting to the default value.
  6. PRICE TEXT LINE HEIGHT - Insert the line height for the price of the products using pixels or em (for example: 14px or 1.2em, not 14). The line-height property is used to modify the spacing between the lines of text. A blank field reverts the setting to the default value.
  7. PRICE TEXT ALIGN - Choose the text align for the price of the products.
  8. PRICE TEXT MARGIN - Insert the margin for the price of the products using pixels or percent (for example: 14px or 10%, not 14). The margin is a CSS property that sets the space around the content, including the padding. The margin can have from 1 to 4 values (top, right, bottom and left). A blank field reverts the setting to the default value.

8. Separator Options

FavProducts Joomla module documentation settings separator

  1. SEPARATOR BORDER COLOR - Choose the color for the border of the separator line for the products. A blank field reverts the setting to the default value.
  2. SEPARATOR BORDER WIDTH - Insert the border width for the separator line for the products using pixels (for example: 1px, not 1). A blank field reverts the setting to the default value.
  3. SEPARATOR BORDER TYPE - Choose the border type for the separator line for the products.

Module Content

1. General Options

FavProducts Joomla module documentation content main

  1. USE HIKASHOP CATEGORY - Use data from a specific HikaShop category. This will disable all the other product or custom content fields.

If one of the HikaShop categories will be selected, then the general options available for FavProducts will change:

FavProducts Joomla module documentation content general

  1. USE HIKASHOP CATEGORY - Use data from a specific HikaShop category. This will disable all the other product or custom content fields.
  2. NUMBER OF DISPLAYED PRODUCTS - Select the maximum number of products you want to display from that particular category. Please leave this field blank for displaying all the category products.
  3. ORDER CATEGORY PRODUCTS BY - Choose the rule for ordering the category products.
  4. BADGE COLOR - Choose the color for the badges, if any. A blank field reverts the setting to the default value.
  5. BADGE BACKGROUND COLOR - Choose the background color for the badges, if any. A blank field reverts the setting to the default value.

2. Product Options

FavProducts Joomla module documentation content products

  1. SHOW PRODUCT - Choose if this product should be displayed or not.
  2. USE HIKASHOP PRODUCT - Use data from a specific HikaShop product. This will disable all the other custom fields for this particular entry.

3. Image Options

FavProducts Joomla module documentation content image

  1. IMAGE UPLOAD - Upload the image for this product. A blank field reverts the setting to the default value.
  2. IMAGE SHOW LINK - Choose if the product image link should be displayed or not.
  3. IMAGE LINK - Insert the URL for the product image. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
  4. IMAGE LINK TARGET - Choose the link target of the URL for the product image.
  5. IMAGE ALT TEXT - Insert the text for the product image Alt. A blank field reverts the setting to the default value.

4. Title Options

FavProducts Joomla module documentation content title

  1. TITLE TEXT - Insert the text for the title of the product. A blank field reverts the setting to the default value.
  2. TITLE COLOR - Choose the color for the title of the product. A blank field reverts the setting to the default value.
  3. TITLE SHOW LINK - Choose if the link for title of the product should be displayed or not.
  4. TITLE LINK - Insert the URL for the title of the product. Note that the link must include http:// or https://. A blank field reverts the setting to the default value.
  5. TITLE LINK TARGET - Choose the link target of the URL for the title of the product.

5. Description Options

FavProducts Joomla module documentation content description

  1. DESCRIPTION TEXT - Insert the text for the description for this product. A blank field reverts the setting to the default value.

6. Badge Options

FavProducts Joomla module documentation content badge

  1. BADGE SHOW - Choose if the badge for this product should be displayed or not.
  2. BADGE TEXT - Insert the text for the badge for this product. A blank field reverts the setting to the default value.
  3. BADGE COLOR - Choose the color for the badge for this product. A blank field reverts the setting to the default value.
  4. BADGE BACKGROUND COLOR - Choose the background color for the badge for this product. A blank field reverts the setting to the default value.

7. Price Options

FavProducts Joomla module documentation content price

  1. PRICE TEXT - Insert the text value for the price for this product. A blank field reverts the setting to the default value.

The module features using CSS3 have limited support for older browsers, so please check the demo first.

Being a responsive module, this Joomla! module has no fixed width. The maximum width of the module is the width of the module position containing the module and/or the width of the device used (desktop, tablet or mobile). To test the responsive behaviour of the module columns, simply adjust the width of the browser window to different sizes.

The Joomla! name is used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries. FavThemes is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.