Magic 360 for PrestaShop

Screenshots

Installation

IMPORTANT: When installed, Magic 360 replaces PrestaShop image gallery meaning only 360 spin will show on product page. If you have standard images for the same product and want to display them on the same product page, install Magic Zoom Plus (video, zoom & enlarge).

1. Download the PrestaShop module for Magic 360 (free and fully functional demo version).
2. Either upload it via your PrestaShop admin area. Or unzip the file on your computer and FTP the magic360 folder to the /modules/ directory of your store, keeping the file and folder structure intact.
3. Activate the module via the Modules menu Modules > Other Modules > Install.
4. The demo version is now installed! To create a 360 spin, scroll down...
5. To customize Magic 360 (speed, autospin etc.), go to [Admin panel > Modules > Other Modules > Configure].
6. Buy Magic 360 To upgrade your free and fully functional trial version of Magic 360 (which removes the "Trial version" text), buy Magic 360 and overwrite following file with the same one from your licensed version:

   /modules/magic360/magic360.js

Setup a spin

1. Open the product which you'd like to spin and click 'Modules' tab at the top > Configure.
2. Browse your computer for your set of images and click Upload images. (Depending on your server settings you may have to upload images in batches eg: 01-20 and then 21-36).
3. The 'Multi row spin' section at top of the page will automatically appear and update. The 'Number of images on X-axis' shows how many images are in your spin. The 'Number of images on Y-axis' shows if your spin moves up/down. '1' means one row only.
4. If your spin has multiple rows, click 'Multi-row spin' and enter the number of columns and rows in Number of images on X-axis and Number of images on Y-axis.

Multiple images

To spin some images and zoom others (like the example above), you can install both Magic 360 and Magic Zoom Plus.

1. Install the Prestashop module for Magic 360.
2. Install the Prestashop module for Magic Zoom Plus.
3. Create a new product or open an existing one.
4. Upload your zoom images via the 'Images' section. Upload your 360 spin images via the 'Magic360' section (screenshot - ).

Bulk upload images

Upload all your 360 spins in one shot using this bulk upload script.

1. Create a folder in the root of your Prestashop website. The folder can have any name, for example:

   /magic360images/

2. Upload all your 360 spins to the folder you created. Each spin must be stored in its own folder, with a folder name matching the product ID. For example:

   /magic360images/{product-id1}/01.jpg
   /magic360images/{product-id1}/02.jpg
   /magic360images/{product-id1}/03.jpg
   etc.
   /magic360images/{product-id2}/01.jpg
   /magic360images/{product-id2}/02.jpg
   /magic360images/{product-id2}/03.jpg
   etc.
   

   You don't need to name your image files in any special way - the spin will be built in alphanumeric order.

3. Download the latest version of Magic 360 for Prestashop.
4. Unzip the extension.

5. Find the bulk upload script:

   bulk360.php

6. Upload the script to the root of your Prestashop site e.g.

   https://yourdomain.com/bulk360.php

7. Open the script URL in your browser and click the button to execute it.
8. All your images will be copied into your Prestashop database. It can take about 1 second per 36 image spin.
9. Once the script has finished, it will show you a report of all the images copied.
10. You've finished! You might like to delete the images that you uploaded. You might also like to change the file name of the PHP script to avoid malicious usage. The same script can be used again next time you need to upload images.

Spin in CMS area

1. Go to the module options page Admin > Modules > Modules > Magic 360 > Configure.
2. Go to 'Defaults' tab > General > Include headers on all pages > Click 'tick' > Save settings.
3. Go to 'Preferences > CMS'.
4. Open existing page or create a new page.
5. Scroll down to 'Page content' section > Click 'Source code' button (a pop up box will appear).

6. Add a 360 spin to any CMS page by inserting an <img> tag for the first image in your spin. Wrap an <a> tag around it with a class of Magic360 and href of #. Specify the format of your file names using the filename parameter inside a data-magic360-options tag (this is described in detail on the Magic 360 integration page).

   <a href="#" class="Magic360" data-magic360-options="filename:YOUR-IMAGE-NAME-{col}.jpg;"><img src="YOUR-IMAGE-NAME-01.jpg"></a>

7. Click 'Ok' > Save changes.
8. All HTML code for Magic 360 settings are described here.
9. Troubleshooting - if spin does not appear and you're using PrestaShop16, please disable: Preferences > General > Use HTMLPurifier Library.

Live demos

Brunner

Uninstallation

Thanks for trying Magic 360 on your PrestaShop site! What did you hope Magic 360 could do? How can we improve it? Let us know, we're always improving our tools based on customer feedback.

1. Deactivate Magic 360 via the Modules and Services > Module and Services > Other Modules > Uninstall.
2. Delete Magic 360 via the Modules and Services > Module and Services > Other Modules > Delete.
3. Magic 360 is now uninstalled.

FAQ

1. What is a 360 product viewer?

   A 360 product viewer takes a set of 360 degree images and merges them together on a web page. This creates an interactive spin which visitors can move left and right to see every angle of the item. (If your 360 photography was also taken on Rows, your 360 spin will move up and down too.)

2. Is Magic Zoom Plus included in the Magic 360 license or is it purchased separately?

   Magic Zoom Plus should be purchased separately. You should use it if you want to combine both regular product images and spin on the same product details page. To receive 35% discount off Magic Zoom Plus, add Magic 360 to your Cart first and then add Magic Zoom Plus.

3. Is it possible to bulk import spin images from FTP to database?

   Yes, we have a special PHP script for bulk import. Please follow the step-by-step instructions on this page.