How to Add Variation Swatches to product Filters

Adding variation swatches to product filters enhances the shopping experience by allowing customers to filter products based on specific attributes like size, color, or any other custom attribute. Here's how you can display the variation swatches you've created in your product filters using SellKit's "Product Filter Widget" in Elementor.

Step 1: Access the Product Filter Widget

Firstly, open your shop page or any product archive page with Elementor:

• Navigate to the page you wish to edit and click on Edit with Elementor.
• From the Elementor sidebar, search for the Product Filter Widget provided by SellKit.
• Drag the widget to the appropriate section of your page where you want the filter to appear.

Step 2: Configure the Filter for Variation Swatches

Once the widget is in place:

• In the Layout tab, click on + New Item button.
• Choose Custom Attribute in the type section.
• Choose the attribute that corresponds to the variation swatches you want to display, such as "Size" or "Color".

Step 3: Style the Swatches

After setting up the filter:

• Switch to the Style tab within the widget settings.
• This section allows you to customize the appearance of your variation swatches. You can modify the alignment, typography, color, and even the background type.
• For instance, if you are working with button swatches, open the button list section to reveal its style settings.

Step 4: Save and Preview

Once you are satisfied with the configurations and the style customizations:

• Click on the Update button to save your changes.
• It's always good practice to preview the page to ensure the filters appear and function as expected on the front end.