The Product Filters & Color Swatch app is a tool that provides a more direct visual display of colors for your product variants to customers. When there are multiple color options available for your product variants, you can use the color palette to show color chips to customers, enhancing communication and conversion.

 

In This Article

• Installing and Obtaining the Color Palette
• Matching Colors for the Attributes of Variants
• Display Configurations 

 

---

 

Installing and Obtaining the Color Palette

If you haven’t installed the Product Filters & Color Swatch app, follow the steps below to install it:

1. From your SHOPLINE admin panel, Click Apps > Go to App Store.
2.  In SHOPLINE App Store, search for and install Product Filters & Color Swatch.
3. After installation, you can start using the Product Filters & Color Swatch app.
   

 

---

 

Matching Colors for the Attributes of Variants

You can specify colors for different attributes. The system will automatically compare and match based on attribute names and the color library. Follow the steps below:

1. From the Product Filters & Color Swatch home page, locate the Color Palette tab and click Select an Option.
   
2. The system displays all product options and the number of associated products. Select an option and the system will automatically create a new color palette. You can create a color palette for each option.
3. SHOPLINE provides two color matching schemes to deal with more application scenarios: Exact matching colors and Fuzzy matching colors:

• Precision: The product variant attributes must fully comply with the international color naming list to be matched. (For example, your attribute value must be "Red" to match the red color.)
• Blur: Automatic matching of colors based on text information in store variants (supports multiple languages). (For example, if your attribute value is "Light Red", it can also match the color red.)

4. When the product option value can't be automatically matched to the color, you can manually configure the image/color of the product option, or enable the Smart matching product images. Product options that do not match a color value will be automatically applied with the product variant image or SKU image.
   

   Note: The app supports automatic translation matching for German, Russian, French, Spanish, Japanese, Thai, and Traditional Chinese.

   
   
   
   
5. Once you have made your selection, click Select option to create a palette.
6. Open the palette you just created in the list. If you need to adjust the display rules for a specific attribute, simply click on the attribute to edit it.
7. You can customize the style of a specific attribute and choose to display either a color or an image. When selecting a color, you can adjust the corresponding color for that attribute value. When opting for an image, you can upload the image corresponding to that attribute.
8. You can choose to display only the colors or images that you manually configure by selecting the option Display items which need manual configuration.
   
   
9. If you wish to set special color display rules for a specific product, you can click Custom, find and select the desired product, and then click Custom on the right side of the product. In the pop-up window, you can set the display types and special styles for different attribute values within the product.
   

 

---

 

Display Configurations 

You have the option to customize the display style of the color palette in the store. This includes shape, special variant, display position, display pages, number of lines, and more. Simply click on the Display configurations button to access the configuration page. Click Update to save the configuration.