Shopify

Theme specific instructions

Need help installing Sajari in your theme? Just drop us a note and we will get you up and running in no time.

With hundreds of themes, Shopify provides a vast number of customization options to make your store unique. As a result, it's challenging to provide a single set of installation instructions that work with every store. Fortunately, installing Sajari is extremely simple and custom instructions, if required, are generally specific to two areas.

  • Button selector
  • Page margin

Button selector

The search overlay mode is triggered by a button or search icon. In order for Sajari to know which button should open the search overlay, a Button selector needs to be defined. The default selector is the one used most commonly, but since themes can define their own triggers, you might have to change the default selector in the search interface designer to make it work with your theme.

Shopify search

Page margin

By default the Search and Collection UI will take up the entire page. However, some themes utilise a fixed width for the store layout, which should be honored by the search and collection pages.

Therefore those themes require a <div> around the sajari section includes on the search and collection templates. Most of the time the code is as simple as:

<div class="page-width">
  {% section 'sajari-search' %}
</div>

However, not all themes use the same css classes and therefore custom instructions may be required.

Debut

Button selector: .site-header__search-toggle

Page margin

Search and Collection sections require a container with padding.

<div class="page-width">
  {% section 'sajari-search' %}
</div>
<div class="page-width">
  {% section 'sajari-collections' %}
</div>

Brooklyn

Button selector: .js-toggle-search-modal

Narrative

Page margin

Search and Collection sections require a container with padding.

<div class="page-width">
  {% section 'sajari-search' %}
</div>
<div class="page-width">
  {% section 'sajari-collections' %}
</div>

Venture

Button selector: .site-header__search for buttonSelector

Page margin

Search and Collection sections require a container with padding.

<div class="page-width">
  {% section 'sajari-search' %}
</div>
<div class="page-width">
  {% section 'sajari-collections' %}
</div>

Boundless

Button selector: .js-drawer-open-top

Page margin

Search and Collection sections require a container with padding.

<div style="padding:20px;">
  {% section 'sajari-search' %}
</div>
<div style="padding:20px;">
  {% section 'sajari-collections' %}
</div>

Blockshop

Page margin

Search and Collection sections require a container with padding.

<div style="padding:20px;">
  {% section 'sajari-search' %}
</div>
<div style="padding:20px;">
  {% section 'sajari-collections' %}
</div>