Search page layout customisation

tikitech · March 12

Hi,

I want to customise the search page with similar layout of product archive page. How can we do it?

Phil · March 12

Hi,

If in Betheme -> Theme options -> Search -> Form, you change the search option to search only through the products, the search result page will have the same layout as your shop archive.

Best regards

tikitech · March 13

When we are viewing it over mobile the search box is appearing in left and getting out of screen. How can we fix it and take it centre of screen and we want the products to show on the top then the categories. Thanks

Phil · March 13

Please always attach a link to your website so we can check it out. If the page is offline(localhost), then our help will be limited. You will have to contact us when the page is online. Also, please make sure that the page is not under maintenance before you provide us with the link.

Thanks

tikitech · March 13

https://winkaccessories.in/

Phil · March 13

Please use the following CSS code:

@media only screen and (max-width: 767px){
 .mfn-header-tmpl .column_header_search .mfn-live-search-box{
   left: 0!important;
 }
}

Put it in Betheme -> Theme options -> Custom CSS & JS -> CSS.

Best regards

tikitech · March 14

Thanks for the help. Kindly also help how I can get the products on the top of search and categories below it.

Please let me know how to get it done.

Phil · March 14

Do you mean the search field?

If yes, try the following CSS code:

.search_wrapper .mfn-live-search-list{
 display: flex;
 flex-direction: column-reverse;
}

Best regards

tikitech · March 14

Thanks. It has resolved the issue.

tikitech · March 14

Can you also guide me how we can customise the search result page? Currently it is appearing in not a very appealing format. We would like to appear similar to Product listing page. We also like to change the size title of the page.

Product listing page - https://winkaccessories.in/shop/

Search page - https://winkaccessories.in/?s=lil&mfn_livesearch&searchpage

Phil · March 14

Where did you get this link?

I used the search field, and it looks like this:

Best regards

tikitech · March 14

I got it. You typed in the seachbox and clicked enter. This is what I want but still the fonts are off. We need to fix it.

In the bottom of the search box there is a link and when you click on that link I get that listing? See the image below.

Phil · March 14

Alright, thanks for the explanation.

I have passed it on to the development team, and we will look into this closely.

Best regards

tikitech · March 15

In the meantime how can I hide the see all result button?

Phil · March 15

Please use the following CSS code:

.mfn-live-search-box .button{
 display: none!important;
}

Best regards

tikitech · March 29

Did you manage to find the solution for the search. When enter is pressed or clicked the button below the UI is not as per the theme. How do we fix it?

Phil · March 29

It was resolved in the last update.

You can find the changelog here: https://support.muffingroup.com/changelog/.

Best regards

Search page layout customisation

Comments