Magic 360™ for Magento

Enchant customers with 360 degree spins

Enlarge to full screen for even more detail

  • Click to zoom in for a beautiful close-up.
  • Tweak it to perfection with over 30 options and an API.

Features | Watch video | Download

No coding required.

Use your Magic 360™ extension almost anywhere on your Magento site.

You can even apply different spin options to each page.

    Supported pages & blocks

    • Product details page
    • Manual install elsewhere
 

Supported features

  • Multiple images (uploaded with the default Magento image manager)
  • Multi-language (different locales)
  • Different configs for different themes
  • Show additional selectors on category page
  • Magento image clipped can be ignored
  • Native Magento watermarks
  • Can be used with other our Magento modules
  • Magento Enterprise: 1.11.x - 1.14.x
  • Magento Community: 1.4.x - 1.9.x

Relied upon by Magento store owners, Magic 360™ has been the professional choice since 2010 for stylish spin, zoom & full-screen effects.

This official Magento extension makes it easy to apply these effects to your pages. Even better - the extension gives you auto-caching, image resizing and SEO optimization as part of the dedicated Magento features.

With free new versions regularly released, your products will always look gorgeous with Magic 360™.

Key features

New versions support

All versions of Magento are supported (Magento Enterprise: 1.11.x - 1.14.x, Magento Community: 1.4.x - 1.9.x). We update our modules as soon as a new version of Magento is released.

Responsive

Magic 360™ is responsive out of the box. Essential for multi-device adaptation.

Image resizing

Upload large version of product images (approx 800px). Magento will resize images automatically throughout your website.

Caching

Optimize your website. Magic 360™ caches resized images. Which means fewer image downloads.

Per page profiles

Enable Magic 360™ on different pages & sections of your Magento store. Even better, customize it differently in each section/page.

Bandwidth allocation

Control how Magic 360™ initializes & loads images. Choose to activate on page load or on request.

Multi language support

Change Magic 360™ message & loading text. Engage customers worldwide with the language they love.

SEO friendly

Magic 360™ supports SEO Friendly URLs. Vital for website high ranking in search engines.

Watermarked images

Protect your images. Choose the position, opacity & size of your watermark.

Web settings

Say goodbye to manual configuration. Customize settings instantly using Magic 360™ Settings page.

jQuery compatibility

Magic 360™ requires no jQuery, 3rd party library or framework. Magic 360™ is completely compatible.

Custom themes support

If Magic 360™ doesn't work immediately on your site, email us and we'll add support for your theme (free of charge).

One-off payment

Pay once and the Magic 360™ license is yours forever.

Live demos

Magic 360™ for MagentoPretavoir Magic 360™ for MagentoBTO

Does your Magento site have a beautiful implementation of Magic 360?Submit your URL

Screenshots

  • Default view of Magic 360™ module settings page after installation
  • Custom settings for a new theme
  • Magic 360™ extension for Magento settings page

Installation

    1. Download Magic 360™ for Magento (free and fully functional demo version).
    2. Unzip the file on your computer and FTP the magic360 folder to your Magento directory (on your server), keeping the file and folder structure intact.
    3. Magento compiler disable before module installation If you use Magento Compiler, disable it System > Tools > Compilation > Disable.
    4. Magento module for Magento web installer Go to http://www.yoursite.url/magic360/ in your browser > click 'Install' (replace yoursite.url with your domain name).
    5. Magento run compilation process If you use Magento Compiler, click 'Run Compilation Process'.
    6. Refresh Magento cache after when Magento installation is completed Go to System > Cache Management > Select All and refresh the cache.
    7. The demo version is now installed! To create a 360 spin, see detailed steps below.
    8. Magento module for Magento settings page To customize your Magic 360™ options (speed, autospin etc), go to Magic Toolbox > Magic 360 settings > Default settings in your Magento admin panel.

Upgrade

To upgrade your version of Magic 360™ (which removes the "Please upgrade" text), buy Magic 360™ and overwrite following file with the same one from your licensed version:
/skin/frontend/[your_interface]/[your_theme]/js/magic360.js

Pricing and licensing

1 site license £99 Buy now
5 sites license £349 Buy now
10 sites license £599 Buy now
Unlimited license £1199 Buy now
Bundled license £2499 Buy now
Non-commercial license Free Request
Installation service (optional) £29 Buy now
What's included?
  • Unrestricted use forever on 1/5/10/Unlimited sites.
  • Use any of our 21 extensions for super-easy installation.
  • 30 minutes of free technical support.
  • 1 year of free upgrades.
  • A little bit of Magic :)

