Search Bar possible with coding? Beyond Default Custom Search Bar. or App only?

Store Design
, , , ,
1

Search Bar possible with coding? Beyond Default Custom Search Bar. or App only?

Added code awhile ago for a custom search bar, better than the icon but its kinda small.

I hired an intern a few months ago to see if she could make it the way I was wanting but she said shopify kinda limits certain aspects of code where you kinda need an app for it, not sure if thats true?

This is what I was kinda wanting like image1 or image2

IMAGE1:

333Capture.PNG
333Capture.PNG1116Ă—188 14.2 KB

IMAGE2:

222Capture.PNG

this is what my website has right now:

IMAGE3:

111Capture.PNG
111Capture.PNG1391Ă—150 12.8 KB

2

Hi @Brian-A

TRy this one.

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media only screen and (min-width: 1500px) {
    .desktop-search {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        width: 30%;
    }
}

@media only screen and (max-width: 1499px) and (min-width: 1200px) {
    .desktop-search {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        width: 20%;
    }
}

@media only screen and (min-width: 1200px) {
    predictive-search[open] .predictive-search {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
    }
}

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!

3

had to do, not sure why? other than that the code works amazingly. gave you a like. will make as solution.

predictive-search[open] .predictive-search {
left: -95% !important;

one more question: I did this with custom liquid before but lost the code, how would I go about changing “Search” to “What can we help you find?”