Global Styling the Filter Module

Apart from the local styling options, you can find additional global styling options, which means that the changes done in this section will be applied to all the Filter Modules on your website. You can find the Global Styling for the Filter Module on the Global Styling tab of the editor, under the Shop Settings on the left side menu.

 

1. Background

In this section you can define an overall color and set its transparency for the background of the filter module, seen in the margins between each filter option.

 

2. Title

In this section you can define the background color and its transparency for the filter options box as well as style the font of the title in terms of color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options. It is also possible to define the padding.

 

3. Options

In this section you can style the options font in terms of color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options as well as alignment.

 

4. Price Text

In this section you can style the price text in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options.

 

5. Clear Text

In this section you can style the clear text in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options.

 

6. Price Range Bar

The last section allows you to fully style the price range bar. You can define the slider bar color, both when it is selected or unselected, the slider drag handle color and the slider drag handle border color. 


7. Apply Global Styling

As soon as you save your Global Styling, all the Filter Modules will inherit that styling. However, if later you choose to style a filter locally, it will overwrite the global styling but only for that specific Filter Module. Click here to read more about the Filter Module local styling!

 

 

Anything we’ve not covered?

Contact Us