is it possible to change this word from filter to refine and remove those lines?

[christian_russo]

hi! 

is it possible to change the word from "filter" to "refine" and. remove those 2 lines? 

site: https://www.gallerychristian.com/

thanks!

[BSSCommerce-HDL]

Hi @christian_russo, Insert this code to your file css : 

.collection-toolbar__button-list {
    box-shadow: 0 1px rgb(var(--border-color)), 0 -1px rgb(var(--border-color)) !important;
}

.collection-toolbar {
    box-shadow: none !important;
}

After, let's try to search file theme.liquid: 

Next, Insert the below code at file -> Save

<script>
   window.onload = () => {
   let collection_toolbar = document.querySelector('.collection-toolbar__button.heading');
    if(collection_toolbar) {
      collection_toolbar.textContent = "refine";
    }
   }
</script>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[christian_russo]

this worked but is it possible to remove the box around it? and align it with the breadcrumbs? like this: 

[BSSCommerce-HDL]

Hi @christian_russo, Can you kindly share the details of your problem (link page) with us? We will check it and suggest you a solution if possible.

[christian_russo]

https://www.gallerychristian.com/collections/view-all. this is the page I just need it as the picture above, nicely aligned and no boxes around the word refine

[BSSCommerce-HDL]

Hi @christian_russo, Replace my old code with this new code to your file css : 

.collection-toolbar__button-list {
    box-shadow: 0 1px rgb(var(--border-color)), 0 -1px rgb(var(--border-color)) !important;
}

After, let's try to search file theme.liquid
Next, Replace my old code with this new code -> Save

<script>
   window.onload = () => {
   let collection_toolbar__button = document.querySelector('.collection-toolbar__button.heading');
   let breadcrumb = document.querySelector('.breadcrumb.breadcrumb--floating');
   let collection_toolbar = document.querySelector('.collection-toolbar');
    if(collection_toolbar__button && collection_toolbar && breadcrumb) {
      collection_toolbar__button.textContent = "refine";
      collection_toolbar.insertAdjacentElement('afterbegin', breadcrumb)
    }
   }
</script>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[christian_russo]

this doesn't work for me

[christian_russo]

I can align the text but I can't remove the box above it, this is how it looks now: 

[BSSCommerce-HDL]

Hi @christian_russo , Do you want to delete this?

[christian_russo]

yes

[BSSCommerce-HDL]

Hi @christian_russo, Pls insert this code to your file css :

body:not(.content-over-media) x-header.header {
    box-shadow: none !important;
}

Here is result: 

[christian_russo]

this worked and is it possible to reduce the white space ? 

[BSSCommerce-HDL]

@christian_russo  Sure, Pls insert this code to your file css : 

body:has(.collection) .relative.section-spacing.section-spacing--tight {
    display: none !important;
}

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Moeed]

Hey @christian_russo 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
height-observer.collection-toolbar.full-bleed {
    box-shadow: unset !important;
}
.collection-toolbar__button-container {
    border-inline-start-width: 0px !important;
}
</style>

RESULT:

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[christian_russo]

this didn't work 😞