Issue with add google custom search code on Shopify store
Issue with add google custom search code on Shopify store
Hello I'm new to stackoverflow, I've recently added google custom search to my store for customers to use to look about information and learn more about the type of products I'm selling. When I added the GCS code to a new template on Shopify I made I had a few issues. The main issues have been solved by editing the search engine itself, in the "look and feel" menu, but one small issue remained. On the search bar for the search engine, there seems to be these dark thin divider lines which I can't seem to get rid of. I have very little coding experience so I'm not sure exactly what is wrong in the code itself. So i'm reaching out here to hopefully find a solution.
(Here is the code below)
<div class="grid">
<div class="grid__item post-large--two-thirds push--post-large--one-sixth">
<div class="section-header">
<h1 class="section-header--title"> page.title </h1>
</div>
<div class="rte">
page.content
</div>
<body>
<script>
(function()
var cx = '011286737035659106182:hqm_unmmoqy';
var gcse = document.createElement('script');
gcse.type = 'text/javascript';
gcse.async = true;
gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(gcse, s);)();
</script>
<gcse:searchbox-only></gcse:searchbox-only>
</body>
</div>
I also just ran the code and the thin divider lines are not appearing which is interesting.
– eak115
Aug 25 at 20:13
1 Answer
1
There is some properties in your theme css and in the plugin css that make appear those borders.
I made two CSS snippets to remove all the borders or to keep a single border. Chose which one that you prefer :)
Add this in your css file, or between balise <style></style>
<style></style>
With single border :
<style>
form.gsc-search-box
border : none;
form.gsc-search-box .gsc-input-box table
margin-bottom : unset;
form.gsc-search-box .gsc-input-box table .gsib_b
display : none;
form.gsc-search-box table.gsc-search-box
margin : 0;
form.gsc-search-box table.gsc-search-box td
border : none;
OR
Without any border :
.gsc-control-searchbox-only form.gsc-search-box
background: none;
border: none;
box-shadow: none;
form.gsc-search-box .gsc-input-box table
margin-bottom : unset;
form.gsc-search-box .gsc-input-box table .gsib_b
display : none;
form.gsc-search-box table.gsc-search-box
margin : 0;
form.gsc-search-box table.gsc-search-box td
border : none;
I'm not exactly sure what you mean exactly, could you point out the margin-bottom on the search div and the useless cell in my table?
– eak115
Aug 26 at 19:52
I recently added the code you suggested and the search bar look alot batter but there are still "divider lines" but not as much and they're more orgainized I guess you can say. If i had to guess, given very little expirence with coding, this is because the points you've made above, the margin bottm and the useless cell or maybe where I placed the code you suggested.
– eak115
Aug 26 at 19:56
Can you post a link to the page? Maybe your theme css files impact the search bar. And don't worry, it's not because of the emplacement of my code.
– Pol Conin
Aug 26 at 22:16
Definitely, since the page hasn't launched yet you will most likely need the password to enter the site. The password is batter and here is a link to the page with the search engine n3urohub.com/pages/n3uronet
– eak115
Aug 29 at 19:28
I updated the answer with the correct CSS made for your theme.
– Pol Conin
Aug 30 at 19:50
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
I hope the edits I've made help, I was having an issue with adding the code as plain text.
– eak115
Aug 25 at 20:07