Add Algolia to sidebar search - Shopify

Hey guys I recently moved to a new theme on Shopify and I can’t seem to get Algolia to work properly in my new theme.
My previous theme had a dedicated search page which was easy to work with. But the new theme has the search option with in the sidebar.
So when I search,

  1. the Algolia results show up in between the screen and not under the search field.
  2. The search field searches twice - once with Algolia and the other is the native search.

Here is the preview to a copy of the theme wherein I have installed Algolia.

Hi @ritesh , unfortunately the link you’ve provided isn’t a preview link, it just points us to your live theme, where it doesn’t seem like Algolia is installed.

However, I can already imagine the issue. And it’s actually expected, we’re expecting to plug ourselves in a theme with simply a search bar.

To use Algolia, you’d need to make some custom development (JavaScript + CSS).
You could by modifying the theme JavaScript prevent the default theme search from triggering.
An hacky alternative would be to just hide the search results with some CSS, e.g. .search-results { display: none; }.

Making it fit under the search input only should be fairly doable by removing the appendTo: 'body' option of the autocomplete in algolia_autocomplete.js and modifying the readjust function to not modify the width of the autocomplete.

@Jerska Thank you so much for your reply.

I’ll definitely give that a go. Meanwhile, can you check if this link works - https://cullt.myshopify.com/?preview_theme_id=6978437161

The first two parts of the solution worked as expected.

Also, I am unsure of what needs to be modified in this code to stop it from resizing:

function readjust($this) {
var data = $this.data('aaAutocomplete');
if (!data) return;
var $node = data.$node;
var $dropdown = data.dropdown.$menu;

var width = $this.outerWidth();
var vpWidth = document.body.clientWidth;
var offset = $this.offset();
var left = offset.left;
var right = vpWidth - width - left;
var top = offset.top;
var height = $this.outerHeight();

var align = left < right ? 'left' : 'right';
var dist = Math.min(left, right);

// For small centered inputs, take half the screen
if (4 * dist > vpWidth) {
  align = 'left';
  dist = Math.round(vpWidth / 4);
}

var newWidth = vpWidth - 2 * dist;

// For big inputs, follow the input
if (width >= 600) {
  align = 'left';
  dist = left;
  newWidth = width;
}

$node
  .css('left', '')
  .css('right', '')
  .css('top', (top + height + 8) + 'px')
  .css(align, dist)
  .css('width', '' + newWidth + 'px');

var suffix = 'lg';
if (newWidth < 300) suffix = 'xs';
else if (newWidth < 600) suffix = 'sm';
else if (newWidth < 900) suffix = 'md';

$dropdown
  .removeClass('aa-dropdown-menu-size-xs')
  .removeClass('aa-dropdown-menu-size-sm')
  .removeClass('aa-dropdown-menu-size-md')
  .removeClass('aa-dropdown-menu-size-lg')
  .addClass('aa-dropdown-menu-size-' + suffix);}

Seems like removing appendTo broke your input. You could also try with appendTo: "CSS-Selector-Of-Your-Right-Block".
In this code you’ll see that there’s some logic to adjust the width.
This code has a lot of logic to try to handle as many themes as possible.
However, you should be able to simplify all of this a lot and simply set the align variable to left and the newWidth variable to the width of the input.

Going further than this explanation will go beyond the scope of what our support extends to.