Skip to content

Mobile Overlay

The overlay mobile search template can be created inside the My Hello Retail dashboard. Navigate to Search > Overview, click "Create new", then choose "Overlay > Mobile". This will generate a base template with HTML, CSS, and JavaScript code, which, depending on your site, might be ready to use right away. It can either be used as-is or heavily modified in both styling and behavior. This section provides a streamlined reference to configure and customize aspects of the Overlay Mobile Search. For further assistance or advanced customization, please refer to the detailed code comments or contact the support team.

Set up the Trigger Selector

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

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

Toggle between a grid or list view for displaying products. When the product_grid_layout 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;

Header and Navigation

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

JavaScript Varaibles

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 Varaibles

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 Varaibles

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.