Search results page - Focal Theme

Store Design
, ,

Topic summary

A user seeks to customize the mobile search results page on their Shopify store using the Focal theme. They want to:

Requested Changes:

  • Remove the “Works (3)” section and two lines above it from search results
  • Adjust input field padding to move typing space slightly left across all input fields (search bar, newsletter, etc.)

Solution Provided:
Two community members offered CSS code snippets to add to the theme.css file:

  • Hide the search tabs navigation element
  • Adjust input field padding using .input__field{padding: 0 5px;}
  • Additional CSS to hide tab scrollers and center page header elements

Status: The original poster confirmed the solution worked. The helper offered continued support for future customizations.

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

Here is an image of the search results on mobile:

FullSizeRender_dbe764d6-4c31-4a1b-a3cb-b93df43343d3.jpg
FullSizeRender_dbe764d6-4c31-4a1b-a3cb-b93df43343d3.jpg1170×1462 76.5 KB

I would like to remove the part that has Works (3) and the two lines above it. Also would like to move the typing space on the search bar a bit to the left. Can’t find any code sections to modify this.

2

@galleriste Can you please share this page link?

1 Like
3

Also, the search bar input thing is the same for newsletter so I would like to move the typing space slightly to the left on everything that you type on the site.

4

here is the link: https://568839.myshopify.com/

5

@galleriste

please add this css to the very end of your theme.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → theme.css

.input__field{padding: 0 5px;}

tabs-nav#search-tabs-nav {display: none;  visibility: hidden;}
1 Like
6

Thanks!

1 Like
7

Hello, @galleriste

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom
@media screen and (min-width: 741px) {
    .main-search__form + .tabs-nav {
        display: none;
    }
}

.tabs-nav__scroller-inner {
    display: none !important;
}
    .page-header__text-wrapper {
        justify-items: center !important;
}

Thanks!

8

@galleriste welcome, do let me know if you have any other updates, you can here or on email below