Skip to main content
Color Swatches
Niels van Vlerken avatar
Written by Niels van Vlerken
Updated over 2 years ago

Color swatches, there is no easier way to choose! ๐Ÿ”ด ๐ŸŸ ๐ŸŸก๐ŸŸข๐Ÿ”ต

mceclip0.png

It is better not to have colored balls in you at customs, but you should in your webshop! ๐Ÿ‘ฎ
The Color swatches add-on makes it possible to display the variants as color dots . Easy if your product is available in multiple colors ! No cluttered variant choice in the form of " texts ", but easy as "๐ŸŸฃ"!
โ€‹
โ€‹IMPORTANT: Set Lightspeed's default variants dropdown for the color swatches to work. With a different variant view, the Color Swatches add-on would not work!

Installation ๐Ÿ› ๏ธ
โ€‹

mceclip0.png


To install this add-on, an implementation from a developer is required . So it may take a while before the add-on is active. Simply click on " Request add-on " and let Plus+ notify our development heroes. ๐Ÿ‘จโ€โš•๏ธ
โ€‹
After clicking " Request Add-on ", you would be redirected to " My Plus+ Add-ons " page. You will also see the following message appear in the top right corner of the dashboard.
โ€‹

mceclip3.png


โ€‹
โ€‹Add-on settings/overview โš™๏ธ
โ€‹

mceclip4.png


After installation you will see that the add-on is in your overview , including installation date and status.
To activate the add-on, click on the hamburger menu and choose "activate". Prefer to see a preview in test mode first ? Which can. Click " Activate in preview mode" and the add-on would be visible only to you. So not for the customers !
โ€‹

mceclip5.png

Settings โš™๏ธ
โ€‹

mceclip4.png
mceclip5.png


โ€‹

Of course, this add-on needs some settings to work . For example, you should specify the colors to activate the spheres.
You do this simply by pressing the " Add color " button, enter the name of the color ( as it is called as a variant of your product! ) and choose a matching color code .
โ€‹โš ๏ธ PLEASE NOTE: If you have multiple languages โ€‹โ€‹in your shop, simply put the color name with a comma after the Dutch wording. WITHOUT SPACE! Example: Blue,Blue.

A title is displayed above the color swatches on the product page, what size can it be given? You can do this with the Title above the color swatches setting.
If you want space between the top and bottom of the module, use the settings " white space above the colors on the product page " & " white space below the colors on the product page ", this can be easily adjusted with the slider! ๐ŸŽš๏ธ
โ€‹
Hey, I also have variants without colors, but they are hidden! Of course we have thought of that too. Check this setting:
โ€‹

mceclip6.png


Turn it on to show all variants, including variants without colors!
โ€‹
โ€‹

mceclip7.png


The position of the Color swatches can also be determined on the product cards. (left, center or right ). This depends a bit on your product card design.
If you want space between the top and bottom of the module, use the settings " white space above the colors on the product cards " & " white space below the colors on the product cards ", this can be easily adjusted with the slider! ๐ŸŽš๏ธ

Within this add-on a translation key is used, with which you can adjust the text of the add-on to your own text. You can do this with custom translations .
The translation key for this is as follows:

  • Choose from

Result ๐Ÿ
Of course you are curious about the result, hereby the before and afters:
โ€‹
โ€‹Before installation โฌ…๏ธ
โ€‹

mceclip2.png


โ€‹After installation โžก๏ธ
โ€‹

mceclip3.png
Did this answer your question?