PixelHaze Plugins: Squarespace Shop Filter

Originally designed to help users filter our collection of Squarespace plugins, we have decided to release our shop’s filter as a standalone plugin.

Pre-installation:

Before you can install the code, there are some pre-requisites that need to be taken care of. Our plugin makes use of categories and tags assigned to your products; it uses them to filter.

In our shop page, we use tags to separate each plugin by developer, and categories to separate each plugin by its purpose.

1) To use this plugin on a single page, copy & paste this code into Page Header Code Injection area.

<style>
       .shop-filter-wrapper{
                margin: 0;
                padding: 0;
                font-family: arial;
                width: 100%;
                margin-top: 15px;
            }
            .shop-filter-row{
                display: flex;
            }
            .shop-filter-col-one{
                flex: 1;
                background-color: #001242;
            }
            .shop-filter-col-two{
                flex: 2;
                background-color: #001242;
            }
            .shop-filter-col-four{
                flex: 4;
                background-color: #001242;
            }
            
            .shop-filter-title-one, .shop-filter-title-two{
                color: #fff;
                display: block;
                width: 100%;
                margin-top: 45px;
                padding-bottom: 15px;
                padding-left: 15%;
                padding-right: 5%;
                font-size: 14px;
                text-transform: uppercase;
            }
            #shop-filter-select-one, #shop-filter-select-two{
                margin-top: 35px;
                margin-left: 5%;
                
                height: 40px;
                background-color: #fff;
                color: #a8a8a8;
                padding: 15px;
                width: 90%;
                font-size: 16px;
            }
            .shop-filter-button{
                width: 100%;
                padding: 40px 0 40px 0;
                background-color: #00ADE0;
                border: 1px solid #00ADE0;
                color: #fff;
                font-size: 25px;
                display: block;
                text-transform: uppercase;
            }
            
            @media only screen and (max-width: 600px){
                .shop-filter-row{
                    display: block;
                }
                .shop-filter-title-one,.shop-filter-title-two{
                    padding-top: 10px;
                    padding-left: 5%;
                    margin-top: 15px;
                }
                #shop-filter-select-one, #shop-filter-select-two{
                    margin-top: 20px;
                    margin-bottom: 20px;
                    width: 90%;
                    margin-left: 5%;
                }
                .shop-filter-button{
                    margin-top: 20px;
                }
            }
        </style>