Make filter 2 columns - Testament Theme

Shopify Discussion
1

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

P/W - Password

SaucyPeach_0-1726756839854.png
SaucyPeach_0-1726756839854.png501×637 22.5 KB

2 Likes
2

Hi @SaucyPeach

Do you mean like this?

Made4uoRibe_0-1726757418445.png
Made4uoRibe_0-1726757418445.png379×499 5.41 KB

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!

3
  • 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 and press ‘Save’ to save it
  • Here is the result you will achieve:

BSSTekLabs_0-1726757577319.png
BSSTekLabs_0-1726757577319.png1901×541 81.1 KB

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

4

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 → save.

div#c-accordion__panel--2__main-list-1 ul { display: grid; grid-template-columns: auto auto; align-items: baseline; }

Hope that my solution works for you.

Best regards,

Amelia | PageFly

1 Like
5

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

6

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

7

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:

Made4uoRibe_0-1726760150381.png
Made4uoRibe_0-1726760150381.png367×622 5.95 KB

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!

1 Like
8

Amazing thank you!

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

9

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:

Made4uoRibe_0-1726762463266.png
Made4uoRibe_0-1726762463266.png483×659 8.62 KB

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

1 Like
10

Legend!

Thank you so much for your help

11

Hi, I hope you don’t mind me contacting you directly but you were able to help me changing the shape of my filter options to circles. Something happened and now the Color filter is back to square. Are you able to help again and make them a circle again?

Thanks

12

Hi,

Are you able to help me please? the color swatch filters don’t show the color anymore.

13

@SaucyPeach Hi I`ll help you with that come lets connect