Hi guys!
How can I move the search icon next to the user and cart icons?
https://kingdompetshop.com/collections/dog-collars-leashes
Theme: Refresh
Pw: abcd
Topic summary
A user seeks to reposition the search icon in their Shopify store’s header to align it with the user and cart icons.
Store Details:
- Theme: Refresh
- Site: kingdompetshop.com
- Current layout shows search icon separated from other header icons
Solutions Provided:
-
CSS injection method: Add custom CSS code to the theme.liquid file before the closing
</body>tag. The responder provided specific CSS code and demonstrated the result with a screenshot. -
Container-based approach: Wrap the search icon in the same container as user/cart icons, then apply flexbox styling:
display: flex;align-items: center;gap: 10px;- Adjust spacing for visual balance
Status: Two solutions offered, but no confirmation yet from the original poster on which approach was implemented or whether the issue is resolved.
1 Like
Hi @kingdom2
check this one.
From your Shopify admin dashboard, click on “Online Store” and then “Themes”
Find the theme that you want to edit and click on “Actions” and then “Edit code”.
In the “theme. Liquid” file. Find the tag and paste the code below before the tag.
And Save.
result:
Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!
1 Like
Wrap the search icon in the same container as the user and cart icons, then use display: flex; align-items: center; gap: 10px; in CSS to align them properly. Adjust spacing as needed for a balanced look. As i did this on this kaliber website