Mobile Overlay

With any of our search pages, our base template code—HTML, CSS, and JavaScript—will be available from the start. This can be used as is or heavily modified in both styling and behavior. This section provides a streamlined reference to configure and customize the Overlay Mobile Search features. For further assistance or advanced customization, please refer to the detailed code comments or contact the support team.

Getting Started with your managed Mobile Overlay

The very first thing is to check the trigger_selector variable in the JavaScript section. This should be set to the HTML selector of your website that you want to use in order to activate the search. It can be multiple selectors, for example, one trigger in your header and one in the page footer. The default is input[type='search'], which might work straight out of the box if you want to use your existing search input field as the trigger.

Vertical and Horizontal Content Option

Control how content (Categories, Site pages, etc.) is displayed by toggling between vertical and horizontal views, depending on your layout preference. In the vertical view, the UI will display a traditional list of links, which can be accessed by pressing the relevant menu option. In contrast, the horizontal view will always display above the product search results in a scrollable row. Generally, this view is easier to access but lacks the full overview provided by the vertical list.

{# boolean show_vertical_link_content = false #}

Grid and List View of Products Layout

Toggle between a grid or list view for displaying products. When this boolean is set to true, the search results will display products in a 2x2 grid. Otherwise, a more space-efficient list will be shown if set to false. You can even customize the layout further by modifying the product_grid_layout variable. This allows you to display a list of products in the initial content view and switch to a grid for the full search results.

{# boolean product_grid_layout = true #}

Recent Searches

Recent searches are automatically stored when a product is clicked after performing a search, allowing users to revisit past queries. In the JavaScript initialization code, you can toggle a simple boolean to enable or disable the display of recent searches.

/* boolean */ var show_recent_searches = true;
/* boolean */ var recent_search_list_limit = 4;

Controlling the Header and Navigation UI

There are built-in boolean values that can be used to modify the navigation and header of the search interface. For example, you can choose to display the navigation buttons at the top of the search or hide them and instead show an alternative menu at the bottom. You can also mix and match, hiding certain parts of the header while simultaneously displaying the alternative bottom navigation island.

You can hide specific parts of the UI using the following variables:

Variable	Description
`hide_header`	Hides the entire header, including the logo, filter, and close buttons
`header_logo_url`	Leave this string empty to prevent the logo from rendering
`show_header_filters`	Toggles the visibility of the header filter button
`show_header_close`	Toggles the visibility of the header close overlay search button
`show_footer_navigation_island`	Displays a fixed navigation bar near the bottom of the screen

Mobile Search Variables

JavaScript Configuration

Variable	Description
`trigger_selector`	A string, taking HTML selector(s) that activate the search overlay on click. Most often your existing input field for your current search.
`preselected_filters`	String of filters you want applied by default when activating the search. Example: `isOnSale:true`, `hierarchies:Clothing$Accessories$`.
`blur_container_selector`	HTML selector for the container to apply a blur effect when the search is active.
`auto_hide_content_tabs`	Automatically hides content tabs when the search overlay is active.
`show_recent_searches`	Boolean, show your most recent search history in the Initial content section before you search.
---

HTML/Liquid Configuration

Variable	Description
`webshop_name`	Name of your webshop.
`text_type_to_search`	Placeholder text in the search input.
`text_sorting_title`	Title for the sorting section.
`text_go_directly_to`	If Redirects are enabled, this will be the title when the search hits a redirect.
`text_recent_searches`	Title for the recent searches section.
`text_products_title`	Title for the products section. Typically "Products"
`text_show_results`	Button text to display search results.
`text_products`	Label for products.
`header_logo_url`	Image URL for the shop logo. Leave empty `""` if you don't wish to have a logo in the search.
`show_header_close`	Show or hide the close button in the header.
`show_header_filters`	Show or hide the filters button in the header.
`hide_header`	Option to hide the header completely.
`search_box_shadows`	Enable or disable shadows on the search box.
`primary_shop_color`	Primary color for the shop theme.
`secondary_shop_color`	Secondary color for the shop theme.
`close_button_color`, `filters_button_color`, `search_button_color`, `back_button_color`, `filters_reset_button_color`	Colors for respective buttons, typically set to `{{ primary_shop_color }}`.
`show_product_extra`	Toggle the display of extra product information. By default the `product.brand` of the product. But design to contain any extra data for a product card
`text_filter_title`	Title for the filters section. Typically "Filters"
`text_reset_filter_title`	Button text for resetting filters.
`product_labels`	Toggle the display of product labels.
`product_sale_label_text`	Text for the sale label on products.
`show_footer_navigation_island`	Boolean, toggels an alternative navigation island in the footer of the search
`show_vertical_link_content`	Boolean, Toggle for displaying content in vertical vs horizontal layout.
`product_grid_layout`	Toggle for grid vs list layout of product cards in search.
`search_input_character_limit`	Maximum number of characters allowed in the search input.
`result_subtitle`	Subtitle showing search results summary.
`result_filters_subtitle`	Subtitle showing filtered search results summary.
`text_synonym_only_suggested`	Message displayed when no exact matches are found, but suggestions are shown.
`text_synonym_mixed`	Message displayed when expanded search results are shown.

CSS Configuration

Variable	Description
`webshop_logo_width`	Width of the webshop logo.
`background_image`	URL for the background image.
`background_color_rgba`	Background color with RGBA values.
`primary_shop_color`	Primary color for the shop theme.
`fade_effects`	Enable or disable fade effects.
`search_bar_border_px`	Border width of the search bar in pixels.
`search_bar_border_radius_px`	Border radius of the search bar in pixels.
`search_bar_font_size`	Font size of the search bar text.
`search_bar_font_weight`	Font weight of the search bar text.
`search_bar_input_color`, `search_bar_background_color`, `back_button_background_color`	Colors for search bar text, background, and back button background.
`search_input_center`	Center the search input text.
`redirect_text_color`, `redirect_link_color`, `redirect_label_color`	Colors for redirect text, links, and labels.
`back_button_color_color`	Color of the back button.
`back_button_border_px`, `back_button_border_radius_px`	Border width and radius for the back button.
`filter_button_background_color`, `filter_button_color`	Background and text color for the filter button.
`filter_button_border_px`, `filter_button_border_radius_px`	Border width and radius for the filter button.
`active_tab_title_color`, `tab_title_color`, `tab_subtitle_color`, `tab_subtitle_highlight_color`	Colors for active tab titles, tab titles, subtitles, and highlighted subtitles.
`tab_active_background_color`, `tab_inactive_background_color`	Background colors for active and inactive tabs.
`tab_header_active_border_radius_px`, `tab_header_border_radius_px`	Border radius for active and general tab headers.
`tab_header_active_border_px`, `tab_header_border_px`	Border width for active and general tab headers.
`tab_header_box_shadow_color`	Box shadow for tab headers.
`product_tile_background_color`	Background color for product tiles.
`product_tile_title_font_size`, `product_tile_title_font_weight`	Font size and weight for product titles.
`product_tile_title_color`	Color of product titles.
`product_image_width`, `product_image_height`	Width and height of product images.
`product_image_max_height_px`, `product_image_border_radius_px`	Maximum height and border radius for product images.
`product_description_font_size`, `product_description_font_weight`	Font size and weight for product descriptions.
`product_description_color`	Color of product descriptions.
`product_price_font_size`, `product_price_color`, `product_price_on_sale_color`	Font size and colors for product prices.
`filter_header_background`	Background color for filter headers.
`notification_bubble_background_color`, `notification_bubble_color`	Background and text color for notification bubbles.
`filter_color_even`, `filter_color_odd`	Background colors for even and odd filter items.
`filter_show_results_button_background_color`, `filter_show_results_button_color`	Background and text color for the "Show Results" button in filters.
`range_filter_slider_border_color`, `range_filter_slider_background_color`	Border and background colors for range filter sliders.
`range_filter_slider_draggable_background_color`	Background color for the draggable part of range filter sliders.
`filters_back_button_background_color`, `reset_filters_button_background_color`	Background colors for the filters back button and reset filters button.
`reset_filters_button_border_px`, `reset_filters_button_border_radius_px`	Border width and radius for the reset filters button.