Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: Combine the shopping cart login and search icons

Solved

Combine the shopping cart login and search icons

Garrick
Tourist
6 0 1

Hi there, I know this must be a simple fix.  I moved my logo from the side to the top middle, and now it has separated the icons (cart, search and login)  Search is now on the left, instead of being grouped together.

Garrick_0-1729862694312.png

 

Accepted Solution (1)

Vinsinfo
Shopify Partner
460 158 156

This is an accepted solution.

@Garrick Please follow below steps to hide left side search icon and display search icon with login and cart icons on right side. Let us know whether it is helpful for you.

 
1. From admin go to "Online Store" -> "Themes".
2. Click "Edit code" button from the current theme.
Vinsinfo_2-1729864068485.png
3. Go to "base.css" file.
Vinsinfo_3-1729864085497.png
4. Then paste the below code at the bottom of the file and then save changes.
Vinsinfo_4-1729864113725.png

 

 

.header--top-center *>.header__search {
    display: block;
}
.header--top-center>.header__search {
    display: none;
}

 

 

Result will be like,
Vinsinfo_6-1729864672445.png
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support

View solution in original post

Replies 3 (3)

Vinsinfo
Shopify Partner
460 158 156

This is an accepted solution.

@Garrick Please follow below steps to hide left side search icon and display search icon with login and cart icons on right side. Let us know whether it is helpful for you.

 
1. From admin go to "Online Store" -> "Themes".
2. Click "Edit code" button from the current theme.
Vinsinfo_2-1729864068485.png
3. Go to "base.css" file.
Vinsinfo_3-1729864085497.png
4. Then paste the below code at the bottom of the file and then save changes.
Vinsinfo_4-1729864113725.png

 

 

.header--top-center *>.header__search {
    display: block;
}
.header--top-center>.header__search {
    display: none;
}

 

 

Result will be like,
Vinsinfo_6-1729864672445.png
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
Garrick
Tourist
6 0 1

Worked like a charm, thank you!

Sohail0980
Visitor
1 0 0

Designing a Shopify store can sometimes feel overwhelming, especially when trying to ensure it’s user-friendly, visually appealing, and optimized for conversions. But the good news is that Shopify’s flexibility makes it easy to solve most design challenges. If you’ve faced an issue recently and found a solution, it’s worth celebrating and sharing!

For anyone struggling with Shopify design, remember to leverage the built-in customization tools like the theme editor, which allows you to tweak layouts, fonts, colors, and more without any coding knowledge. When things get more complex, hiring a Shopify expert or exploring apps that extend design capabilities can make all the difference.

As a resource for game enthusiasts, design enthusiasts, or those exploring customized experiences, https://thespykegame.com/ showcases how innovation and personalization can elevate user engagement. Whether it’s a game interface or an online store design, creativity coupled with functionality always wins.

If you’re stuck, don’t hesitate to reach out or look into Shopify’s vibrant community forums for insights. Remember, a well-designed store is the first step toward building trust and driving sales!