“Smart Product Viewer”
Documentation by “topdevs.net” v1.6.0

Step 1 Add new

Go to "Add new" page of "Plugins" submenu in your WordPress site Dashboard.

Click the "Upload" link in the top of the page.

Step 2 Choose File

Click on "Choose File" button and choose the smart-product-viewer.zip file on your hard drive.

Step 3 Install

Click on "Install Now" button.

Step 4 Activate

When installation process completed click on "Activate Plugin" link.

Step 1 Make Photos

360° Product Photography is surprisingly easy to create. You can create an almost seamless 360° image of any object and you really don't need any expensive specialist equipment. The only vital piece of equipment you need is a rotating cake stand / tray. They can be purchased for very little and enable you (once marked) to take a high number of images through 360° degrees.

Photography Simple steps

1. Buy a cheap white rotating cake tray.
2. Buy some white card (your choice of satin or matt).
3. Set up the card on the tray and either use card or a mini light box for your white background.
4. Set your lighting.
5. Take the required amount of images.

Photos Result

Once all photos done you can create a "Smart Product" using "Smart Product Viewer" plugin menu in your WordPress site Dashboard.

Step 2 Add new

Go to "Add new" page of "Smart Product" submenu in your WordPress site Dashboard.

Enter your "Smart Product" Title and then click on "Choose Images" button.

Step 3 Upload Images to Media Library

To upload images just drag and drop them from your computer or use standard upload dialog box (press "Select Files" button). All the images you add are saving in WordPress Media Library.

Step 4 Add Images from Library to Smart Product

Use the CTRL key (PC) or COMMAND key (Mac) to select multiple images from the Media Library. Selected images will have checkmark in top right corner. When all images you need are selected click "Use for Smart Product" button.

Step 5 Publish

Now you see images in "Smart Product Images" meta box. If all images you need are there press "Publish" button.

Step 6 Customzie image order

To change image order just drag it to right place. Order saved automatically when you drag, there is NO need to click "Update" button. If you need an opposite images order, just click "Reverse Images Order". It will change spin direction to opposite.

WooCommerce

You will notice a new "Smart Product" Metabox above the "Product Gallery" Metabox. It looks similar to Smart Prodcut Widget and has all parameters described here (except move_on_hover). Only one new option added: "Show as product image". It allows you to quickly enable/disable Smart Product as WooCommerce Product Image.

Metabox

Product Page

If enabled it will show Smart Product you specified instead of regular WooCommerce Product Image.

Gutenberg Block Since v1.6.0

Smart Product Viewer now ships a native Gutenberg block called 360° Product Viewer. It requires WordPress 5.9 or later and gives you a full block-editor experience without any shortcodes.

Insert the Block

1. Open a post or page in the Gutenberg editor.
2. Click the + block inserter and search for 360, or browse the Media category.
3. Click 360° Product Viewer to insert it.

Configure the Block

After inserting the block, open the Block settings panel on the right side of the editor. Settings are grouped into four panels:

• Product — choose which Smart Product to display, set the width (0 = full container width), frame interval and drag sensitivity.
• Navigation — show/hide navigation icons, choose scrollbar position, color scheme and style.
• Behaviour — toggle Autoplay, Fullscreen lightbox, Move on page scroll, and Move on hover.
• Appearance — toggle the border around the viewer.

Wide & Full Alignment

The block supports the Wide and Full alignment options available in the block toolbar (requires a theme that enables wide/full-width layout).

Shortcode

Smart Product View Default shortcode options

Shortcode Generator

Icon in Editor. Before WordPress 5.0

"Smart Product Viewer" has many of configuration parameters, so we create a Shortcode Generator to help you customize your Smart Product Views. You will notice a new icon in your WordPress Dashboard Editor.

Shortcode Generator in Gutenberg. Since WordPress 5.0

In WordPress 5.0, the classic content editor was replaced with the block editor (Gutenberg). The Shortcode Generator icon is available via the TinyMCE toolbar inside a Classic block, or you can paste the generated shortcode directly into a Shortcode block.

Tip: For the best Gutenberg experience, use the native 360° Product Viewer block instead of a shortcode. It gives you a visual settings panel without needing to remember any parameters.

Generator Pop-up

After click on "360°" icon you will see a pop-up with customization parameters for your Smart Product View. Parameters separated into 2 sections: Viewer and Navigation.

Insert Shortocode

Specify parameters you need following simple hints under parameters and click "Insert Shortcode" button in the bottom.

If "Save chosen parameters for next time" remain checked, all parameters you choose will be saved. After you Publish/Update your WordPress post or page and open Shortcode Generator again, your previously chosen data will be set as default.

That means you can check how the Grid Gallery looks on your site and you don't need to set all parameters again if you want to change something.

Back to Default

You can easily change Generator parameters from saved to plugin defaults by uncheking Show parameters saved previously.

Parameters

Color

