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.
Shopify and our financial partners regularly review and update verification requiremen...
By Jacqui Mar 14, 2025Unlock the potential of marketing on your business growth with Shopify Academy's late...
By Shopify Mar 12, 2025Learn how to increase conversion rates in every stage of the customer journey by enroll...
By Shopify Mar 5, 2025