Comprehensive Guide to Product Filters & Color Swatch

Maximize your product visibility and customer engagement with the Product Filters & Color Swatch app. This app offers three core functionalities: Color palette, Filter, and Sort, which can significantly enhance your product pages.

Follow this comprehensive guide to learn about the setup process and discover how these features can improve your product display and boost your store's conversions.

Installing the App

Here's how to install the Product Filters & Color Swatch app:

1. From your SHOPLINE admin panel, go to Apps > Go to App Store.
   
2. Search for Product Filters & Color Swatch and click Install.
   
3. Optionally, pin the app to the Apps section in your admin panel for easy access.
   

Configuring Color Palettes

Color palettes automatically match color swatches based on the specifications you input. Once enabled, they replace plain text with vibrant color swatches on product details and listing pages, creating a visually appealing and informative shopping experience.

Matching Colors for Variant Attributes

You can create color palettes for different attributes. The system automatically associates product variants with the specific palettes based on the set attribute types and options. Follow these steps:

1. In the app, go to the Color palette tab and click Select an option. (For first-time users, click Add product color palette.)
   
2. The system will display all variant options and the number of associated items. Select the desired option to create the corresponding color palette. You can create one palette per option.
3. Select the preferred matching method:
   

• • Precision: Product variant attributes must exactly match the international color naming list. (For example, the attribute value must be "Red" to match the color red.)
  • Blur: Automatically matches colors based on the text information in the variants (supports multiple languages). (For example, "Light Red" will also match the color red.)
    
    

4. Check Smart matching product images if you want the system to automatically apply the product variant or SKU image to variant values that have no matched colors.
   

5. Once you've made your selection, click Select option to create the palette.
   
   

6. In the palette list, select the palette you created to adjust the display rules for a specific attribute.
7. You can customize the style for a specific attribute and choose to display either a color or an image.
   

• • When selecting a color, you can adjust the corresponding color for the attribute value. 
  • When opting for an image, you can upload an image that corresponds to the attribute.
    
    

8. To filter items that require manual configuration, check Display items which need manual configuration.
   
9. If you want to set special display rules for a specific product, click Custom.
   

9.1 Select the desired product, and then click Custom next to the product.

9.2 In the pop-up window, define the display types and styles for different attribute values.

Configuring Display Styles 

Once the color palettes are set, go to the Color palette tab and click Display configurations to adjust the display styles for both the Product Detail Page and Product List Page:

In the settings page, configure the following settings:

• Color palette style:
  • Default style: Choose from three default styles: Round, Square, or Rounded Rectangle.
  • Custom style: Adjust the opacity, corner radius, size, and thickness.
    

    Note: Customized size and thickness apply only to the Product Detail Page and are not supported on the Product List Page.

• Special variant:

• • Configure three preset bubble styles directly.
  • Customize bubble colors.
  • Optionally, display a specific color palette on the Product Detail Page in separate lines and customize the title line to fit your needs.

• Product Detail Page: Choose whether to display the color palette in the Add to cart plugin.
• Product list page:

• • Display Sold Out status: Once enabled, out-of-stock variants will be marked as "Sold Out."
  • Color palette display restriction: Choose to display 1 line, 2 lines, or unlimited lines (display all) for the color palette.
  • Display style for exceeded limit: Choose to display either a "More" icon or the remaining quantity when the limit is exceeded.
  • Display position: Choose to display the color palette Above or Below the product information.
  • Product image switching style: Choose whether the product image changes when the customer hovers over the color palette or clicks on a palette option.
  • Product image cropping rule: Choose to follow the theme or use the default cropping style.

If the color palette is successfully configured, the display effect on the product list page may look like this:

Setting Up Product Filters  

The Filter feature allows you to create filters that help customers sort products based on product attributes. Once configured, these filters will be displayed on your store pages, helping customers quickly find the variants they need, ultimately boosting conversion rates.

1. Go to the Filter section of the app.
   
2. Configure the display positions of filters for both mobile and desktop, with a real-time preview:
   

• • Mobile: Choose between Slide out from sides or Slide out from bottom.
  • Desktop: Choose between Fixed to left side or Fixed at top.

3. Customize how filters collapse:
   

• • After selection: Filters automatically collapse after the customer selects a filter value.
  • After App confirmation: Filters collapse after the customer selects a filter value and confirms the filter conditions.

4. Tailor filters such as size, color, and price to suit your products. If needed, click Add filter to include additional options. When you select a filter type, the app will automatically retrieve the relevant filter values for the products in your store.
   
   
   

Once the filters are set up, they will be applied to the product list page in your store. Below are examples of how the display effects may look:

• Fixed at top
  
• Fixed to left side
  

Setting Up Sorting Options 

The Sort feature allows you to configure product sorting options in your store. By setting up sorting options, you can help customers easily navigate through product lists, enhancing their shopping experience. You also have the flexibility to customize the names of the sorting options based on your store’s needs.

• Product sorting: You can enable or disable sorting options and customize their names, including:
  • Recommended
  • Most popular
  • Recently updated
  • Price: low to high
  • Price: high to low
  • Created: new to old
• Settings for ‘Recommended’ sort option: 
  • The following sorting options apply 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
  • For single Product Collection Pages, these sorting options also apply:
    • 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