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.

Main Image

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

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

View Types

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

Element Title

• Element Title Font Size. Choose size for title on element.
• Element Title Font Size. Choose size for title on element.

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 Title

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

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.

Price Block Options

• Show Price. Select to demonstrate the price for the products in catalog.
• Price Text. Change the name of price block.
• Discount Price Text. Change the name of discount price block.
• Price Block Font Size. Choose font size of the price and discount price.
• Price Block Font Color. Choose color for price and discount price font.

Element Styles

• Element Width. Choose width size for elements of the product in catalog.
• Element Height. Choose height for elements of the products in catalog.
• Element Background Color. Select 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.
• Element’s Image Overlay Color. Choose color for element overlay.
• Element’s Image Overlay Transparency. Adjust transparency level for element overlay.
• Zoom Image Style. Choose white or black zoom icon.

Popup Styles

• Popup Image Full Width. Choose to stretch the image within popup, or have natural size of it.
• Popup Background Color. Select background color for popup of the product.
• Popup Overlay Color. Choose the color of backend overla while popup is opened.
• Popup Overlay Transparency. Adjust transparency level for background overlay.
• Popup Close Button Style. Choose light or Dark “x” button in popup.
• Show Separator Lines. select to show separator lines between texts in popup.

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 .

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.

2.4 Full-Width 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.

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.

Title

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

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.

Price Options

• Show Price. Select to demonstrate the price for the products in catalog.
• Price Text. Change the name of price block.
• Discount Price Text. Change the name of discount price block.
• Price Block Font Size. Choose font size of the price and discount price.
• Price Block Font Color. Choose color for price and discount price font.

2.5 Content Slider

View Types

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

Images

• 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. 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.

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.

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.

Price Options

• Show Price. Select to demonstrate the price for the products in catalog
• Price Text. Change the name of price block
• Discount Price Text. Change the name of discount price block.
• Price Block Font Size. Choose font size of the price and discount price.
• Price Block Font Color. Choose color for price and discount price font.

Stage 3 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. Choose width size for main image.
• Show Thumbnails. Select to see the thumbnail images with main one.
• Thumbnails Width. Choose width size for thumbnail images.
• Thumbnails Height. Choose height size for thumbnail images.

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.
• Submit Button Background Hover Color. Choose other color for “submit” button background while hover a mouse on it.

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.

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.

Stage 4 Image View Options

4.1 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, you can adjust the background overlay transparency level.
• 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.

Positioning

• Fixed position. Tick to fix the ligtbox position while scrolling the page.
• Popup position. You are given 9 ways to posit the ligtbox within page.

Dimensions

• Popup size fix. Selection of this options will fix the popup width and height.
• Popup height. Give 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. n 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.

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.

4.2 Zoom Options

Zoom Window Options

• Window. Window type of zoom icon.
• Zoom Window Width. Give width size for zoom window.
• Zoom Window Height. Give height size for zoom window .
• X-Asis Offset. Choose the position of window by x-asis .
• Y-Asis Offset. choose position of window by y-asis.
• Zoom Window Position. zoom window position by sides .
• Zoom Window Border Size. Give border to zoom window and decide the size of it .
• Zoom Window Border Color. Pick up color for zoom window border .
• Zoom Window Border Radius. Set the radius level of window corners .
• Allow Zoom On Thumbnails. Select to allow zooming the thumbnail images Tint Options.
• Enable Tint.Select to have transparent overlay out of zoom window Tint Colour. Choose a color for tint overlay.
• Tint Opacity. Chose transparency level for overlay,which is out of zoom window.
• Tint FadeIn Speed. Set fade-in speed for tint.
• Tint FadeOut Speed. Set fade-out speed for tint.

Zoom Window Options

• Lens Fade In Speed. Set fade-in speed for lens overlay.
• Lens Fade Out Speed. Set fade-out speed for lens overlay.
• Zoom Lens. Select to have zoom lens.
• 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.

Lens Options

• Lens Fade In Speed. Set fade-in speed for lens overlay.
• Lens Fade Out Speed. Set fade-out speed for lens overlay.
• Zoom Lens. Select to have zoom lens.
• 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.

Lens Options

• Lens Fade In Speed. Set fade-in speed for lens overlay.
• Lens Fade Out Speed. Set fade-out speed for lens overlay.
• Zoom Lens. Select to have zoom lens.
• 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.

Stage 5 Rating & Reviews Manager

Rating Manager. From this section you can manage product ratings. Edit or Remove

Reviews Manager. From this section you can manage reviews. Edit or Remove