Solved

How can I move the search function below the logo in an Automation theme?

Zei1
Tourist
7 1 27

Hello and thank you for addressing this issue.

 

This issue persists with the "Automation" theme and has been there since I first downloaded the theme.  It was an issue before I made  any code changes or added any images.  I have not added any apps and also searched within Shopify for other issues related to search, but none of the fixes worked for me.

 

The issue persists on on iOS on both mobile and desktop;  I cannot confirm on Andriod devices.  Currently using an iPhone 13 on version 16.3.1 and an iMac on Ventura 13.3.1.  Safari is up to date.

 

The Issue:

When clicking on the search bar, the search bar opens in the header on top of the logo, as seen below.  A "search our store" prompt appears within the search box, and search results can only be typed in over the logo, thus are difficult to see.  The "x" to close the search is also overlayed over the hamburger menu, thus making it difficult to close the search.

Zei1_0-1681187972398.png

 

The Ask:

Can you please provide advice on how to move the search functionality to a separate section beneath the logo.

 

URL: www.nichome.co

Password: welcome

 

Issue II:

I also have a separate issue where the animation in the header first opens in a smaller picture for a brief second, then is replaced by a larger picture which zooms out.  I would like the smaller picture removed, as I have only added one image to the CMS for this section.

 

Looking into this would be greatly appreciated, as the contact information that the developer left (e-mail address)  is invalid and there is little documentation on or questions pertaining to this theme.

Accepted Solution (1)
Zei1
Tourist
7 1 27

This is an accepted solution.

The Developer contacted me to troubleshoot, therefore I'd like to share the fixes here for anyone who may be facing the same issues with the Automation theme:

 

1: Search Overlapping the Logo:

This was due to the body background color being set to transparent.  Apparently this was the default color, and once a color was inserted, the search displayed as it should

 

2: Animation Not Displaying Properly on Main Visual

This was due to a space missing in the original code.  This has been fixed, thus shouldn't effect anyone else

 

3: Images Being the Recommended Size, Yet Not Displaying Properly.

This has not been fixed yet

 

For anyone trying to contact the developer via the e-mail address provided, most e-mails are being rejected by the server.  I would recommend to keep trying until one goes thru, as he provides solid support.

View solution in original post

Replies 3 (3)

websensepro
Shopify Partner
1011 139 147

Hi @Zei1 
1. Go to the online store 

2. theme.css file and pasted the code 

input#SearchInModal {
padding-left: 20rem;
}


label[for=SearchInModal], label[for=SearchPageInput] {
top: -15px;
padding-left: 34rem;
}

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Zei1
Tourist
7 1 27

Websensepro,

 

Thank you for looking into this.  Unfortunately inserting the code as described did not fix the issue.  Inserting the above code shifted the entire 20% of the UI to the left of the screen when the search button was pressed, but the search results still displayed over the logo--thus I have reverted back to the original code.

 

I received a response from the developer of the theme, so hopefully he can address the issues.

 

Once again, thank you for your time.

Zei1
Tourist
7 1 27

This is an accepted solution.

The Developer contacted me to troubleshoot, therefore I'd like to share the fixes here for anyone who may be facing the same issues with the Automation theme:

 

1: Search Overlapping the Logo:

This was due to the body background color being set to transparent.  Apparently this was the default color, and once a color was inserted, the search displayed as it should

 

2: Animation Not Displaying Properly on Main Visual

This was due to a space missing in the original code.  This has been fixed, thus shouldn't effect anyone else

 

3: Images Being the Recommended Size, Yet Not Displaying Properly.

This has not been fixed yet

 

For anyone trying to contact the developer via the e-mail address provided, most e-mails are being rejected by the server.  I would recommend to keep trying until one goes thru, as he provides solid support.