Stage 1 Creation process of Product Catalog

To add a new Catalog go to Catalogs > Add New Catalog.

• Add product. Use standard WordPress 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.
• Description. Give description about the product.
• 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.
• Usage. This section includes two kind of shortcodes, First one need to be inserted into post/page, the second one is for template.

Stage 2 Catalog Options

From this section you can make design customization on catalog view. Catalog consists of all products, so catalog view is mostly product initial view. It includes 5 sections. The relevant changes will affect an all catalogs using that specific view option.

2.1 Blocks Toggle Up/Down.

View Types

• Allow Lightbox. Select to enable viewing images with lightbox.
• Allow Zooming. Select to enable zooming on images.

Element Styles

• Element Background Color. Pick up a color for element background.
• Element Border Width. Write some width number and you can have border on element.
• Element Border Color. Choose color for border on element.
• Toggle Button Style. Choose white or black color for toggle button
• Show Separator Lines. Select to see or do not see separation lines

Main Image

• Main Image Width. Set width level for main images of the products within catalog.
• Main Image Height. Set height level for main image of the products within catalog.

Title

• Title Font Size. Choose size for title.
• Title Font Color. Select title color.

Description

• Show Description. Select to show the description of the catalog or not.
• Description Font Size. Choose size of description.
• Description Font Color. Choose color for description font.

Thumbnails

• Show Thumbnails. Select to see additional images or not.
• Thumbnails Position. Choose where to display additional images.
• Thumbnails Width. Give width size for additional images.
• Thumbnails Height. Give height size for additional images.

Product Button

• Show Product Button. Select to see product button or not.
• Product Button Text. You can change the text inside product button.
• Product Button Font Size. Select font size for button text.
• Product Button Font Color. Pick up a color for product button text.
• Product Button Font Hover Color. Pick up color for product button text while hove a mouse on it.
• Product Button Background Color. Pick up color for product button background.
• Product Button Background Hover Color. Pick up color for product button background while hove a mouse on it.

Price Block Options

• Show Price. Select to demonstrate the price for the products.
• Price Text. Change the name of price block
• Discount Price Text. Write the name of discount price block.
• Price Block Font Size. Select font size of the price and discount price.
• Price Block Font Color. Pick up a color on price text and discount price font.

2.2 Full-Height Blocks

View Types

• Allow Lightbox. Tick to activate viewing images with lightbox.
• Allow Zooming. Tick to activate zoom for images.

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 don't see separation lines.

Title

• Title Font Size. Choose size for title.
• Title Font Color. Pick up title color .

Thumbnails

• Show Thumbnails. Select to see additional images or not.
• Thumbnails Position. Choose where to display additional images .
• Thumbnails Width. Give width size for additional images.
• Thumbnails Height. Give height size for additional images.

Product Button

• Show Product Button. Tick to see product button or not.
• Product Button Text. You can Amend the text in product button.
• 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.

Description

• Show Description. Tick to show the description of the catalog or not.
• Description Font Size. Choose size of description.
• Description Font Color. Take color for description font.

Price Options

• Show Price. Tick to demonstrate the price for the products.
• Price Text. Amend the name of price block .
• Discount Price Text. Amend the name of discount price block.
• Price Block Font Size. Elect font size of the price and discount price.
• Price Block Font Color. Take color for price and discount price font.

2.3 Catalog / Content Popup

Element Title

• Element Title Font Size. Choose size for title on element.
• Element Title Font Color. Select title color on the element.

Popup Title

• Popup Title Font Size. Specify the font size for the popup title.
• Popup Title Font Color. Choose the color for the popup title font.

Popup Thumbnails

• Show Thumbnails. Select to see additional images in popup or not.
• Thumbnails Position. Choose where to display additional images in popup.
• Thumbnails Width. Give width size for additional images in popup.
• Thumbnails Height. Give height size for additional images in popup.

Element Product Button

• Show Product Button On Element. Select to have “view product” button on element.
• Product Button Text. Change the text on product details button.
• Product Button Font Size. Choose font size of button text.
• Product Button Font Color. Choose font color of button text.
• Product Button Background Color. Choose color for product button background.

Popup Product Button

• Show Product Buttons. Select to see product button in popup or not.
• Product Button Text. You can change the text inside product button.
• Product Button Font Size. Select font size for button text.
• Product Button Font Color. Choose color for product button text.
• Product Button Font Hover Color. Choose color for product button text while hove a mouse on it.
• Product Button Background Color. Choose color for product button background.
• Product Button Background Hover Color. Choose color for product button background while hove a mouse on it.

Popup Description

• Show Description. Choose whether to display the description of the portfolio or not.
• Description Font Size. Set the portfolio description font size in pixels.
• Description Font Color. Select the portfolio description font color.

Popup Link Button

