Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents

 

Introduction

 

This module allows you to apply different colors to your products without the need to create the corresponding images.

...

A very significant time savings if you manage multiple colorways!

Click here to see the demo Colorize Pro+

Based on prestashop attributes (color palette), you simply activate the module product of your choice. The module automatically applies the selected color from the product (the transparent png format) picture.

No need to waste valuable time to create your images and save them in the backoffice, finally manage as many color variations as you want!


Functions

  • Colorize your products in 1 click!
  • Preview inversion (animation)
  • Special colors (gold, silver, mirror)      
  • Zoom type 'magic zoom' 
  • Transparency support of PNG files!
  • Pack licenses 1, 3 or unlimited number of field.
  • Simple installation

Installation

In the Prestashop administration panel (BO), select the Modules tab, then click on "Add a new module"

...

  The included version of images.inc.php in the module activates the transparency of PNG files

for all your shop. Only the files added after the installation would be appended.

Désinstallation

...


Uninstall

The uninstall procedure puts back in place the original file /images.inc.php d’origine et supprime l’onglet and removes the tab Modules > Colorize mais ne supprime pas la caractéristique « Colorize » et le groupe « Orientation » créés.

Ajouter un produit colorisable

Dans le backoffice (BO), allez dans le catalogue, puis cliquer sur ajouter un nouveau produit.

1. Onglet Infos – Définir un produit comme colorisable

Pour différencier vos produits classiques des produits à coloriser, on utilise la caractéristique « Colorize » qui doit être à PRO.

Image Removed

Cliquer sur enregistrer et rester :Image Removed

...

. It does not remove the "Colorize" feature neither does it remove the "Orientation" attribute group.

 

Add a Colorizable product

In BO, go to "Catalog" then click on "Add new Product".

1. Infos Tab – Define your product as "Colorizable"

In order to differentitate the "classical" products from the "colorizable" products, we use the "Colorize" feature. That feature must be set to ON for "colorizable" products. For Colorize Pro module, use PRO.

 

Image Added

Click on "Save and Stay" :Image Added

2. Images Tab - Add the pictures to colorize

2.1 Format d’images

Pour être colorisable, votre image doit être au format PNG transparent.

Voici une exemple correct :

Image Removed

Le fond bleu n’est pas dans l’image, il apparait par transparence.

Et un exemple incorrect :

Image Removed

Le fond bleu est masqué par le fond blanc de l’image, elle ne peut pas être colorisée.

2.2 Image de couverture & images de situation

 L'image de couverture, c'est l'image avec toutes les couleurs -comprenez non colorisable- c'est aussi celle qui sera affichée sur les pages catégories. Par exemple :

Image Removed 

Dans l'onglet de gestion d'image Prestashop™ :

  • Sélectionnez votre image en cliquant sur le bouton "Parcourir"
  • Cochez la case 'Couverture  Utiliser comme image par défaut ?'
  • Ajoutez "[x]" à la fin de sa légende

Les images de situation sont les images qui seront colorisables par le module Colorize Pro +. Le principe de fonctionnement est le suivant : pour chaque élément colorisable il faut créé une image (un calque couleur en d'autres termes). Avec un logiciel de traitement d'images, il vous suffit de détourez chaque couleur et d'enregistrer les fichiers séparément au format png transparent.

Dans l'onglet de gestion d'image Prestashop™, il vous suffit simplement d'ajouter chaque calque couleur dans l'ordre d'une pile du bas vers le haut.

Voici un exemple complet d'une produit colorisable par Colorize Pro + (le tshirt & le logo sont colorizable par 2 couleurs différentes):

Image Removed

 

Notez que le module est prévu pour fonctionner avec ThickBox (et non jqZoom)

...

In order to be colorizable, the image must be in PNG Format with transparency

Here's a correct example :

 

Image Added

The blue background is not in the picture (the picture is the elephant), it's being displayed by transparency.

And here's an incorrect example :

 

Image Added

The blue background is hidden by the white background of the picture (the elephant), therefore it can't be colorized.

2.2 "Cover" Picture & "Situation" Picture

 The Cover picture, is the picture with all the colors -meaning not colorizable. It's the one picture which would be displayed on the Categories pages. For instance :

Image Added 

In the Image Tab of a Product :

  • Select your cover picture by clicking on the "Browse" button
  • Tick the box "Cover : Use as default image ?"
  • Add "[x]" at the end of its legend


Situation pictures are the ones that would be colorizable by the Colorize Pro + module. The working process is quite simple : for each colorizable element, you'll have to create a picture (like a layer of colors). With some image-processing software, you'll need to extract each color layer of the cover picture and save the files separately in PNG format (transparent).

In the Image tab of Product management, you simply have to add each color (file) in pile order from bottom to top. 

Here's a complete example of a colorizable product with Colorize Pro+. T-shirt & logo are colorizable by 2 group of colors.


Image Added

 

Please note that the module is supposed to be working with ThickBox (not jqZoom).

Image size : thickbox : 600px * 600px


 

3.

...

Combinations Tab

3.1 Créez vos palettes de couleurs

 Pour chacun des éléments personnalisable de votre produit, il vous faudra créer un groupe d'attributs couleurs selon la nomenclature suivante :

...

Ensuite, pour chacun des groupes créés, il vous suffit de créer les couleurs de votre choix. Exemple :

 

3.2  Ajoutez vos couleurs !

 En utilisant le générateur de déclinaisons, il vous faudra ajouter autant de groupes de couleurs (color1, color2, color3, ...) qu'il y a d'éléments colorisables sur votre produit (vous pouvez créer autant de groupes que nécéssaire)

...

-> cliquer sur ‘Générer’.

 

4. That’s all Folks !

 Félicitations, vous venez de créer un produit colorisable avec le module Colorize Pro + de Configurateur Visuel.fr ! Vous restez libre d’utiliser toutes les fonctions classiques de Prestashop™ pour vos produits.

...

Pour que votre installation soit complete, vous pouvez personnaliser
Colorize ... Découvrez les Options de Configuration ...


5. Configuration (optionnelle)

5.1 Taille du .swf

Le paramère swfwidth du fichier swf/colorize.conf permet de modifier la  taille du fichier .swf.

...

    "invertOff": 328
  },

 

5.2 Opacité des groupes de couleurs

Le paramètre colorOpacity du fichier swf/colorize.conf permet de mofidier l'opacité des groupes de couleurs concernés : 1 pour une application de la couleur à 100% (comparable à un alpha 100%, 0 pour 0%) cela joue sur l'intensité du mélange de couche entre le calque produit et la couleur appliquée.

...