3rd Party Search App Customizations

  1. Bold Commerce Help Center
  2. General Questions & Announcements
  3. Troubleshooting
Avatar
Laurel
Published: 
Last Updated: 
Follow

If you are using searching/filtering apps, you may run into some issues with products appearing that shouldn't (IE. hidden products), or products appearing incorrectly (price-wise) within your store's search bar.

 Warning

These are general instructions that are applicable to the most commonly used themes. Thorough testing should be completed post-installation to ensure the customization is working on your theme.

 

 

Product Filter & Search by BoostCommerce

If you are using BoostCommerce's Product Filter & Search app, you can use this customization to fix potential issues with your search app showing incorrect products or prices.

This fix will cover the following Bold apps:

  • Product Discount
  • Multi-Currency
  • Custom Pricing


Step 1: Create the bold-bc-fix.js.liquid asset file

  1. Duplicate themes to create a backup copy.
  2. From the Shopify admin, select Online Store, then Actions > Edit code next to the theme that you would like to apply this customization to.
  3. Under Assets, select Add a new asset.

    select_add_new_asset.png

  4. Select Create a blank file.

    create_blank_file.png

  5. Enter bold-bc-fix as the asset name, and change the file extension to .js.liquid.

    bold-bc-fix_asset.png

  6. Select Add asset.

    bold-bc-fix_add_asset.png

  7. Open the asset and copy and paste the bold-bc-fix.js.liquid code into this file.

    paste_bc-bold-fix.png

  8. Select Save.


Step 2: Create the product.json template file

  1. Under Templates, select Add a new template.

    select_add_a_new_template.png

  2. Change the template to product and call it json.

    product.jason.png

  3. Select Create template.

    create_template.png

  4. Open the template and copy and paste the following code into the file: 
    {% layout none %}
{% capture json %}
{% include 'bold-product' with product, output: 'json', endpoint: 'js' %}@
{% endcapture %}
{% assign json = json | replace: '}@', ', "hidden":' | append: csp_hide_tag | append: '}' %}
{{ json }}
  5. Select Save.


Step 3: Edit the theme.liquid file

  1. Under Layout, select theme.liquid.

    Select_theme.liquid__1_.png

  2. Find the line of code that contains bc-sf-filter.

    Note: If you cannot find this in the theme.liquid file, find the closing body tag instead.

  3. Copy and paste the following code above the bc-sf-filter code, or below the </body> tag:
    <script src="{{ 'bold-bc-fix.js' | asset_url }}" defer="defer"></script>

    add_bc-bold-fix_script.png

  4. Select Save.


Optional: Making Discount Icons Appear

If you are using discount icons and would like to make them appear in your search results, you can use custom code to achieve this.

  1. From the Shopify admin, select Online Store, then Actions > Edit code next to the theme that you would like to apply this customization to.
  2. Under Templates, select Add a new template.

    select_add_a_new_template.png

  3. Change the template to product and call it bold_discount.

    bold_discount_template.png

  4. Select Create template.

    bold_discount_create_template.png

  5. Open the template and copy and paste the following code into the file: 
    {% layout none %}
{% include 'shappify-sales-icon-collection' %}
  6. Select Save.

Smart Search & Instant Search by Searchanise

If you are using Searchanise's Smart Search & Instant Search app, you can use this customization to fix potential issues with your search app showing incorrect products or prices.

This fix will cover the following Bold apps:

  • Custom Pricing


Step 1: Create the bold-searchanise.js.liquid asset file

  1. Duplicate themes to create a backup copy.
  2. From the Shopify admin, select Online Store, then Actions > Edit code next to the theme that you would like to apply this customization to.
  3. Under Assets, select Add a new asset.

    select_add_new_asset.png

  4. Select Create a blank file.

    create_blank_file.png

  5. Enter bold-searchanise as the asset name, and change the file extension to .js.liquid.

    create_bold-searchanise_asset.png

  6. Select Add asset.

    add_bold-searchanise_asset.png

  7. Open the asset and copy and paste the bold-searchanise.js.liquid code into this file.

    insert_bold-searchanise_code.png

  8. Select Save.


Step 2: Create the product.json template file

  1. Under Templates, select Add a new template.

    select_add_a_new_template.png

  2. Change the template to product and call it json.

    add_product.json_template.png

  3. Select Create template.

    create_template.png

  4. Open the template and copy and paste the following code into the file: 
    {% layout none %}
{% include 'bold-product' with product, output: 'json', endpoint: 'js' %}

    insert_product.json_code.png

  5. Select Save.


Step 3: Edit the theme.liquid file

  1. Under Layout, select theme.liquid.

    Select_theme.liquid__1_.png

  2. Find the closing body tag.

    closing_body_tag.png

  3. Copy and paste the following code above the </body> tag: 
    {{ 'bold-searchanise.js' | asset_url | script_tag }}

    bold-searchandise.png

  4. Select Save.

InstantSearch by Algolia

If you are using Algolia's InstantSearch plugin, you can use this customization to fix potential issues with your search app showing incorrect products or prices.

This fix will cover the following Bold apps:

  • Custom Pricing V3 (PRE)

  1. Duplicate themes to create a backup copy.
  2. From the Shopify admin, select Online Store, then Actions > Edit code next to the theme that you would like to apply this customization to.
  3. Under Assets, select algolia_autocomplete.js.liquid.

    select_algolia_autocomplete.js.liquid.png

  4. Find the following bit of code: 
    index(section)
    .search(query, searchOpts)
.then(function(answer) {
var hits = addPositionToHits(answer.hits, answer.queryID);
callback(hits, answer);

    find_algolia_code.png

  5. Copy and paste our Bold Custom code over the following line of code:
    callback(hits, answer);

    add_the_bold_custom_code.png

  6. Select Save.
Was this article helpful?
0 out of 0 found this helpful