How to customise player buttons

The 360 player buttons can be easily customised. Just replace the .png images in the asset folder. If you need to reposition the buttons, or change their width or height, or if you want to hide the buttons on mobile devices, you can easily edit the styles.css file to achieve the precise look & feel you need.

How to edit the files

The 360 Product View creator outputs a .zip archive that contains:

  • Product image files (images, imagesHiRes folders)
  • 360 player engine (yofla360.js)
  • Browser files (index.html,iframe.html)
  • Theme files (assets folder, styles.css file)

To use your own images for player buttons, just replace the button images in the assets folder. E.g. replace button-play.png and button-play-over.png with your custom buttons. Important: if you change the size of the buttons, you need to update the css styles in styles.css file for button also:

This piece of code specifies the width and height of (all) buttons. If you want to use larger buttons, you need to update this portion of code.

How to edit button positions

Editing button positions is a more advanced topic and you need to have basic CSS knowledge. The position of the buttons in the player is also set in the styles.css file.

The new 360 product view creator now supports two new default themes (default black, pure white), which can you simply choose just by clicking a button.