Solved

Search Box Padding (Turbo Theme)

EddyGrant
Tourist
20 0 0

Hey folks,

 

I'm attempting to integrate the Algolia search functionality with my Shopify theme (Turbo from Out of the Sandbox). 

 

The Search Box isn't rendering properly and seems to overlap. 

 

Could someone advise on which files need to be adjusted to fix this?

 

https://f96ybxthmtjzbhqv-63512314085.shopifypreview.com

 

Thank you,

 

Eddie

Accepted Solution (1)
Moeed
Shopify Partner
3809 962 1194

This is an accepted solution.

Hey @EddyGrant 

 

Keep the previous code and add this new code in theme.liquid right above </style> with the same steps mentioned above.

input.ais-SearchBox-input {
    bottom: 5px;
    position: relative;
    border: unset !important;
}

RESULT:

Moeed_0-1715673464008.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️

View solution in original post

Replies 3 (3)

Moeed
Shopify Partner
3809 962 1194

Hey @EddyGrant 

 

Follow these Steps:

1) Go to Online Store
2) Edit Code
3) Find theme.liquid file
4) Add the following code in the bottom of the file above </body> tag.

<style>
input#autocomplete-0-input {
    margin: 0 !important;
    padding: 0 !important;
}
</style>

RESULT:

Moeed_0-1715670994520.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️
EddyGrant
Tourist
20 0 0

Legend, thank you Moeed, made a couple of tweeks, but that is working perfectly.

 

I have the same issue if you view the search results page. How can I adjust that?

Moeed
Shopify Partner
3809 962 1194

This is an accepted solution.

Hey @EddyGrant 

 

Keep the previous code and add this new code in theme.liquid right above </style> with the same steps mentioned above.

input.ais-SearchBox-input {
    bottom: 5px;
    position: relative;
    border: unset !important;
}

RESULT:

Moeed_0-1715673464008.png

 

If I managed to help you then, don't forget to Like it and Mark it as Solution!

 

Best Regards,
Moeed

 

Need a Shopify developer? Chat on WhatsApp


- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Your Coffee Tip and my code, A perfect blend. ❤️