• Topic主题TopicTopic
  • Sign in

User Guide to Product Filters & Color Swatch

 

The Product Filters & Color Swatch plugin in the SHOPLINE App Store enables you to easily customize product filters, variants, and color matching, enhancing the shopping experience by helping customers quickly find suitable products.

Product Filters generates filters that filter products in bulk based on the product variants you provide. Once enabled, the filters you've created will be displayed on the store page, helping customers quickly filter the variants and properties of the products they need and helping you improve store conversions.

Color palette function automatically matches the color palettes with the color names included in the variants you provide. Once enabled, various color palettes will be displayed on the product detail page and product list page. Replacing text with color palettes can help you improve store conversions.

 

In This Article

 


 

Installing Product Filters & Color Swatch

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.
    1-3 Install Product Filters & Color Swatch.png

Product Filters & Color Swatch consists of three core functions: Color palette, Filter and Sort. For detailed information on the configuration of each function, please read the sections below.

 


 

Adding Color Palette

With Product Filters & Color Swatch installed, you can efficiently match colors with product variants by configuring the color palette, continuously improving the customer experience. Please follow the steps below:

  1. From the Product Filters & Color Swatch home page, locate the Color Palette tab and click Select an Option.
    2-1 Select an Option.png


  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.)
Note: To access product variants, go to Products > product details page > the Variants section. For example, if a product option is set to be “Light Red”, the color value of “Red” can be matched.
  1. 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).
    2-2 Color match and Smart matching.png

 


 

Editing Color Palette Style

For color palettes that have been set, go to the Color Palette tab > Display configurations to see display styles on the Product Detail Page and Product list page:

3-1 Display configurations.png

 

3-2 Color palette display settings.png

 

  1. Color palette style settings:
    • Default style: Three default styles are available: Round, Square, Rounded rectangle.
    • Custom style: you can adjust opacity, corner radius, size and thickness.
Note: Customized size and thickness only take effect on the product detail page and are not supported on the collection page.
  1. Special variant setting:
    • Three preset bubble styles can be configured directly.
    • You can also customize bubble colors.
    • In addition, you can display a certain color palette on the Product Detail Page in separate lines and customize a title line to suit your needs.
  1. Settings for Product Detail Page: You can choose whether or not to display the color palette in the Add to cart plugin.
  2. Settings for Product list page:
    • Display Sold Out status: Once enabled, out-of-stock variants will be displayed as Sold Out.
    • Color palette display restriction: you can choose to display 1 line, 2 lines or unlimited lines (display all) for the color palette.
    • Display style for exceeded limit: you can choose to display a “more” icon or the remaining quantity when the limit is exceeded.
    • Display position: you can choose to display the color palette above or Below the product information.
    • Product image switching style: you can choose to display the product image when the customer’s mouse floats over the color palette or when they click on an option from the color palette.
    • Product image cropping rule: you can choose to follow the theme or use the default style.
Notes:
  • Switching product images is applicable only to PCs.
  • The product image cropping rule is only applicable to the Product list page.
  1. If the color palette is successfully configured, the display effect on the Product Detail Page may look like this:
    3-5 Color palette effect.png

 


 

Filter Function Description

In the Filter tab, you can add filters by clicking Add filter. SHOPLINE provides five filter types: Product options, Tag, Price, Inventory, and Product manufacturer. You can click to add the filter type you need and edit the options under this type. Please follow the steps below:

  1. Click Add filter in the Filter tab on the Product Filters & Color Swatch page.
    4-1 Add filter.png

  2. Currently, SHOPLINE supports the creation of filters under the types of Production options, Tag, Price, Inventory, and Product manufacturer.
  3. When you select a filter type, the app will automatically retrieve the filter values for the products associated with the current store that match that filter type. By choosing the corresponding filtering values, you can create a filter.
  4. Set the filter's position on the Product list page:
    • Mobile device: Supports configuring to Slide from sides and Slide out from bottom.
    • PC: Supports configuring Fixed to left side and Fixed at top.
  5. Set the Filter collapse style:
    • After selection: Automatically collapse after the customer selects the filter value.
    • After confirmation: Automatically collapse after the customer selects the filter value and confirms the current filter conditions.
  6. If the filter is successfully configured, the display effect on the product list page is as shown below:
    4-6 Filter effect.png

 


 

Sort Function Description

Follow the steps below, you can set sorting options for corresponding products in your online store or customize sorting names:
5-1 Sort tab.png

 

  1. Product sorting settings:
    • Support enabling or disabling the sorting options, or custom sorting names:
      • Recommended
      • Most popular
      • Recently updated
      • Price: low to high
      • Price: high to low
  2. Settings for Recommended Sorting Options
    • The following sorting options applied to all product list and collection pages:
      • Most popular
      • High to low conversion rate
      • High to low page views
      • Product name A-Z
      • Product name Z-A
      • Created: old to new
      • Created: new to old
      • Updated: old to new
      • Updated: new to old
      • Price: high to low
      • Price: low to high
      • High to low add-to-cart rate
      • High to low add-to-cart quantity
    • The following sorting options also apply to a single Product Collection Page:
      • Most popular
      • High to low conversion rate
      • High to low page views
      • High to low add-to-cart rate
      • Product name A-Z
      • Product name Z-A
      • Created: old to new
      • Created: new to old
      • Updated: old to new
      • Updated: new to old
      • Price: high to low
      • Price: low to high
      • High to low add-to-cart quantity
      • Custom

 



Have more questions? Submit a request

Comments