Shopify themes, liquid, logos, and UX
would like to move search icon to the left side of the screen see pic for move. on mobile only. www.shopcuzzo.com
Solved! Go to the solution
This is an accepted solution.
Hi @Mrstep,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
@media only screen and (max-width: 749px) {
svg.icon.icon-search {
position: absolute;
left: -165px;
}
}
</style>
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hi @Mrstep
For mobile, we will need to make structural changes through coding.
This is an accepted solution.
Hi @Mrstep,
Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head> tag:
<style>
@media only screen and (max-width: 749px) {
svg.icon.icon-search {
position: absolute;
left: -165px;
}
}
</style>
Here is result:
Hope this can help you,
If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍
Sale banner, pop ups: Customize your sale banner, pop-ups and create countdown bar to boost conversion rate.
Simicart: Transform your Shopify store into a stunning and fully functional mobile app with just a few simple steps.
Product Labels & Badges: Get more sales with striking labels, badges, and banners from our 10,000+ available templates.
BSS Commerce - Full-service eCommerce Agency | Use Shopify for 1$ in the first month now
Hello, Please follow this steps to add the css
Step 1: Navigate to your Shopify admin panel and go to "Online Store."
Step 2: Click on "Themes" and then select Edit code
Step 3: Find base.css
/* Show .header__search only on mobile devices */
@media (max-width: 768px) {
.header>.header__search {
display: block;
grid-area: revert-layer;
margin-left: 29px;
position: -21px;
margin-top: -44px;
}
.header__search {
display: none;
}
}
Step 5 : sections/header.liquid line 173 add bellow code
{% render 'header-search', input_id: 'Search-In-Modal' %}
The the first search icon will hide in mobile and show in desktop the new one show in mobile and hide in desktop like this screen shot
Let us know if it is solved or not.
Thank you
This is Richard from PageFly - Shopify Page Builder App
Hi @Mrstep Please add code here to change position Search Icon
Step 1: Online Stores > Themes > Edit code
Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>
<style>
@media screen and (max-width: 767px){
.header__search{
position: absolute !important;
left: 65px !important;
}
}
</style>
Hope my solution will help you resolve the issue.
Best regards,
Richard | PageFly
Please let me know if it works by giving it a Like or marking it as a solution!
➜ Optimize your Shopify store with PageFly Page Builder (Free plan available)
All features are available from Free plan. Live Chat Support is available 24/7.
We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024We want to take a moment to celebrate the incredible ways you all engage with the Shopi...
By JasonH Oct 15, 2024