Switching from a tiny magnifying glass to a full width search bar in Shopify Horizon theme makes search instantly visible, speeds up product discovery, and enriches merchandising insights unlocking several strategic advantages:
Visual Presence
• Provides an always visible input field that immediately signals search capability
• Occupies horizontal header space, balancing logo and navigation for a polished look
• Reduces reliance on small icons that can be overlooked on high resolution or busy hero imagery
• Reinforces brand palette through styled borders, placeholder text, and focus states
User Experience
• Saves one click by letting customers type queries directly, shortening the path to results
• Improves accessibility for keyboard and screen-reader users who might miss an icon-only trigger
• Enhances mobile usability with a thumb friendly tap area larger than a tiny magnifying glass
• Offers instant feedback when paired with predictive suggestions or recent search dropdowns
Conversion Lift
• Increases product discovery as more visitors use search when the bar is prominent
• Boosts add to cart rates by surfacing relevant items faster, reducing browse fatigue
• Lowers bounce rates; shoppers who find what they need quickly are more likely to stay and purchase
• Encourages upsells and cross sells when autocomplete highlights complementary products
Data and Merchandising Insights
• Generates richer search term data, revealing trends that guide inventory and marketing decisions
• Highlights zero result queries, steering content creation or product sourcing
• Supports A/B testing of placeholder copy like “Search dresses, hoodies, gifts” to direct traffic strategically
• Feeds analytics platforms with higher query volume, enabling more precise merchandising rules
CODE : Replace snippets/search.liquid
{% comment %}
<!-- Designed by OnHOW YouTube Channel - Anas El Medlaoui -->
{% endcomment %}
{% unless style == 'none' %}
<search-button class="search-action onhow-search-wrapper{% if class != blank %} {{ class | strip }}{% endif %}">
<!-- Desktop Search Bar -->
<form action="{{ routes.search_url }}" method="get" role="search" class="onhow-search-bar">
<div class="onhow-search-bar__container">
<span class="onhow-search-bar__icon svg-wrapper" aria-hidden="true">
{{ 'icon-search.svg' | inline_asset_content }}
</span>
<input
type="search"
name="q"
class="onhow-search-bar__input"
placeholder="{{ 'content.search_input_placeholder' | t }}"
value="{{ search.terms | escape }}"
autocomplete="off"
>
<input type="hidden" name="type" value="product">
<button type="submit" class="onhow-search-bar__submit visually-hidden">
{{ 'accessibility.search' | t }}
</button>
</div>
</form>
<button
on:click="#search-modal/showDialog"
class="button button-unstyled search-modal__button header-actions__action onhow-mobile-search-icon"
name="Search"
>
<span aria-hidden="true" class="svg-wrapper">
{{ 'icon-search.svg' | inline_asset_content }}
</span>
<span class="visually-hidden">
{{ 'accessibility.open_search_modal' | t }}
</span>
</button>
</search-button>
{% endunless %}
{% stylesheet %}
.search-action {
--search-border-radius: var(--style-border-radius-inputs);
--search-border-width: var(--style-border-width-inputs);
display: flex;
}
.header__column--center .search-action {
width: auto;
flex-grow: 1;
}
:is(.header__column--left, .header__column--center) .search-action {
@media screen and (width >= 750px) {
margin-inline: calc(var(--padding-lg) * -1);
}
}
.header__column--right .search-action {
@media screen and (width >= 750px) {
margin-inline: calc(var(--gap-md) * -1) calc(var(--gap-xs) * -1);
}
}
.onhow-search-wrapper {
position: relative;
width: 100%;
}
.onhow-search-bar {
display: none;
width: 100%;
max-width: 250px;
}
.onhow-search-bar__container {
position: relative;
display: flex;
align-items: center;
background-color: rgba(from var(--color-input-background) r g b / 0.38);
border: var(--search-border-width) solid rgba(from var(--color-input-border) r g b / 0.26);
border-radius: var(--search-border-radius);
transition: all 0.3s ease;
}
.onhow-search-bar__container:focus-within {
background-color: var(--color-input-background);
border-color: var(--color-foreground);
}
.onhow-search-bar__icon {
position: absolute;
left: calc(var(--padding-md) * 0.8);
z-index: 1;
color: var(--color-input-text);
opacity: 0.6;
width: var(--icon-size-md);
height: var(--icon-size-md);
pointer-events: none;
}
.onhow-search-bar__input {
width: 100%;
background: transparent;
border: none;
padding: calc(var(--padding-md) * 0.8) calc(var(--padding-md) * 0.8) calc(var(--padding-md) * 0.8) calc(var(--icon-size-md) + var(--padding-lg));
font-family: var(--font-body-family);
font-size: var(--font-size-sm);
color: var(--color-input-text);
outline: none;
}
.onhow-search-bar__input::placeholder {
color: rgba(from var(--color-input-text) r g b / 0.6);
}
.onhow-mobile-search-icon {
display: flex;
}
@media screen and (min-width: 750px) {
.onhow-search-bar {
display: block;
}
.onhow-mobile-search-icon {
display: none;
}
}
@media screen and (max-width: 749px) {
.onhow-search-bar {
display: none !important;
}
.onhow-mobile-search-icon {
display: flex;
}
}
.header__column--center .onhow-search-wrapper {
justify-content: center;
}
.header__column--right .onhow-search-wrapper {
justify-content: flex-end;
}
.header__column--right .onhow-search-bar {
margin-left: auto;
}
{% endstylesheet %}