Product Image Enhancements v2.x Installation and User Manual

Latest version:2.3.0
Compatibility:Magento 2.1.x, 2.2.x

Disclaimer

This is the installation and user manual for the Magento Product Image Enhancements v2.x extension created by Solide Webservices. Although great care has been taken to ensure the accuracy and completeness of this manual, Solide Webservices is unable to accept any legal responsibility concerning errors or ommisions in this document.

You are not allowed to copy or edit the content or the layout of this document. If you would like to redistribute the content of this document please contact Solide Webservices.


Installation, Upgrade and Deinstallation

Installation for extensions purchased throught the Magento Marketplace

If you purchased the extension through the Magento Marketplace, please follow the steps to install the extension as described in the Magento Docs here: http://docs.magento.com/marketplace/user_guide/quick-tour/install-extension.html

Installation for extensions purchased on https://solidewebservices.com

The zip package you have downloaded from the webshop of Solide Webservices contains a link to this manual and a folder called upload. This upload folder contains the files of the extension and will be used to install the extension through (s)FTP.

System Requirements

  • Magento version 2.x or higher
  • PHP version 5.6.0 for 2.x or 2.1 or PHP 7.1 for Magento 2.2

Installation through command line

Installing modules is a little different in Magento 2 and requires some technical knowledge. If you are unfamiliar with this please read the Magento2 documentation.

Follow the steps below to install the extension for the first time.

  1. Backup your web directory and webshop database;
  2. Disable caching;
  3. Extract the zipfile you have downloaded after your purchase and copy the content of the 'upload' folder to the root of your webshop (for instance using an FTP client);
  4. Navigate to your webshop root in the console of your SSH client and execute the following command:
    php -f bin/magento module:enable SolideWebservices_Productimageenhancements --clear-static-content
  5. Then run the following command:
    php -f bin/magento setup:upgrade
  6. Flush the cache en reenable it. Log out from the backend and log in again to refresh autorisations for the new transactions.

In case you are running a configuration different then the Magento recommended server configuration it may be required to run the following command to deploy the new static files:

php -f bin/magento setup:static-content:deploy

Upgrading through command line

  1. Backup your web directory and webshop database;
  2. Disable caching;
  3. Extract the zipfile you have downloaded after your purchase and copy the content of the 'upload' folder to the root of your webshop (for instance using an FTP client);
  4. Navigate to your webshop root in the console of your SSH client and execute the following command:
    php -f bin/magento setup:upgrade
  5. Flush the cache en reenable it. Log out from the backend and log in again to refresh autorisations for the new transactions.

In case you are running a configuration different then the Magento recommended server configuration it may be required to run the following command to deploy the new static files:

php -f bin/magento setup:static-content:deploy

Uninstallation through command line

Installation of modules is done through the command line as well, for more information please have a look at the Magento2 documentation.

  1. Backup your web directory and webshop database;
  2. Disable caching;
  3. Navigate to your webshop root in the console of your SSH client and execute the following command:
    php -f bin/magento module:disable SolideWebservices_Productimageenhancements --clear-static-content
  4. Flush the cache en reenable the cache again.
  5. Remove the folder called 'Productimageenhancements' located at /app/code/SolideWebservices/. If you have no other extension of Solide Webservices installed you can also remove the folder called 'SolideWebservices' in /app/code/.

Frontend

In this section you can see most of the functionality how it can be shown on the frontend of your Magento webshop. These are just examples but will give you a good idea of the endless posibilities.

Zoom Window

Below is an example of the Product Image Enhancements on the frontend configured with a zoom window. All elements can be modified to your needs and theme.

  1. Main Product Image: the main can be responsive or have fixed width and height and can be styled to match your theme.
  2. Zoom Lens: the zoom lens can be square or rounded and can be styled to match your theme, also the behaviour can be configured.
  3. Zoom Window: the size, style, position and behaviour of the zoom window can be configured
  4. Product Image Thumbnails: the size, style and position of the thumbnails can be configured. You can also choose to show the thumbnails in a carousel slider which can be completely configured to your needs.
  5. Caption: Both the main product image and the zoomed in image shown in the zoom window can have captions from either the image label, short product description or long product description. The captions can be positioned and styled to your needs.

Zoom Lens

Below is an example of the Product Image Enhancements on the frontend configured with a zoom lens. All elements can be modified to your needs and theme.

  1. Zoom Lens: the image zoom can be configured with various types of zoom effects, the zoom lens uses an inline lens to zoom into the product image. The zoom lens can be sized and styled to your needs.
  2. Product Videos: also product videos from YouTube and Vimeo as added in the backend from Magento can be played.

In addition to image zoom and thumbail carousel functionality this extension comes with lightbox functionality when clicking on the main product image.


