Make filter 2 columns - Testament Theme

[SaucyPeach]

I am trying to add more space between count down banner and collection that is below using Testament Theme.

saucypeach.com

P/W - Password

[Made4uo-Ribe · Accepted solution]

Hi @SaucyPeach 

Do you mean like this?

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.c-accordion__inner ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[PageFly-Amelia · Accepted solution]

Hi @SaucyPeach 

This is Amelia from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

<style>

div#c-accordion__panel--2__main-list-1 ul {

    display: grid;

    grid-template-columns: auto auto;

    align-items: baseline;

}

</style>

Hope that my solution works for you.

Best regards,

Amelia | PageFly

[Made4uo-Ribe · Accepted solution]

Yes, we can. 

I also add the gap on the column so they have are not look like connected. 

Replace the code on this one.

.c-accordion__inner ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}
span.filter__count {
    display: none;
}

And Save. 

Result:

If you dont like the column-gap, you can remove anytime. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe · Accepted solution]

Yeah, Add this code after the last last curly bracket } on the base.css folder. 

a.js-collection-side-filter .checkbox-indicator {
    border-radius: 50%;
}

And Save. 

If you like to same size of the color filter below replace on this code. 

a.js-collection-side-filter .checkbox-indicator {
    border-radius: 50%;
    width:var(--color-filter-size, 20px)!important;
    height: var(--color-filter-size, 20px)!important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[Made4uo-Ribe · Accepted solution]

Hi @SaucyPeach 

Do you mean like this?

If it is check this one.

From you Admin page, go to Online Store > Themes

Select the theme you want to edit

Under the Asset folder, open the main.css(base.css, style.css or theme.css)

Then place the code below at the very bottom of the file.

.c-accordion__inner ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[SaucyPeach]

Is there away to remove the product counter so that the txt is aligned?

[Made4uo-Ribe · Accepted solution]

Yes, we can. 

I also add the gap on the column so they have are not look like connected. 

Replace the code on this one.

.c-accordion__inner ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 10px;
}
span.filter__count {
    display: none;
}

And Save. 

Result:

If you dont like the column-gap, you can remove anytime. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[SaucyPeach]

Amazing thank you!

One last request, can you make the filter squares into circles?

[Made4uo-Ribe · Accepted solution]

Yeah, Add this code after the last last curly bracket } on the base.css folder. 

a.js-collection-side-filter .checkbox-indicator {
    border-radius: 50%;
}

And Save. 

If you like to same size of the color filter below replace on this code. 

a.js-collection-side-filter .checkbox-indicator {
    border-radius: 50%;
    width:var(--color-filter-size, 20px)!important;
    height: var(--color-filter-size, 20px)!important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[SaucyPeach · Accepted solution]

Legend!

Thank you so much for your help

[BSS-TekLabs]

- Here is the solution for you @SaucyPeach 
- Please follow these steps:
1. Go to Online Store --> Theme --> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head> and press 'Save' to save it

<style>
.global__section.section-countdown {
    margin-bottom: 200px !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[PageFly-Amelia · Accepted solution]

Hi @SaucyPeach 

This is Amelia from PageFly - Landing Page Builder App

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: paste bellow code in tag </body> -> save.

<style>

div#c-accordion__panel--2__main-list-1 ul {

    display: grid;

    grid-template-columns: auto auto;

    align-items: baseline;

}

</style>

Hope that my solution works for you.

Best regards,

Amelia | PageFly

[SaucyPeach]

Is there away to remove the product counter so that the txt is aligned?