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