Swatch Module
The Swatch module allows users to change a design's color theme and background within the application.
It allows the admin to set colors, preview and background images per set of theme. So let's assume you want a light and dark version of your business card design. With the Swatch module on one design, you can add either of the other color mode without having to create two separate designs, You can set element's colors for text and shapes, set a background color or image and assign a preview picture so when that theme is selected in the product page, the preview image shows the appropriate view before going into the application.
You can view a live sample here: https://wp.demo.pitchprint.io/product/swch-business-cards/
Setting up the Swatch Module
To enable this feature, navigate to your designs page, simply click the Configure button on the design you like to assign this to. Then navigate to the Modules Tab, there you will find the Swatch module.
Toggle the Switch to the On position and the options will appear as shown:
You can give it an optional title or leave that as blank. Click the Add New button to add a new theme to your design.
In the picture above, we have added two themes. Each with an option for 3 colors, a preview and background.
Swatch Colors:
These are the 3 colored boxes on top of each theme item, they correspond to swatch1, swatch2 and swatch3 in that order.
You link these colors to elements on your page by adding either swatch1, swatch2 or swatch3 to the chain value in your design.
So any element that has its chain set to swatch1 in that design, will have its color changed to the color value you have set of swatch1 for that theme when that theme is selected by the customer.
You can use comma to delimit other chain values you might have there. For instance, in the image below, the text element has a chain called name, we added swatch1 to it
Preview Picture:
When a theme is selected on the product page, the product view should change to reveal that and this is where you set it for each page of your design.
Click that image to select a picture or upload a new one for that preview. You can do this for all the pages in your design.
Background Image / Color:
Based on the design pages, you can set the color or background image that should be used for each theme when selected.
If your design page has a color, a color selector is presented or if an image, then an image selector is what you see. It's not possible to cross options here; it follows what the design page has.