How can I adjust the drop down filter location in the Dawn theme?

Store Design
1

hi,

how can i fix the drop down filter location?

is on the word

i need to move it little bit left

MYKjewelry_0-1689715629219.png
MYKjewelry_0-1689715629219.png1277Ă—204 63.6 KB

please help!

store url: https://brebojewelry.myshopify.com/collections/necklaces

1 Like
2

Hi @YMKjewelry ,

Im not sure which fliter youll like to move? Is it the popularity filter? If its, try this.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
  4. And Save.
.facet-filters.sorting.caption {
    padding: 0px;
}
form#FacetFiltersForm {
    gap: 0;
}

Result:

Ribe_Dagandara_0-1689717415380.png
Ribe_Dagandara_0-1689717415380.png1360Ă—237 137 KB

I hope it help.

3

its not the popoularity filter

let me mark it

MYKjewelry_0-1689743722969.png
MYKjewelry_0-1689743722969.png1277Ă—204 66.9 KB

1 Like
4

Okay got it, like this?

Ribe_Dagandara_0-1689770774590.png
Ribe_Dagandara_0-1689770774590.png1350Ă—225 157 KB

This is the code: Same Instructions.

.facets-container.scroll-trigger.animate--fade-in {
    justify-content: end;
}

i hope it help.

5

no sir,

cant you see the “V” on the word “price” and “Avalability” ?

thanks for helping.

1 Like
6

Oh so sorry im so dumb, I keep ignoring that drop down icons. Try this one.

Same Instructions.

summary.facets__summary.caption-large.focus-offset>div {
    display: flex;
    flex-direction: row-reverse;
}                                                       
summary.facets__summary.caption-large.focus-offset span {
    padding-right: 10px;
}
svg.icon.icon-caret {
    position: relative;
}
.facet-filters.sorting.caption .select {
    flex-direction: row-reverse;
}
svg.icon.icon-caret {
    margin: auto;
}

I fix the other drop down icons it keep flying anywhere. :sweat_smile: