All things Shopify and commerce
Hi, I'm struggling to add a search icon to my header and cant seem to get the code right. On a custom theme I got from a shopify group, it has part of the code in the theme for search icon on header but for some reason cannot get it to come up how I want, looking to try get it like the dawn theme where the search bar comes up after the search icon is clicked. Cheers
Theme.scss
/// Layout
.site-header__cart,
.site-header__search,
.site-header__account {
position: relative;
}
.site-header__search {
.no-svg & {
display: inline-block;
}
&.site-header__icon {
display: none;
@include media-query($widescreen) {
display: block;
}
}
}
.site-header__search-toggle {
display: block;
}
.site-header__account,
.site-header__search,
.site-header__cart {
@include media-query($medium-up) {
padding: 10px 11px;
}
}
.site-header__cart-title,
.site-header__search-title {
@include visually-hidden();
display: block;
vertical-align: middle;
}
.site-header__cart-title {
margin-right: 3px;
}
.site-header__cart-count {
display: flex;
align-items: center;
justify-content: center;
position: absolute;
right: 0.4rem;
top: 0.2rem;
font-weight: bold;
background-color: turquoise;
color: black;
border-radius: 50%;
min-width: 1em;
height: 1em;
span {
font-family: $font-stack-cart-notification;
font-size: calc(11em / 16);
line-height: 1;
}
}
.site-header__cart-count {
@include media-query($small) {
top: calc(7em / 16);
right: 0;
border-radius: 50%;
min-width: calc(19em / 16);
height: calc(19em / 16);
}
span {
@include media-query($small) {
padding: 0.25em calc(6em / 16);
font-size: 12px;
}
}
}
.site-header__menu {
display: none;
}
.site-header__icon {
@include media-query($small) {
display: inline-block;
vertical-align: middle;
padding: 10px 5px;
margin: 0;
padding-left: 22px;
}
.icon-search {
@include media-query($medium-up) {
margin-right: 3px;
}
}
}
Hi @ForTheArtists
Can you please share theme preview URL on which you have implemented the code. As well as screenshot how do you want to have it so that I can guide you better.
June brought summer energy to our community. Members jumped in with solutions, clicked ...
By JasonH Jun 5, 2025Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025