"Smart Product Viewer" Plugin has 8 navigation color schemes: dark blue, light blue, red, brown, purple, gray, yellow, green. You can set the color inside shortcode using color attribute.

Color examples

[smart-product id=5 color=dark-blue]

[smart-product id=5 color=light-blue]

[smart-product id=5 color=red]

[smart-product id=5 color=brown]

[smart-product id=5 color=purple]

[smart-product id=5 color=gray]

[smart-product id=5 color=yellow]

[smart-product id=5 color=green]

Style

"Smart Product Viewer" Plugin has 8 navigation styles: glow, fancy, wave, flat round, flat square, vintage, arrows, leather. You can set the style inside shortcode using style attribute.

Style examples

[smart-product id=5 style=glow]

[smart-product id=5 style=fancy]

[smart-product id=5 style=wave]

[smart-product id=5 style=flat-round]

[smart-product id=5 style=flat-square]

[smart-product id=5 style=vintage]

[smart-product id=5 style=arrows]

[smart-product id=5 style=leather]

Combine color and style to get 64 different skins for your "Smart Product" navigation.

.threesixty-image {
  border-color: #080808;
}

Scrollbar

You can easily add a scrollbar above, below, left or right from your "Smart Product" using scrollbar attribute. Scrollbar is more suitable for step-by-step animation of a product or a workflow. Scrollbar has 8 predefined color schemes as well.

When scrollbar is active navigation icons are hidden and drag feature is disabled. You can't use both mouse drag and scrollbar at same time, because scrollbar bar has start and end points when mouse drag make product spin in infinite loop.

Smart Product View With Scrollbar

Style examples

[smart-product id=5 scrollbar=top color=dark-blue]

[smart-product id=5 scrollbar=top color=light-blue]

[smart-product id=5 scrollbar=top color=red]

[smart-product id=5 scrollbar=top color=brown]

[smart-product id=5 scrollbar=top color=purple]

[smart-product id=5 scrollbar=top color=gray]

[smart-product id=5 scrollbar=top color=yellow]

[smart-product id=5 scrollbar=top color=green]

Widget

Smart Product Widget has all parameters described here (except move_on_hover). All options available as drop down menus, text inputs or checkboxes. Go to "Appearnce > Widgets" page and drag the "Smart Product Widget" to any available in your theme Sidebar. Customize it the way you need and save. Learn more about WordPress Widgets.

CSS files

There are 2 CSS files in this plugin, located at includes/css:

admin.css for WordPress "Smart Product" dashboard. Please do not change it unless necessary.

magnific-popup.css used for fullscreen pop-up feature. Please do not change it unless necessary.

360.css for Smart Product represantation on your site. You can add your custom CSS styles in the end of this file to avoid possible layout issues. If you fill comfortable editing CSS yourself use the table of contents below(also it can be found at the top of 360.css file).

/**
 * Table of contents
 *
 * - Slider Wrap
 * - Loader
 * - Preview Image
 * - Slider Images
 * - Mouse pointer
 * - Navigation styles and colors
 *    - Navbar position
 *    - Icons
 *    - Style sprites
 *    - Icon Colors
 *        - Dark Blue
 *        - Light Blue
 *        - Red
 *        - Brown
 *        - Purple
 *        - Gray
 *        - Yellow
 *        - Green
 *    - Scrollbar
 *        - noUISlider
 *        - Scrollbar Colors
 *            - Dark Blue
 *            - Light Blue
 *            - Red
 *            - Brown
 *            - Purple
 *            - Gray
 *            - Yellow
 *            - Green
 */

JavaScript files

There are 7 JS files in this plugin, located at includes/js:

spv.admin.js for WordPress "Smart Product" dashboard. Please do not change it unless necessary.

spv.ajax.js loaded only when AJAX enabled. Please do not change it unless necessary.

ThreeSixty v.1.0.9

threesixty.js for Smart Product represantation on your site. This file is jQuery 360° image slider plugin, which is modified to support WordPress media Library images.

threesixty.min.js is minified version of threesixty.js used for page load speed purposes.

noUiSlider v.6.0.2

jquery.nouislider.js for Product Viewer scrollbar. More about noUiSlider read on project page.

jquery.nouislider.min.js is minified version of jquery.nouislider.js used for page load speed purposes.

Magnific Popup v.1.0.0

jquery.magnific-popup.min.js for fullscreen pop-up feature. More about Magnific Popup read on project page.

Smart Product Viewer

smart.product.min.js is compiled version of threesixty.min.js and jquery.nouislider.min.js used since Smart Product Viewer v.1.2 for page load speed purposes.

jQuery

"Smart Product Viewer" include default jQuery version presented in your WordPress install.

AJAX Support

If you load any Smart Product View via AJAX call and insert to your site page, for example if you use Infinite-Scroll plugin, it won't work. You will see preview image and 0% sign.

To make it work from AJAX inserted content you must enable this feature by setting SPV_AJAX constant to true in smart-product-viewer.php file.

Example

define( 'SPV_AJAX', true );