Video tutorial

To setup a 360 spin

  1. Open the product which you'd like to spin and click Magic360 Images at the bottom of the left navigation (screenshot).
  2. Browse your computer for your set of images and click Upload images (screenshot).
  3. The 'Multi row spin' section at top of the page will automatically 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 (screenshot). If your spin has multiple rows, click 'Multi-row spin' (screenshot) and enter the number of columns and rows in Number of images on X-axis and Number of images on Y-axis (screenshot).

Multiple images





To spin some images and zoom others, you can install both Magic 360™ and Magic Zoom Plus™.
  1. Install the Magento module for Magic 360™.
  2. Install the Magento module for Magic Zoom Plus™.
  3. Create product as normal. Click 'Save and Continue Edit'. A new section 'Magic360 Images' will appear at the bottom of the left hand navigation.
  4. Upload zoom images via 'Images' section. Upload 360 spin images via 'Magic360 Images' section (screenshot).

Spin on CMS pages

  1. Go to Magic 360™ extension settings page: Admin panel > Magic Toolbox > Magic 360 > Edit Settings > Click 'Defaults' tab.
  2. Under 'General' section, set 'Include headers on all pages' parameter to 'Yes'.
  3. Go to your admin panel > CMS > Pages. Add a new page or select an existing page, e.g 'Home page'.
  4. On the 'Content' tab click on the 'Show/Hide Editor' button to disable the editor.
  5. Insert a 360 degree spin anywhere in the code with a class of Magic360. This example uses the image reference 'shoe'. The HTML will look something like this:

    <a href="#" class="Magic360" data-magic360-options="filename:ring-{col}.jpg;"><img src="{{media url="wysiwyg/shoe-small-01.jpg"}}" alt=""/></a>

    To activate the full-screen option add large-filename to the <a> tag:

    <a href="{{media url="wysiwyg/shoe-big-01.jpg"}}" class="Magic360" data-magic360-options="filename: shoe-small-{col}.jpg; large-filename: shoe-big-{col}.jpg;"><img src="{{media url="wysiwyg/shoe-small-01.jpg"}}"/></a>
  6. Click 'Save Page'.
  7. Click 'Preview' to see your 360 spin in action!
  8. See these detailed instructions for changing the options of your spin - speed, magnifier, direction etc.

Multi-language

You can change the language of the message and loading text like so:
  1. Find the locale folder for the language you wish to change e.g. /app/locale/en_US.
  2. Open the file Mage_Api.csv into the editor and insert these lines at the and of the file:

    "Magic360_Message","Write your message here"
  3. Continue these steps for each locale you wish to change.

How to upload 360 images

How to upload 3D images

FAQ

  1. What do I need to create a 360 spin?

    A set of photos which show every angle. Your product moves ever so slightly in each photo, to create the 360 effect.

    Saved as JPEGs about 800px to 1200px wide will create gorgeous spin, magnify & full-screen effects.

  2. How do I reference my 360 images?

    Number your images in the order you want them to appear on your web page eg: shoe-01.jpg, shoe-02.jpg, shoe-03.jpg etc.
  3. How many 360 degree images do I need?

    You can use any number of photos you want. We recommend using 18, 36 or 72 images to create your 360 degree spin.

    36 images is a popular choice as the rotation feels smooth and the images download at an acceptable speed.

  4. Can you shoot my photos for me?

    We don't photograph products ourselves, but we know plenty of professional photographers who do. A specialist studio can shoot 20-60 products per day on their specialised robotic equipment and it's a lot more affordable than you may think. $50 per product is a rough benchmark for a batch of 10 products. Ask us for a quotation.

Other Magento extensions

This 360 degree viewer was built for Magento Commerce. It uses JavaScript to create the spin effect, using a set of photos spaced at equal degrees to create the spin effect. You can customise the speed, borders, effects, blurring, autostart and other options. The Magento extension makes it easy to install and customize and if you need help, contact us.

Magic 360™ works on iOS devices (iPhone, iPad, iTouch), most Android devices and all major browsers including Internet Explorer, Firefox, Chrome, Safari and Opera.

To create the 360 degree view of the product, you need a set of 18 or 36 photographs. The photos should be shot on a turntable, with bright lighting against a white background. If you don't have photos, tell us what your products are and we can get quotations for professional 360 product photography for you. Each set of photos typically costs between £30 and £90.