Backend Settings

The extension settings for the Product Image Enhancements extension can be found through the Magento backend menu under “Stores > Settings > Configuration > Solide Webservices > Product Image Enhancements”.

FIELDSET GENERAL

Use these settings to control the behaviour of the extension.

SettingValueDescription
Enable ExtensionYes / NoThis allows you to enable or disable the extension on a global level. If “No” is selected here the product image zoom will be disabled on the frontend and the extension isnt loaded anymore.

FIELDSET CONFIGURATION

In the configuration section you are able to tweak the extension to optimize it based on your needs.

SettingValueDescription
Zoom TypeCustom SelectChoose the zoom effect type here. Window shows the zoom in a seperate window, lens uses a lens en inner zooms inside the default image.
Minimum Required Viewport Size (px)Number Of PixelsSet the minimal width of the browser viewport to load the product image zoom and lightbox functionality. This can be used to disable the loading of the product image zoom and lightbox on mobile devices where you might not want this because of the smaller screens.
ScrollzoomYes / NoSet to “Yes” to enable scrolling with the mousewheel inside the zoom lens.

FIELDSET MAIN PRODUCT IMAGE

In the main product image section you are able to configure the large product image shown on the product page. This is the image that will be zoomed.

SettingValueDescription
Main Product Image SizeCustom SelectChoose to load the main product image fully responsive (width=100%) or with a fixed width and height.
Main Product Image WidthPixelsThis field is only visible when “Main Product Image Size” is set to “Fixed”. Enter the width of the main image in pixels. The main image is the first image shown on the product page.
Main Product Image HeightPixelsThis field is only visible when “Main Product Image Size” is set to “Fixed”. Enter the height of the main image in pixels. The main image is the first image shown on the product page.
Main Product Image Border SizeCustom SelectSelect the border thickness of the main product image.
Main Product Image Border ColorColorpickerThis field is only visible when a border thickness of 1 or higher has been selected for the main product image. You can set the border color for the main image here.
Crossfade Main Image On SwitchingYes / NoSelect “Yes” if you want to enable a crossfade between product images when selecting another product image from the thumbnail gallery.
Zoomfunction Behind Magnifying GlassYes / NoSelect “Yes” to show a magnifying glass indicating the main product image needs to be clicked first to enable the zoom functionality.

FIELDSET THUMBNAILS

In the thumbnails section you are able to configure that thumbnail gallery that is shown below the main product image.

SettingValueDescription
Thumbnails PositionCustom SelectSet the location of the thumbnail gallery relative to the main product image.
Thumbnails Image TitlesTextChoose the add an optional title above the thumbnails. Only available if the thumbnail position is set to above or below.
Thumbnail Image WidthPixelsEnter the width of the thumbnails shown below the main image in pixels.
Thumbnail Image HeightPixelsEnter the height of the thumbnails shown below the main image in pixels.
Thumbnail Border SizeCustom SelectSelect the border thickness of the thumbnails in the gallery.
Thumbnail Border ColorColorpickerThis field is only visible when a border thickness of 1 or higher has been selected for thumbnails. You can set the border color for the thumbnails here.
Thumbnail Hover Border ColorColorpickerThis field is only visible when a border thickness of 1 or higher has been selected for thumbnails. You can set the hover border color for the thumbnails here.
Space Between Thumbnails And Main Product ImagePixelsSet the space in pixels between the thumbnail gallery and the main product image.
Space Between ThumbnailsPixelsThis field is only visible when “Scroll Thumbnails” is set to “No”. You can set the space between the thumbnails here in pixels.
Scroll ThumbnailsYes / NoSet to “Yes” to create a scrollable thumbnail carousel for the thumbnails gallery.
Maximum Width / Height Scroll AreaPixelsThis field is only visible when “Scroll Thumbnails” is set to “Yes”. You can limit the scrolling area for the thumbnails, for instance to line it up with the main product image.
Infinite Loop Thumbnails ScrollYes / NoThis field is only visible when “Scroll Thumbnails” is set to “Yes”. Set this to “Yes” to make the thumbnails carousel loop through all the thumbnails.
Number Of Thumbnails To ShowNumberThis field is only visible when “Scroll Thumbnails” is set to “Yes”. Set the number of visible thumbnails in the thumbnails carousel.
Number Of Thumbnails To ScrollNumberThis field is only visible when “Scroll Thumbnails” is set to “Yes”. Determine the number of thumbnails that will scroll at a time.
Scroll Navigation Arrow ColorColorpickerThis field is only visible when “Scroll Thumbnails” is set to “Yes”. Set the color of the navigation arrows for the thumbnails carousel.
Scroll Navigation Arrow Hover ColorColorpickerThis field is only visible when “Scroll Thumbnails” is set to “Yes”. Set the hover color of the navigation arrows for the thumbnails carousel.
Show Scroll Pagination DotsYes / NoThis field is only visible when “Scroll Thumbnails” is set to “Yes” and the “Thumbnails Position” it set to “Above” or “Below”. Set this to “Yes” to show pagination dots below the thumbnails carousel which indicates the number of pages that can be scrolled.
Scroll Pagination ColorColorpickerThis field is only visible when “Scroll Thumbnails” is set to “Yes”, the “Thumbnails Position” it set to “Above” or “Below” and the “Show Scroll Pagination Dots” is set to “Yes”. Set the color of the pagination dots here.
Scroll Pagination Active ColorColorpickerThis field is only visible when “Scroll Thumbnails” is set to “Yes”, the “Thumbnails Position” it set to “Above” or “Below” and the “Show Scroll Pagination Dots” is set to “Yes”. Set the hover and active color of the pagination dots here.
Switch Main Image On Thumbnail ActionCustom SelectSelect the behaviour on how the main product images is switched. Click will require a mouseclick on a thumbnail, hover will change the main product image when hovering over a thumbnail.

