Collection product page filter and number problem css

Store Design
, , , , ,

Topic summary

A Shopify store owner using the Studio theme reports two CSS layout issues on their collection page:

Problems identified:

  • Filter elements displaying incorrectly
  • Pagination numbers showing vertically instead of horizontally

Solutions offered:

Three different CSS fixes were proposed:

  1. DaisyVo’s approach: Add custom CSS through Theme Settings > Custom CSS, targeting .pagination__list>li with flex: unset for pagination, plus additional code to restructure the filter form display and hide active facets.

  2. Valya_1’s diagnosis: Suggests the issue may be caused by something overwriting default styles after page load. Recommends checking recently added third-party apps or scripts as potential culprits.

  3. topnewyork’s solution: Modify theme.css/base.css directly by adding code targeting .svg-wrapper, nav.pagination, and .pagination-wrapper to fix spacing and display properties.

All responders provided screenshots demonstrating their proposed fixes. The discussion remains open with multiple viable solutions presented but no confirmation of which approach was implemented.

Summarized with AI on November 3. AI used: claude-sonnet-4-5-20250929.
1

Hey !

i have some trouble about design on collection page :

filter :

Capture d’écran 2024-12-25 à 15.11.43.png
Capture d’écran 2024-12-25 à 15.11.43.png3826×1574 183 KB

numbers of pages :(have to be show horizontally but now is vertical)

Capture d’écran 2024-12-25 à 15.12.00.png
Capture d’écran 2024-12-25 à 15.12.00.png4020×1366 148 KB

how can i fix this ?

link: https://utopia-paris.fr/collections/bagues

theme: studio

thanks !

2

HI @UTOPIA-PARIS

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
.pagination__list>li {
    flex: unset !important;
}

Here is the result:

image_720.png
image_720.png720×386 25.5 KB

form#FacetFiltersForm {
    display: flex !important;
    gap: 0 !important;
    width: 100% !important;
}
.active-facets.active-facets-desktop {
    display: none !important;
}
.facets__summary .icon-caret {
    top: 25% !important;
}
.facets__summary {
    margin-bottom: 0 !important;
}
div#FacetsWrapperDesktop h2#verticalTitle {
    margin: 0 !important;
}

Here is the result:

image.png
image.png1340×626 13.5 KB

I hope this helps

Best,

Daisy

3

Hey there,

The issue seems to be that something is overwriting the elements. When the page is first rendered, the filters and pagination appear as they’re supposed to.

If this issue started happening recently, I recommend checking any third-party apps or scripts that were added last.

If you need further assistance, let me know - I’d be happy to investigate this further for you!

Screenshot 2024-12-25 at 15.34.52.png
Screenshot 2024-12-25 at 15.34.52.png2796×682 14.8 KB

4

image.png
image.png701×154 493 Bytes

Hello, @UTOPIA-PARIS

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
.svg-wrapper {
    margin-right: 14px !important;
}

nav.pagination {
    display: table-caption;
}
.pagination-wrapper {
    justify-items: center !important;
}

Thanks!