Joomla Catalog User Manual

Add Product Catalog Extension

In order to install Product Catalog extension, go: Extensions > extensions manager > choose the zip file > upload > module manager > activate

Add Product Catalog Extension

Create Component

Menu > main menu> choose one of your menu items> select our extension as menu item type>choose catalog from the list of created catalogs

Create Component

Create Article with plugin

Extensions > Plugins > find our catalog plugin > and activate it Now you can use it as article item

Create Article with plugin

Usage of Product Catalog Module

Module of this extension is made to facilitate the process of using the plugin within page. You can: place it in different positions within page, choose in which pages to display or not.

How to install module zip file:

Extensions > Module Manager > Activate Huge-IT Catalog > Choose Product Catalog and Position within specific theme (on right panel) > Menu assignment > Choose where to display it

Usage of Product Catalog Module

General options of Product Catalog extension

Components > Catalog > My First Catalog. On the admin page of the Product Catalog extension gives you 5 ways to demonstrate your products

Extension gives you 5 ways to demonstrate your products

  • Gallery/Content-Popup.
  • Content Slider.
  • Full-Width block
  • Full-Height block
  • Toggle Up/Down

Easy drag & drop function to change the order of created products.

Title - write title to each project

Description - make it full with description text

URL - add external URL link( which will work on “View More” button

Creation of unlimited amount of Parameters

Pagination, “Load More” buttons

After creation, take the shortcodes to add into article/page/template.

General options of Product Catalog extension

Creation of Product Catalog

  • Add product.

    Use standard Joomla uploader to add product image. Press “Add New product”. (+) add additional images of the product

  • Title.

    Add product name

  • Price.

    Give product price

  • Discount Price.

    Write discount price

  • Single Product page Link.

    This is set as “default”, you will use our single product page, or add your link, if you need to use your own created product page

  • Description.

    Give description about the catalog of the products

  • Other Parameter.

    You can also add other additional parameters

  • View Reviews.

    This button will open a window with product reviews’ list

  • View Ratings.

    This button will open a window with ratings of the product

  • Select The Catalog Theme.

    Choose one of the views from 5 available catalog views

  • Parameters.

    This area is made to add or change the additional parameters of the product

  • Catalog Thumbnail.

    You can upload cover image for catalog

  • Shortcode.

    With shortcodes you can create the catalog in article

Creation of Product Catalog

General Options of Product Catalog

This is free section, from here you can make translation changes on texts and submission message configurations

Translations. From this section you can change the text inside many buttons, or translate it into your language.

  • Price Block Text.

    Submit text on price label

  • Share Block Text.

    Submit “Share” label text

  • Rating Block Text.

    Submit text on rating block

  • Parameters Tab Title Text.

    Submit Text instead of “Parameters” label

  • Comments Tab Title Text.

    Submit Text instead of “Comments” label

  • Name Label Text.

    Submit Commentator “Name” label

  • Comment Label Text.

    Submit “Your Comment” label text

  • Captcha Label Text.

    Submit “Captcha” label text

  • Captcha Error Message Text.

    If captcha is wrong, write error message text

  • Order Popup Title.

    Submit making order, write order popup title text

  • E-mail Input Text.

    Submit e-mail input text

  • Phone Input Text.

    Submit phone number input text

  • Message Input Text.

    Submit “message” input text

  • Product Button Text.

    Submit text on “View Product” button

  • Order Button Text.

    Submit text On “Contact To Seller” button

  • Comments Submit Button Text.

    Submit text on “Submit” button of the comment

  • Order Popup Button Text.

    Submit text on “Submit” button of the order page/popup

General Options of Product Catalog<

Email To Administrator

  • Send Email To Administrator After Each Submission.

    Select, to send an email to administrator for each submission

  • Administrator E-mail.

    Submit e-mail address of the administrator

  • Message Subject.

    Write subject of the message

  • Seller E-mail.

    Submit email address, from whom this message should be sent to administrator

  • Message.

    Here you can write your message to administrator

Email To Administrator

Email To User

  • Send Confirming Message To Users After Submitting.

    Select to send a message to user’s email

  • Message Subject.

    Write subject for your message

  • Message.

    Write auto message text for submitted user

Email To User

Contact Seller Button

  • Show Contact Seller Button.

    Select this to see the contact to seller button on each product page

Contact Seller Button

Here you can manage your submissions from users. When users press on “contact to seller” button and fill the form. It includes

  • Customer Name
  • Customer Message
  • Customer E-mail
  • Customer Phone
  • Product Name
general-submision

Comments Manager

Comments Manager. From this section you can manage reviews. It includes:

  • Author Name
  • Comment
  • Product Name
  • You can easily manage them, edit or remove

comments-manager

Rating Manager.

From this section you can manage product ratings.

  • Product Name
  • Rating
  • Author IP
  • Submitted On
  • You can easily manage them, edit or remove

Rating Manager

Catalog Options

This is Catalog Options section. Catalog consists of all products, so catalog view is mostly product initial view. It has 5 views. The relevant changes will affect in all catalogs using that specific view option.

Block Toggle Up-Down

View Types

  • Allow Lightbox.

    This option will enable lightbox on additional images

  • Allow Zooming.

    This option will enable zoom lens on the images

block-toggle-view-types

Thumbnails

  • Show Thumbnails.

    Select to see thumbnail images

  • Thumbnails Position.

    Choose the positioning for additional images

  • Thumbnails Width.

    Configure width of the additional images

block-toggle-thumbnails

Element Styles

  • Element Background Color.

    Choose some color for element background

  • Element Border Width.

    Set width level and you can have border on element

  • Element Border Color.

    Choose border color

  • Toggle Button Style.

    Choose light or dark color for toggle button

  • Show Separator Lines.

    Don’t select to hide separational lines

block-toggle-element-styles

Product Button

  • Show Product Button.

    Pin to see product button or not

  • Product Button Font Size.

    Pick up font size for button text

  • Product Button Font Color.

    Select a color for product button text

  • Product Button Font Hover Color.

    Choose some color for product button font while the mouse hovers it

  • Product Button Background Color.

    Choose some color for product button while the mouse hovers it

  • Product Button Background Hover Color.

    Choose some color for product button while the mouse hovers it

block-toggle-product-button

Main Image

  • Main Image Width.

    Set width of main image box

  • Main Image Height.

    Define the height of main image box

block-toggle-main-image

Title

  • Title Font Size.

    Configure title size

  • Title Font Color.

    Reset font color

block-toggle-title

Description

  • Show Description.

    Enable or disable description from here

  • Description Font Size.

    Configure size of description text

  • Description Font Color.

    Configure font color for description

block-toggle-description

Product Options

  • Show Price.

    Select to make the price for the products visible in catalog

  • Price Block Font Size.

    Configure price and discount price font size

  • Price Block Font Color.

    Configure price and discount price font color

Product Options

Load More Block Options

  • Load More Position.

    Set the preferable position for load more icon

  • Load More Font Size.

    Change font size of the load more button text

  • Load More Font Color.

    Change the color of the button text

  • Load More Font Hover Color.

    change the color of the text when you hover a mouse on it

  • Load More Button Color.

    Background color of the button

  • Load More Background Hover Color.

    Background color when a mouse hovered on it

  • Loading Animation.

    Pick up one animation type

block-toggle-load-more-options

Pagination Block Options

  • Pagination Font Size.

    Set your desired font size for the Catalog Pagination

  • Pagination Icons Color.

    Change the color of the catalog pagination icons

  • Pagination Font Color.

    Select one of the amazing colors for the pagination

  • Pagination Icon Size.

    Set your desired size for the pagination icon

  • Pagination Position.

    Select one of the preferable position for the pagination: Left, Right, Center

full-height-pagination-block-options

Full-Height Blocks.

View Types

  • Allow Lightbox.

    Select to open images with lightbox tool

  • Allow Zooming.

    Select to activate zooming on main images

full-height-view-types

Element Styles

  • Block Width.

    Here select width size for element

  • Element Background Color.

    Pick up color for element background

  • Element Border Width.

    Decide some width number and you can have element border

  • Element Border Color.

    Decide color for border on element

  • Show Separator Lines.

    Select in order to see or don't see separation lines

full-height-element-styles

Product Button

  • Show Product Button.

    Pin to see product button or not

  • Product Button Font Size.

    Pick up font size for button text

  • Product Button Font Color.

    Select a color for product button text

  • Product Button Font Hover Color.

    Choose some color for product button font while the mouse hovers it

  • Product Button Background Color.

    Choose some color for product button while the mouse hovers it

  • Product Button Background Hover Color.

    Choose some color for product button while the mouse hovers it

full-height-prduct-button

Title

  • Title Font Size.

    Configure title size

  • Title Font Color.

    Reset font color

full-height-title

Thumbnails

  • Show Thumbnails.

    Decide to see additional images or not

  • Thumbnails Position.

    Decide where to display additional images

  • Thumbnails Width.

    Write width size for additional images

full-height-thumbnails

Description

  • Show Description.

    Enable or disable description from here

  • Description Font Size.

    Configure size of description text

  • Description Font Color.

    Configure font color for description

full-height-description

Price Options

  • Show Price.

    Select to make the price for the products visible in catalog

  • Price Block Font Size.

    Configure price and discount price font size

  • Price Block Font Color.

    Configure price and discount price font color

full-height-price-options

Load More Block Options

  • Load More Position.

    Set the preferable position for load more icon

  • Load More Font Size.

    Change font size of the load more button text

  • Load More Font Color.

    Change the color of the button text

  • Load More Font Hover Color.

    change the color of the text when you hover a mouse on it

  • Load More Button Color.

    Background color of the button

  • Load More Background Hover Color.

    Background color when a mouse hovered on it

  • Loading Animation.

    Pick up one animation type

full-width-load-more-options

Pagination Block Options

  • Pagination Font Size.

    Set your desired font size for the Catalog Pagination

  • Pagination Icons Color.

    Change the color of the catalog pagination icons

  • Pagination Font Color.

    Select one of the amazing colors for the pagination

  • Pagination Icon Size.

    Set your desired size for the pagination icon

  • Pagination Position.

    Select one of the preferable position for the pagination: Left, Right, Center

popup-pagination-options

Catalog/Content-popup

Element Title

  • Element Title Font Size.

    Change size for title on element

  • Element Title Font Color.

    Configure title color on the element

popup-element-title

Element Product Button

  • Show Product Button.

    Pin to see product button or not

  • Product Button Font Size.

    Pick up font size for button text

  • Product Button Font Color.

    Select a color for product button text

  • Product Button Background Color.

    Set some color for product button while the mouse hovers it

popup-element-button

Popup Title

  • Element Title Font Size.

    Set size for title in popup

  • Element Title Font Color.

    Select title color in popup

popup-popup-title

Popup Description

  • Show Description.

    Tick this option on and you can see description text in popup

  • Description Font Size.

    Adjust size of the description text

  • Description Font Color.

    Pick up a color for description text in popup

popup-description

Price Block Options

  • Show Price.

    Select to make the price for the products visible in catalog

  • Price Text.

    Recall the price block

  • Discount Price Text.

    Recall discount price block

  • Price Block Font Size.

    Configure price and discount price font size

  • Price Block Font Color.

    Configure price and discount price font color

popup-price-block-options

Element Styles

  • Element Width.

    Set width size for elements of the product in catalog

  • Element Height.

    Define the height for elements of the products in catalog

  • Element Background Color.

    Adjust some color for element background

  • Element Border Color.

    Set color for border on element

  • Element's Image Overlay Color.

    Set color for element overlay

  • Element's Image Overlay Transparency.

    Define the level of opacity for element overlay

  • Zoom Image Style.

    Choose white or black zoom icon

popup-element-styles

Popup Styles

  • Popup Image Full Width.

    Select to fill the popup with main image, and don’t select to leave natural size of the image

  • Popup Background Color.

    Choose some color for popup background

  • Popup Overlay Color.

    Select some color for the background behind the popup

  • Popup Overlay Transparency.

    Define the level of opacity of the background behind popup

  • Popup Close Button Style.

    Choose black or white “x” button in popup

  • Show Separation Lines.

    select to show separation lines between texts in popup

popup-popup-styles

Popup Thumbnails

  • Show Thumbnails.

    Decide to see additional images in popup or not

  • Thumbnails Position.

    Choose the positioning of the additional images in popup

  • Thumbnails Width.

    Write width size for additional images in popup

  • Thumbnails Height.

    Define the height size for additional images in popup

popup-thumbnails

Popup Product Button

  • Show Product Button.

    Pin to see product button or not

  • Product Button Font Size.

    Pick up font size for button text

  • Product Button Font Color.

    Select a color for product button text

  • Product Button Font Hover Color.

    Choose some color for product button font while the mouse hovers it

  • Product Button Background Color.

    Choose some color for product button while the mouse hovers it

  • Product Button Background Hover Color.

    Choose some color for product button while the mouse hovers it

popup-product-button

Load More Block Options

  • Load More Position.

    Set the preferable position for load more icon

  • Load More Font Size.

    Change font size of the load more button text

  • Load More Font Color.

    Change the color of the button text

  • Load More Font Hover Color.

    change the color of the text when you hover a mouse on it

  • Load More Button Color.

    Background color of the button

  • Load More Background Hover Color.

    Background color when a mouse hovered on it

  • Loading Animation.

    Pick up one animation type

popup-load-more-options

Pagination Block Options

  • Pagination Font Size.

    Set your desired font size for the Catalog Pagination

  • Pagination Icons Color.

    Change the color of the catalog pagination icons

  • Pagination Font Color.

    Select one of the amazing colors for the pagination

  • Pagination Icon Size.

    Set your desired size for the pagination icon

  • Pagination Position.

    Select one of the preferable position for the pagination: Left, Right, Center

block-toggle-load-more-options

Full-Width Blocks

View Types

  • Allow Lightbox.

    Select to open images with lightbox tool

  • Allow Zooming.

    Select to activate zooming on main images

full-width-view-types

Element Styles

  • Block Width.

    Select width size for element

  • Element Background Color.

    Pick up color for element background

  • Element Border Width.

    Write some width number and you can have element border

  • Element Border Color.

    Pick up color for border on element

  • Show Separator Lines.

    Tick to see or not to see separation lines

full-width-element-styles

Product Button

  • Show Product Button.

    Tick to see product button or not

  • Product Button Font Size.

    Elect font size on button text

  • Product Button Font Color.

    Take color on product button text

  • Product Button Font Hover Color.

    Take on product button text while hove a mouse on it

  • Product Button Background Color.

    Take color on product button background

  • Product Button Background Hover Color.

    Take color on product button background when you hover a mouse

full-width-prduct-button

Title

  • Title Font Size.

    Configure title size

  • Title Font Color.

    Reset font color

full-width-title

Description

  • Show Thumbnails.

    Decide to see additional images or not

  • Thumbnails Position.

    Decide where to display additional images

  • Thumbnails Width.

    Write width size for additional images

  • Thumbnails Height.

    Define the height size for additional images

full-width-description

Price Options

  • Show Price.

    Select to make the price for the products visible in catalog

  • Price Block Font Size.

    Configure price and discount price font size

  • Price Block Font Color.

    Configure price and discount price font color

full-width-price-options

Load More Block Options

  • Load More Position.

    Set the preferable position for load more icon

  • Load More Font Size.

    Change font size of the load more button text

  • Load More Font Color.

    Change the color of the button text

  • Load More Font Hover Color.

    change the color of the text when you hover a mouse on it

  • Load More Button Color.

    Background color of the button

  • Load More Background Hover Color.

    Background color when a mouse hovered on it

  • Loading Animation.

    Pick up one animation type

full-width-load-more-options

Pagination Block Options

  • Pagination Font Size.

    Set your desired font size for the Catalog Pagination

  • Pagination Icons Color.

    Change the color of the catalog pagination icons

  • Pagination Font Color.

    Select one of the amazing colors for the pagination

  • Pagination Icon Size.

    Set your desired size for the pagination icon

  • Pagination Position.

    Select one of the preferable position for the pagination: Left, Right, Center

full-width-pagination-block-options

Thumbnails

  • Show Thumbnails.

    Put check mark whether to show thumbnail

  • Thumbnails Width.

    Select the width of the thumbnails for the catalog

  • Thumbnails Height.

    Select the height of the thumbnails for the catalog

full-width-thumbnails

Content Slider

View Types

  • Allow Lightbox.

    Select to open images with lightbox tool

  • Allow Zooming.

    Select to activate zooming on main images

content-view-types

Images

  • Main Image Width.

    Decide the width of the main image

  • Show Thumbs.

    Enable or disable thumbnails under main image

  • Thumbs Width.

    Configure the width of thumbnail images

  • Thumbs Height.

    Define the height of thumbnail images

content-images

Product Button

  • Show Product Button.

    Pin to see product button or not

  • Product Button Font Size.

    Pick up font size for button text

  • Product Button Font Color.

    Select a color for product button text

  • Product Button Font Hover Color.

    Choose some color for product button font while the mouse hovers it

  • Product Button Background Color.

    Choose some color for product button while the mouse hovers it

  • Product Button Background Hover Color.

    Choose some color for product button while the mouse hovers it

content-product-button

Slider

  • Slider Background Color.

    Choose color for content background

  • Icons Style.

    Choose dark or with arrows on slider

  • Show Separator Lines.

    Select to see separator lines between texts

content-slider

Title

  • Title Font Size.

    Configure title size

  • Title Font Color.

    Reset font color

content-title

Description

  • Show Description.

    Enable or disable description from here

  • Description Font Size.

    Configure size of description text

  • Description Font Color.

    Configure font color for description

content-description

Price Options

  • Show Price.

    Select to make the price for the products visible in catalog

  • Price Block Font Size.

    Configure price and discount price font size

  • Price Block Font Color.

    Configure price and discount price font color

content-price-options

Products Options

Image Options

  • Allow Lightbox.

    Select to have lightbox feature on images or not

  • Allow Zooming.

    select to have zooming feature on images or not

  • Main Image Width.

    Decide the width of the main image

  • Show Thumbs.

    Enable or disable thumbnails under main image

  • Thumbs Width.

    Configure the width of thumbnail images

  • Thumbs Height.

    Define the height of thumbnail images

products-image-options

Comments Box Options

  • Show Comments.

    Select to see comments or not

  • Commentator Name Color.

    Choose color for commentator name

  • Comment Text Color.

    Choose color for comment text

  • Comment Box Background Color.

    Choose color for comments’ container

  • Submit Button Text.

    Change the text on “submit” button

  • Submit Button Text Size.

    Decide text size for “submit” button text

  • Submit Button Text Color.

    Choose color for “submit” text

  • Submit Button Text Hover Color.

    Choose other color for “submit” button text while hover a mouse on it

  • Submit Button Background Color.

    Choose color for “submit” button background

products-comments-box-options

Product Options

  • Product Block Background Color.

    Decide color for product block background

  • Title Font Size.

    Decide font size for product title

  • Title Font Color.

    Decide font color for title

  • Show Price.

    Select to show the price or not

  • Price Font Size.

    Give size to price text

  • Price Font Color.

    Choose color for price text

  • Show Description.

    Select to show description or not

  • Description Font Size.

    Decide font size for description text

  • Description Font Color.

    Choose color for description text

  • Show Rating.

    Select to show rating for the product or not

  • Show Share Buttons.

    Select to show share buttons or not

  • Rating's / Share Button's Label Font Size.

    Choose font size for rating/share buttons label

  • Rating's / Share Button's Label Font Color.

    Choose font color for rating/share buttons label

  • Show Separator Lines.

    Select t see separator lines in product box between texts

products-product-options

Tabs Options

  • Tabs Titles Font Color.

    Choose color for text in tabs

  • Tabs Titles Font Hover Color.

    Choose color for text in tabs while hover mouse on it

  • Tabs Border Color.

    Choose tab’s border color

products-tab-option

Parameters Box Options

  • Show Parameters.

    Select to see parameters tab

  • Parameter Name Color.

    Choose color for parameters name

  • Parameter Value Color.

    Choose color for parameters value

products-parametrs-box-options

Contact Seller Popup Styles

  • Popup Background Gradient.

    Select two colors for the gradient on popup

  • Popup Title.

    Add some title to popup

  • Popup Title Font Size.

    Decide font size for the title

  • Popup Title Color.

    Decide color of the font

  • Close Button Style.

    Choose one of the close button styles

  • Text Field Border Size.

    Change border size of the form fields border

  • Text Field Border Color.

    Decide color for the button border

  • Submit Button Text Size.

    Change text size on “submit” button

  • Submit Button Text Color.

    Change text color on “submit” button

  • Submit Button Background Color.

    Change background color of “submit” button

  • Submit Button Background Hover Color.

    Change color of the “submit” button while hover a mouse over it

products-contact-seller-popup

Contact Seller Button Styles

  • Show Contact Seller Button.

    Click to enable or disable “contact seller” button

  • Button Text Size.

    Change text size on “contact seller” button

  • Button Text Color.

    Change text color on “contact seller” button

  • Button Text Hover Color.

    Change text color on “contact seller” button while hover a mouse over it

  • Button Background Color.

    Change background color of “contact seller” button

  • Button Background Hover Color.

    Change color of the “contact seller” button while hover a mouse over it

products-contact-seller-button

Image View Options

Lightbox Options

Internationalization

  • Lightbox style.

    Pick up one of designed styles of ligtbox

  • Transition type.

    Choose the effect of lightbox performance

  • Opening speed.

    From here, configure speed of opening for lightbox

  • Closing speed.

    Configure the speed of closing for lightbox

  • Show the title.

    Tick to display the title of image

  • Overlay transparency.

    In opened position of lightbox, Define the level of opacity for the background overlay

  • Auto open.

    Tick for automatically opening the first image after reloading

  • Overlay close.

    Tick to close the lightbox by clicking on the background overlay

  • ESC close.

    Tick to close the image with esc button on keyboard

  • Keyboard navigation.

    Tick to slide images in lightbox with left and right buttons

  • Loop content.

    Selection of this option can allow to get to the first image after last image

  • Show close button.

    Choose to display close button or not

image-view-internationalization

Positioning

  • Fixed position.

    Tick to fix the ligtbox position while scrolling the page

  • Popup position.

    Choose the positioning of the the lightbox in 9 ways

image-view-positioning

Dimensions

  • Popup size fix.

    Selection of this options will fix the popup width and height

  • Popup height.

    Define the height size to the lightbox

  • Popup width.

    Give width size to the lightbox

  • Popup max width.

    In case of size - unfixed, choose image max width

  • Popup max height.

    In case of size - unfixed, choose image max height

  • Popup initial height.

    Decide the inceptive height of opening

  • Popup initial width.

    Decide the inceptive width of opening

image-view-dimensions

Slideshow

  • Slideshow.

    Tick to enable slideshow

  • Slideshow interval.

    Decide period between slides

  • Slideshow auto start.

    Selection of this option will start slideshow automatically as you open a lightbox. Also there will be “play” and “stop” button for slideshow

  • Slideshow start button text.

    Enter some new text on start button

  • Slideshow stop button text.

    Enter some new text of stop button

image-view-slideshow

Zoom Options

Slideshow Zoom Window Options

  • Zoom Type.

    Window type of zoom icon

  • Zoom Window Width.

    Choose width size for zoom window

  • Zoom Window Height.

    Choose height size for zoom window

  • X-Asis Offset.

    Adjust the position of window by x-asis

  • Y-Asis Offset.

    Adjust position of window by y-asis

  • Zoom Window Position.

    Choose the positioning of zoom window

  • Zoom Window Border Color.

    Decide color for zoom window border

  • Zoom Window Border Radius.

    Select the radius level of window corners

  • Allow Zoom On Thumbnails.

    Tick on to allow zooming the thumbnail images

image-view-slideshow-zoom-window-options

Tint Options

  • Enable Tint.

    Tick on to have transparent overlay out of zoom window

  • Tint Color.

    Decide a color for tint overlay

  • Tint Opacity.

    Define the level of opacity for overlay,which is out of zoom window

  • Tint FadeIn Speed.

    Adjust fade-in speed for tint

  • Tint FadeOut Speed.

    Adjust fade-out speed for tint

image-view-tint-options

Windows Options

  • Windows Fade In Speed.

    Set fade-in speed for lens overlay

  • Windows Fade Out Speed.

    Set fade-out speed for lens overlay

  • Lens Shape.

    Choose lens type Lens Color. Choose color overlay inside zoom lens

  • Lens Opacity.

    Choose opacity level for overlay inside zoom lens

  • Cursor.

    The default cursor is usually the arrow, then set the cursor is a pointer and cross icon

  • Easing.

    Select for smoothly movement in lens view

  • Lens Size Fix.

    Select to fix the size of the lens

  • Lens Zoom Scroll.

    Select to be able to scroll the zoom

  • Inner.

    Inner type of zoom icon

view-images-windows-options