FIELDSET ZOOM WINDOW

In the zoom window section you are able to configire the zoom window settings. This fieldset is only visible when the “Zoom Type” is set to “Window”.

SettingValueDescription
Zoom Window WidthPixelsSet the width of the zoom window in pixels.
Zoom Window HeightPixelsSet the height of the zoom window in pixels.
Zoom Window PositionCustom SelectThis determines where the zoom window is show relative to the main image. You can see the different position by hovering over the comment below the field.
Zoom Window Offset-XPixelsThe the X-Axis offset for the selected zoom window position for further fine-tuning of the zoom window position.
Zoom Window Offset-YPixelsThe the Y-Axis offset for the selected zoom window position for further fine-tuning of the zoom window position.
Zoom Window Border SizeCustom SelectSet the thickness of the border for the zoom window.
Zoom Window Border ColorColorpickerThis field is only visible when a border thickness of 1 or higher has been selected for the zoom window. Set the color of the border of the zoom window.
Zoom Window Fade InMillisecondsConfigure a fade-in for the zoom window in milliseconds. Leave blank for no fade-in.
Zoom Window Fade OutMillisecondsConfigure a fade-out for the zoom window in milliseconds. Leave blank for no fade-out.
Zoom Window Shadow Or GlowCustom SelectDetermine if you want to set a shadow or glow effect for the zoom window. There are various effects to select from.
Zoom Window Shadow Or Glow ColorColorpickerOnly visible when “Zoom Window Shadow or Glow” is not set to “None”. Set the color of the zoom window effect.
Zoom Window EasingYes / NoEnable of disable a easing effect within the zoom window.
Zoom Window Easing AmountNumberOnly visible when “Zoom Window Easing” is not set to “Yes”. You can set the amount of easing effect here.

FIELDSET ZOOM LENS

In the zoom lens section you can configure the look and feel of the zoom lens. This section is only visible if “Zoom Type” is set to “Window” or “Lens”.

SettingValueDescription
Lens SizePixelsOnly visible when “Zoom Type” is set to “Lens”. Set the size of the lens in pixels.
Lens ShapeCustom SelectSelect the shape of the zoom lens, either round or square.
Lens Border SizeCustom SelectSelect the border size of the zoom lens.
Lens Border ColorColorpickerThis field is only visible when a border thickness of 1 or higher has been selected for the zoom lens. Set the color of the zoom lens border.
Lens ColorColorpickerThis field is only visible when “Zoom Type” is set to “Window” and the “Main Product Image Tint” is disabled. You can set the color and opacity of the lens.
Lens Fade InMillisecondsThis field is only visible when “Zoom Type” is set to “Lens”. Configure a fade-in for the zoom lens in milliseconds. Leave blank for no fade-in.
Lens Fade OutMillisecondsThis field is only visible when “Zoom Type” is set to “Lens”. Configure a fade-out for the zoom lens in milliseconds. Leave blank for no fade-out.
Contain Lens ZoomYes / NoThis field is only visible when “Zoom Type” is set to “Lens”. Set to “Yes” to make sure the lens does not fall outside the outside of the image

FIELDSET MAIN PRODUCT IMAGE TINT

In the main product image tint section you are able to set a tint overlay for the main product image. This section is only visible when “Zoom Type” is set to “Window”.

