3rd Party Search App Customizations

Follow

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.

Overview

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

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 Options
  • Product Discount
  • Multi-Currency
  • Motivator
  • Custom Pricing

To solve this issue, please follow these steps:

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

  1. Duplicate themes, to create a backup copy.
  2. From your Shopify admin, select Online Store.

    select_online_store.png

  3. Select Actions.

    select_actions.png

  4. Select Edit code.

    select_edit_code.png

  5. Under "Assets", select Add a new asset.

    select_add_new_asset.png

  6. Select Create a blank file.

    create_blank_file.png

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

    bold-bc-fix_asset.png

  8. Select Add asset.

    bold-bc-fix_add_asset.png

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

    paste_bc-bold-fix.png

  10. Select Save.

    select_save.png

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 name 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.

    select_save.png

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.

    select_save.png

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.

To make your discount icons appear, please follow these steps:

  1. From your Shopify admin, select Online Store

    select_online_store.png

  2. Select Actions.

    select_actions.png

  3. Select Edit code.

    select_edit_code.png

  4. Under "Templates", select Add a new template.

    select_add_a_new_template.png

  5. Change the template to product and name it 'bold_discount'.

    bold_discount_template.png

  6. Select Create template.

    bold_discount_create_template.png

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

    select_save.png

If you are using Globo's Smart 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 Options

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

  1. Duplicate themes, to create a backup copy.
  2. From your Shopify admin, select Online Store.

    select_online_store.png

  3. Select Actions.

    select_actions.png

  4. Select Edit code.

    select_edit_code.png

  5. Under "Assets", select Add a new asset.

    select_add_new_asset.png

  6. Select Create a blank file.

    create_blank_file.png

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

    add_bold-globo-fix_asset.png

  8. Select Add asset.

    bold-globo-fix_asset_add.png

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

    bold-globo-fix_code.png

  10. Select Save.

    select_save.png

Step 2: Create the product.json template

  1. Under Templates, select Add a new template.

    select_add_a_new_template.png

  2. Change the template to product and name 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' %}
  5. Select Save.

    select_save.png

Step 3: Edit the theme.liquid file

  1. Under "Layout", select theme.liquid.

    Select_theme.liquid__1_.png

  2. Find the closing head tag.

    find_the_closing_head_tag.png

  3. Copy and paste the following code above the </head> tag:
    {% if customer %}
      {{ 'bold-globo-fix.js' | asset_url | script_tag }}
    {% endif %}
  4. Select Save.

    select_save.png

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 your Shopify admin, select Online Store.

    select_online_store.png

  3. Select Actions.

    select_actions.png

  4. Select Edit code.

    select_edit_code.png

  5. Under "Assets", select Add a new asset.

    select_add_new_asset.png

  6. Select Create a blank file.

    create_blank_file.png

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

    create_bold-searchanise_asset.png

  8. Select Add asset.

    add_bold-searchanise_asset.png

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

    insert_bold-searchanise_code.png

  10. Select Save.

    select_save.png

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 name 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.

    select_save.png

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.

    select_save.png

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 your Shopify admin, select Online Store.

    select_online_store.png

  3. Select Actions.

    select_actions.png

  4. Select Edit code.

    select_edit_code.png

  5. Under "Assets", select algolia_autocomplete.js.liquid.

    select_algolia_autocomplete.js.liquid.png

  6. 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

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

    add_the_bold_custom_code.png

  8. Select Save.

    select_save.png

0 out of 0 found this helpful

Comments

0 comments

Please sign in to leave a comment.