MegaEdit - Spot Colour Support

MegaEdit, our flagship editor now offers support for spot colours within the editor.

Previously, spot colours were supported on static content such as clipart items or upload media items. We have now extended support within the editor, so that end users can select from a list of pre-defined spot colours OR that an individual field can be defined to utilise only a single spot colour.

First, we will go through the process of creating the spot colours as an administrator.

Creating Spot Colour Categories

Like every MegaEdit component, we first create the Spot Colour Category at a storefront level before we assign it to an individual product. 

Navigate to Catfish > Infigo Variable Data > Dynamic Products > Dynamic Products General Data. Now you will need to click on the 'Spot Colour Categories' tab. Within this tab, click the 'Add New Record' button.


You will now define the category - make sure you use a helpful naming convention that you can easily identify when assigning to the relevant products.

Like other general data categories for Dynamic Products, you have the ability to 'show only for admins' if you would prefer that your user did not have access in the front end editor itself.

Once you have added your categories, it is time to configure it to define your colour(s). Click the 'Configure' button where you will be presented with either a library of existing spot colours or a blank section ready for you to add your new spot colours.


Define your spot colours

To add a spot colour, click the 'Add spot colour' button (highlighted below).


You will then need to define the name for the spot colour as well as the on screen colour breakdown. In the above example, the Name has been defined as Lime Punch, and the colour value was specified as RGB which has created the Lime Green colour switch.

Please note: you can define the colour value as RGB, CMYK or HEX values.


Assigning Spot Colours to a product in admin

Now that we have created our Spot Colour Category & defined our spot colour(s), we can assign them to our product. 

Navigate to Catfish > Infigo Variable Data > Dynamic Products and locate the product you wish to configure against. Click Edit. You will now see a 'Spot Colours Categories' tab - click this to finalise the back end configuration.


The table will show all of the available spot colour categories. Simply select the relevant tickboxes (in this example, I would select 'Infigo Spot Colours' and then click 'Save Changes'. 

The configuration within admin is now complete and we are ready to configure & test in the front end.


Assigning Spot Colours to a field in the front end

The final step is to apply our spot colour to a field within the editor itself. To do this, locate your product in the front end of your storefront and launch the editor.

Now, select a field in which you wish for a spot colour to be applied to, by either selecting an existing field OR adding a new field to the canvas.


Once you have selected your field, you will need to click on the colour picker (Highlighted in red, above) to select which colour to save as the text fields default colour.



The above screenshot shows the 4 colours defined within my spot colour category (Catfish Blue, Infigo Blue, MegaEdit Pink, Symphony Blue). The selected colour, MegaEdit Pink, is highlighted in grey within the UI.

You can define a tint of the colour, by utilising the tint slider within the pop-up, as well the ability to switch back to RGB & CMYK colour spaces.

The final stage of setup, is to save this colour as the fields default format.

To do this, simply click the Save Default Text Formatting button, highlighted in red below:


By doing so, this will automatically default any text to MegaEdit pink.

Finally, the end user will not only be able to use the default Spot Colour but also select from any other colours defined within the Spot Colour Category.


If you require any assistance configuring spot colours for MegaEdit, please contact the support team here.

Have more questions? Submit a request


Please sign in to leave a comment.