SettingValueDescription
Enable TintYes / NoSet a background tint which overlays the main product image outside the zoom lens.
Tint ColorColorpickerOnly visible when “Enable Tint” is set to “Yes”. Set the tint overlay color for. Use the opacity for a transparent effect.
Zoom Window Tint Fade InMillisecondsOnly visible when “Enable Tint” is set to “Yes”. Configure a fade-in for the zoom window tint in milliseconds. Leave blank for no fade-in.
Zoom Window Tint Fade OutMillisecondsOnly visible when “Enable Tint” is set to “Yes”. Configure a fade-out for the zoom window tint in milliseconds. Leave blank for no fade-out.

FIELDSET CAPTION

In the caption section you are able to configure a caption for the main product image and zoom window, the latter only when “Zoom Type” is set to “Window” or “Lens”. Captions are the product images titles as configured through the Magento backend.

SettingValueDescription
Caption SourceCustom SelectYou can set the source of the image caption. You can choose between “Label”, “Short Description” and “Full Description”.
Show Caption On Main ImageYes / NoEnable or disable captions on the main product image.
Main Image Caption Background ColorColorpickerOnly visible when “Show Caption On Main Image” is set to “Yes”. Set the background color for the main product image caption. Use the opacity for a transparent effect.
Main Image Caption Text ColorColorpickerOnly visible when “Show Caption On Main Image” is set to “Yes”. Set the text color for the main product image caption.
Main Image Caption TextalignCustom SelectOnly visible when “Show Caption On Main Image” is set to “Yes”. Set the text alignment of the main product image caption.
Main Image Caption PositionCustom SelectOnly visible when “Show Caption On Main Image” is set to “Yes”. Set the position of the main product image caption.
Show Caption On Zoom WindowYes / NoOnly visible when “Zoom Type” is set to “Window” or “Lens”. Enable or disable captions on the zoom window.
Zoom Window Caption Background ColorColorpickerOnly visible when “Zoom Type” is set to “Window” or “Lens” and “Show Caption On Zoom Window” is set to “Yes”. Set the background color for the zoom window caption. Use the opacity for a transparent effect.
Zoom Window Caption Text ColorColorpickerOnly visible when “Zoom Type” is set to “Window” or “Lens” and “Show Caption On Zoom Window” is set to “Yes”. Set the text color for the zoom window caption.
Zoom Window Caption TextalignCustom SelectOnly visible when “Zoom Type” is set to “Window” or “Lens” and “Show Caption On Zoom Window” is set to “Yes”. Set the text alignment of the zoom window caption.
Zoom Window Caption PositionCustom SelectOnly visible when “Zoom Type” is set to “Window” or “Lens” and “Show Caption On Zoom Window” is set to “Yes”. Set the position of the zoom window caption.

FIELDSET LIGHTBOX

In the lightbox section you are able to configure a lightbox which will appear when clicked on the main image. The lightbox will show a larger image of the product image in a lightbox viewer.

SettingValueDescription
Enable LightboxYes / NoEnable or disable the lightbox feature.
Lightbox ThemeCustom SelectSelect the theme of the lightbox display, either a light or a dark theme.
Lightbox Overlay OpacityCustom SelectSet the opacity of the lightbox overlay.
Show Image TitleYes / NoShow the image label above the product image photo in the lightbox.
Show Overlay Gallery Of ImagesYes / NoChoose to show a gallery of product images inside the lightbox.
Show SlideShowYes / NoUse slideshow and show buttons to control it within the lightbox.
SlideShow AutoplayYes / NoAutomatically start sliding the images within the lightbox.
SlideShow SpeedMillisecondsSet the speed of the slideshow in milliseconds.
Allow Lightbox ResizeYes / NoResize the lightbox based on the viewport or load the lightbox with the original product image size.

Troubleshooting

In this section you will find answer to common issues.

I recieve a 404 error after installing the extension and going to one of the extension menu options.

This is a common issue when installing Magento extensions. It is caused because the permission for using the new extension havent been set for the currently logged in admin user. The solution is to logout and login again in the admin backend.

I installed the extension but it's not visible under the “Stores > Settings > Configuration” menu.

Make sure you have followed the installations steps and every one of them. Check if the extension has been installed under “System > Tools > Web Setup Wizard > Component Manager”. The extension should be listed as registered and enabled under this list. If this is not the case and you did upload the extension files as described in the installation steps you could try to run the following commands through a SSH client.

php -f bin/magento module:enable SolideWebservices_Flexslider --clear-static-content
php -f bin/magento setup:upgrade

I installed the extension but I only see a white area where the product image zoom should be displaying

This can happen when Magento is in production mode and the generation of static files has not been executed correctly. Make sure you clean out the following directories and deploy the static files again.

rm -rf pub/static/adminhtml/* pub/static/frontend/* pub/static/_requirejs/*
php bin/magento setup:static-content:deploy