How to integrate 360° animations with Magento with PackshotCreator

03. Magento

PackshotCreator - OrteryCapture

Step 1. Install the extension

Enter Magento Connect Manager

Magento Connect Manager
Upload the extension from local disk

Install Extension
Refresh data

Refresh


Step 2. Extension setting

Login in admin panel in your Magento website, then enter system -> configuration, so that you can find there is the Capture tab in left side of page. We will introduce each function next page.

Extension Setting

General Panel

    1. Enable Capture
    2. Default value is false. If you want to turn this feature on, please set this value yes.

Display Area Panel

    1. Show in Base Image Area
    2. Set the animation display in main image area or not.

Base Image Area

Lightbox Panel

  • Lightbox effect

    • Turn on lightbox feature or not.

  • Lightbox Width Ratio (The percentage of the browser window)

    • Set the width of light box. (Default: 80 -> 80%)

  • Lightbox Height Ratio (The percentage of the browser window)

    • Set the height of light box. (Default: 80 -> 80%)

  • Lightbox Background-color

    • Set the background color of lightbox. (Default: #000000)

  • Lightbox Opacity

    • Set the opacity of lightbox background. (Default: 0.8)


lightbox Effect

Relative Folder Path panel

  • The Root Folder of Animation Data

    • Decide where the image files and xml files are placed. Default folder is 'media/capture/', it means 'yourMagentoFolder/media/capture/', the animation image files and xml files should be placed there.


Link with SAAS Photo (version added: 2.1.0)
  • Copy the sample link from SAAS Photo, then input it in product attribute

    • When you add a product, please input the sample link to product attribute which named 'Capture Setting'.

Input Object URL

Link with local files

  • Place animation data
    1. Create a folder in assign folder (Default: 'media/capture/') to place HTML animation files.
    2. Copy the 'OBJECT_NAME' folder and 'OBJECT_NAME.html' folder to new created folder.
Copy Animation
  • Input the folder name in product attribute

    • When you add a product, please input the folder name to product attribute which named 'Capture Setting'.

Input Object Name

PackshotViewer

Step 1. Install the extension

Enter Magento Connect Manager

Magento Connect Manager
Upload the extension from local disk

Install Extension
Refresh data

Refresh


Step 2. Extension setting

Login in admin panel in your Magento website, then enter system -> configuration, so that you can find there is the Ortery TruView tab in left side of page. We will introduce each function next page.

Extension Setting

General Panel

  • Enable TruView

    • Default value is false. If you want to turn this feature on, please set this value yes.

Display Area Panel

  • Show in Base Image Area

    • Set the animation display in main image area or not.

  • Base Image Area Width

    • Adjust the width of base image area.

  • Base Image Area Height

    • Adjust the height of base image area.

Base Image Area

Lightbox Panel

  • Lightbox effect

    • Turn on lightbox feature or not.

  • Lightbox Width Ratio (The percentage of the browser window)

    • Set the width of light box. (Default: 80 -> 80%)

  • Lightbox Height Ratio (The percentage of the browser window)

    • Set the height of light box. (Default: 80 -> 80%)

  • Lightbox Background-color

    • Set the background color of lightbox. (Default: #000000)

  • Lightbox Opacity

    • Set the opacity of lightbox background. (Default: 0.8)

lightbox Effect

Relative Folder Path panel

  • The Root Folder of Animation Data

    • Decide where the image files and xml files are placed. Default folder is 'media/truview/', it means 'yourMagentoFolder/media/truview/', the animation image files and xml files should be placed there.


Link with SAAS Photo (version added: 2.1.0)

  • Copy the sample link from SAAS Photo, then input it in product attribute

    • When you add a product, please input the sample link to product attribute which named 'TruView Setting'.

Input Object URL

Link with local files

  • Place animation data
    1. Create a folder in assign folder (Default: 'media/truview/') to place HTML animation files.
    2. Copy the 'Images' folder and 'Profiles' folder to new created folder.
Copy Animation
  • Input the folder name in product attribute

    • When you add a product, please input the folder name to product attribute which named 'TruView Setting'.


Input Object Name

ImageCreator

Step 1. Install the extension

Enter Magento Connect Manager
Magento Connect Manager
Upload the extension from local disk

Install Extension
Refresh data

Refresh

Step 2. Extension setting

Login in admin panel in your Magento website, then enter system -> configuration, so that you can find there is the Ortery ImageCreator tab in left side of page. We will introduce each function next page.

Extension Setting

General Panel

  • Enable ImageCreator

    • Default value is false. If you want to turn this feature on, please set this value yes.

  • Allow scale the image size exceed its original size

    • The block where put may large than image. For example, the block is 500 x 500, but image is only 100 x 100. This option allow user to decide that enlarge image to fit the block or not. (Note that enlarge image will cause image blur)

Display Area Panel

  • Show in Base Image Area

    • Set the animation display in main image area or not.

  • Base Image Area Width

    • Adjust the width of base image area.

  • Base Image Area Height

    • Adjust the height of base image area.


Base Image Area

Lightbox Panel

  • Lightbox effect

    • Turn on lightbox feature or not.

  • Lightbox Width Ratio (The percentage of the browser window)

    • Set the width of light box. (Default: 80 -> 80%)

  • Lightbox Height Ratio (The percentage of the browser window)

    • Set the height of light box. (Default: 80 -> 80%)

  • Lightbox Background-color

    • Set the background color of lightbox. (Default: #000000)

  • Lightbox Opacity

    • Set the opacity of lightbox background. (Default: 0.8)

Lightbox Effect

Relative Folder Path panel

  • The Root Folder of Animation Data

    • Decide where the image files and xml files are placed. Default folder is 'media/imagecreator/', it means 'yourMagentoFolder/media/imagecreator/', the animation image files and xml files should be placed there.


Link with SAAS Photo (version added: 2.1.0)

  • Copy the sample link from SAAS Photo, then input it in product attribute

    • When you add a product, please input the sample link to product attribute which named 'ImageCreator Setting'.

Input Object URL

Link with local files

  • Place animation data
    1. Create a folder in assign folder (Default: 'media/imagecreator/') to place HTML animation files.
    2. Copy the image files and xml profiles to new created folder.
Copy Animation
  • Input the folder name in product attribute

    • When you add a product, please input the folder name to product attribute which named 'ImageCreator Setting'.


Input Object Name

XML Generator

XML Generator is added in version 1.0.0.

You can generate xml file by it directly, without throughing Ortery software. After filling in the form, please press "Generate XML" button, it will pop up a message to let you know the location of the file.

The options in ImageCreator extension and TruView extenstion are different.

XML Generator

FAQs

Why the extension setting shows 404 error?

Because the cache of admin panel without update, you can fix this problem by re-login.

Could I use the extension with other extensions?

The ImageCreator for Magento extension is working on product photo area, please avoid the other extensions whose use the same area.

    • Related Articles

    • 04. Magento 2

      PackshotCreator - OrteryCapture Step 1. Install the extension Open Magento root directory, and create app/code/ directory. Then unarchive module .zip file. Open “Terminal”, and go to Magento root directory. Input “php -f bin/magento module:enable -c ...

    • 12. Website for ImageCreator

      Single Embedded Animation By embedding a standalone animation into the website you give customers multiple views in one window. There is no need to click through different thumbnails to try to find the image or angle of the product you are looking ...

    • 02. eBay

      Steps to embed Step 1. Create a HTML animation using a PackshotCreator solution Step 2. Upload the entire animation folder to an online hosting server Step 3. In the folder on your server, look for the ‘*.html’ file Step 4. Cut and paste this link ...

    • 04. Shopify

      Embed SAAS Photo animation Step 1. Install Shopify App to Store Enter App page, then input your shopify domain to install Step 2. Confirm Installation Click install app button Step 3. Link SAAS Photo Animation Input SAAS Photo share link into image ...

    • 01. Bigcommerce

      Steps to embed Step 1. Enter “Add a Product” Page Click “Products” in the left side, and select “Add” Step 2. Open “HTML Source Editor” Click “HTML” button on the right top corner of description form Step 3. Input <iframe> Tag Write <iframe> tag, ...