Start Strong
Sell Smart
Manage with Ease
Market to Success

Improving Product Display with Product Filters & Color Swatch

Shopper App supports connecting to the Product Filters & Color Swatch app. The color swatches and sorting capabilities you set in Product Filters & Color Swatch will be applied to the search results page and category page of the App. After integration, it can provide customers with a better shopping experience.

 

 

Connecting Shopper App with Product Filters & Color Swatch

Shopper App supports Color palette and Sort features on Product Filters & Color Swatch app. Please refer below setup steps to proceed or go to this article to check for more details.

Color Palette

After installation, please go to the Color palette tab of Product Filters & Color Swatch to efficiently match colors to product specifications, continuously improving the user's shopping experience. 

  1. Click Select an option button on the upper right corner.
  2. The system will display all of your created product specifications and the number of associated products. Select the product specifications that you need to match color swatches to, and the system will automatically create new color swatches for you. You can create one color swatch for each specification.

  3. To accommodate a wider range of use cases, SHOPLINE offers two color matching schemes: Precision  & Blur
    • Precision Color Matching: Product specification attributes must fully comply with the international color naming list to be matched. (For example, your attribute value must be "Red" to match the color red.)
    • Blur Color Matching: Automatic matching of colors based on text information in store variants. For example, if your attribute value is "light red", it can also match the color red.

color match.png

  1. When the specification name cannot be automatically matched to a color, you can manually configure the image/color for that specification, or enable intelligent product image matching (unmatched color value specifications will automatically apply the product specification image or SKU image).

 

Notes:
  • If you have set up color swatches in Product Filters & Color Swatch, and the product specifications in Product Filters & Color Swatch have corresponding color swatches, then the Shopper App list page will display the corresponding color swatches as color swatches.
  • If you have set up color swatches in Product Filters & Color Swatch, but the product specifications in Product Filters & Color Swatch do not have corresponding color swatches, then the Shopper App list page will select the product details set rule image as the color swatch.
  • If you have not set up color swatches in Product Filters & Color Swatch, but the product specifications have corresponding specification images, then the Shopper App list page will select the product details and set rule image as the color swatch.
  • If you have not set up color swatches in Product Filters & Color Swatch, and you have not set up specification images in the product details, then the Shopper App list page will not display product color swatches.

 

Sort 

Once you have installed the Product Filters & Color Swatch plugin, you can set the sorting method for the product search results page and category page on the app by setting the sorting rules. Please refer to the following steps:

  1. Enable Product sorting
  2. Go to the product sorting section and adjust the options to your needs.

product filter -sort.png

 

Notes:


  • The Shopper App category page will directly synchronize your actual configuration. If sorting is not enabled, the App category page will read the local configuration (Recommended > Hot Sale > Update Time New-Old > Price Low-High > Price High-Low).
  • The Shopper App search results page only supports synchronizing the configuration of the three sorting methods: Recommended sorting, Price High-Low, and Price Low-High. If sorting is not enabled, the App will read the local configuration (Recommended > Price Low-High > Price High-Low).
  • The recommended sorting setting will not take effect in the Shopper App for now.

 

 

What It Looks Like on the App Interface

Your configurations will take effect immediately on your app pages.

2-1 color swatch shopper app.png 2-2 collection page shopper app.png 2-3 search results shopper app.png
Color Swatch on the product list page Sorting on product list page Sorting on search results page