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

christian_russo
Pathfinder
203 1 42

hi! 

 

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

Scherm­afbeelding 2024-05-14 om 13.27.45.png

 

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

thanks!

 

Replies 14 (14)

BSSTech-Venture
Shopify Expert
248 50 57

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: 

BssTechVenture_0-1715686876489.png

 

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: 

BssTechVenture_1-1715687165219.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

christian_russo
Pathfinder
203 1 42

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

Scherm­afbeelding 2024-05-14 om 13.55.47.png

BSSTech-Venture
Shopify Expert
248 50 57

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

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

christian_russo
Pathfinder
203 1 42

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

BSSTech-Venture
Shopify Expert
248 50 57

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: 

BssTechVenture_1-1715693163492.png

 

BssTechVenture_0-1715693069918.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

christian_russo
Pathfinder
203 1 42

this doesn't work for me

christian_russo
Pathfinder
203 1 42

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

Scherm­afbeelding 2024-05-14 om 15.43.02.png

BSSTech-Venture
Shopify Expert
248 50 57

Hi @christian_russo , Do you want to delete this?

BssTechVenture_0-1715694911907.png

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

christian_russo
Pathfinder
203 1 42

yes

BSSTech-Venture
Shopify Expert
248 50 57

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: 

BssTechVenture_0-1715695384397.png

 

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

christian_russo
Pathfinder
203 1 42

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

BSSTech-Venture
Shopify Expert
248 50 57

@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: 

BssTechVenture_0-1715696100915.png

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 😍

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

For B2B solutions and custom pricing, check out B2B Solution & Custom Pricing |
For adding product labels/badges, visit Product Labels by BSS

BSS Commerce - Shopify Apps & Store Development Service Provider

Hire a Shopify expert | Shopify Plus Store Development

Moeed
Shopify Partner
3769 953 1185

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:

Moeed_0-1715687965109.png

 

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

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
christian_russo
Pathfinder
203 1 42

this didn't work 😞