• Show Link Button. Choose whether to display Show More button.
• Link Button Text. Define the text of the Show More button.
• Link Button Font Size. Set the font size for the Show More button.
• Link Button Font Color. Select the font color for the Show More button.
• Link Button Font Hover Color. Select the font color for the Show More button when hovered.
• Link Button Background Color. Select the background color for the Show More button.
• Link Button Background Hover Color. Select the background color for the Show More button when hovered.

2.4 Full-Width Blocks

Elements Styles

• Main Image Width. Set the width of the main image.
• Element Background Color. Determine the background color for the element.
• Element Border Width. Set the border width of the element.
• Element Border Color. Select the element border color.
• Show Separator Lines. Choose whether to display divider lines or not.

Title

• Title Font Size. Specify the font size for the portfolio title.
• Title Font Color. Choose the color for the portfolio title font.

Thumbnails

• Show Thumbnails. Choose whether to display the image thumbnails or not.
• Thumbnails Position. Set the positioning of the thumbnails.
• Thumbnails Width. Set the width for the image thumbnails.

Description

• Show Description. Choose whether to display the description of the portfolio or not.
• Description Font Size. Determine the description font size in pixels.
• Description Font Color. Select the font color for the description.

Link Button

• Show Link Button. Choose whether to display Show More button.
• Link Button Text. Define the text of the Show More button.
• Link Button Font Size. Set the font size for the Show More button.
• Link Button Font Color. Select the font color for the Show More button.
• Link Button Font Hover Color. Select the font color for the Show More button when hovered.
• Link Button Background Color. Select the background color for the Show More button.
• Link Button Background Hover Color. Select the background color for the Show More button when hovered.

2.5 FAQ

First Shown Block

• Block Width. Set the width for the block in pixels.
• Block Background Color. Selecth the background
• Block Border Width. Se the boder width in pixels.
• Block Border Color. Choose the boder color.

Title

• Title Font Size. Specify the font size for the portfolio title.
• Title Font Color. Choose the color for the portfolio title font.
• Toggle Button Style. Select the toggle button style from the provided options.

Description

• Show Description. Choose whether to display the description of the portfolio or not.
• Description Font Size. Set the portfolio description font size in pixels.
• Description Font Color. Select the portfolio description font color.

Link Button

• Show Link Button. Choose whether to display Show More button.
• Link Button Text. Define the text of the Show More button.
• Link Button Font Size. Set the font size for the Show More button.
• Link Button Font Color. Select the font color for the Show More button.
• Link Button Font Hover Color. Select the font color for the Show More button when hovered.
• Link Button Background Color. Select the background color for the Show More button.
• Link Button Background Hover Color. Select the background color for the Show More button when hovered.

2.6 Content Slider

Slider

• Slider Background Color. Choose the background color for the slider.
• Slider Tabs Font Color. Set the font color for the slider tabs.
• Slider Tabs Background Color. Set the background color for the slider tabs.
• Icons Style. Choose the icon style.

Images

• Main Image Width. Set the main image width in pixels.
• Main Image Height. Set the main image height in pixels.

Show Thumbnails

• Thumbnails Width. Set the width for the thumbnails.
• Thumbnails Height. Set the height for the imag thumbnails.

Title

• Title Font Size. Specify the font size for the portfolio title.
• Title Font Color. Choose the color for the portfolio title font.

Link Button

• Show Link Button. Choose whether to display Show More button.
• Link Button Text. Define the text of the Show More button.
• Link Button Font Size. Set the font size for the Show More button.
• Link Button Font Color. Select the font color for the Show More button.
• Link Button Font Hover Color. Select the font color for the Show More button when hovered.
• Link Button Background Color. Select the background color for the Show More button.
• Link Button Background Hover Color. Select the background color for the Show More button when hovered.

2.7 Lightbox Gallery

Image

• Image Width. Set the image width in pixels.
• Image Border Width. Set the image border width in pixels.
• Image Border Color. Select the image border color.
• Border Radius. Set the border radius in pixels.

Title

• Title Font Size. Specify the font size for the portfolio title.
• Title Font Color. Choose the color for the portfolio title font.
• Title Font Hover Color. Choose the color for the portfolio title font when hovered.
• Title Background Color. Set a bacground color fot the title.
• Title Background Transparency. Determine the title background transparency level.

Step 3. Inserting Created Portfolio

On the upper right hand you can identify three blocks of options for the portfolio.

• Select The Portfolio/Gallery View. Choose one of the options for the porfolio/gallery image display.
• Usage. Here you will see the shortcode for the created portfolio. You can add the shortcode to the page or post where you want the images to be displayed. In addition you can find the shortcode icon with each post and page within its TinyMCE editor and can click on it, select the portfolio and insert the shortcode.

• Template Usage. If you want to use the portfolio for a custom location with the theme, you can copy and paste the provided code.
  To do so you should insert the following shorcode:
  <?php echo do_shortcode([huge_it_portfolio id=N]); ?>
  Where N is the number ID of the created Portfolio Gallery.