Add a Product Search Bar to Your Store Website

Add a Product Search Bar to Your Store Website

If you'd like to give customers the option to search products that you sell on your online store, you can embed a product search widget on your Shop pages.

 

websites-360-shop-app-product-search.jpg

1. Navigate back to the Content panel on the Websites 360 dashboard, then navigate to the page that contains your Store embed code.

2. Above the Shop embed code, click on the green (+) button and select HTML from the menu to create a new HTML Block.

Screen_Shot_2020-05-06_at_4.31.50_PM.png

3. Add the following code inside the HTML Block inside the text area next to the number 1:

  1. <!--PRODUCT SEARCH-->
  2. <div id="my-search-xxxxxxxx"></div>
  3. <div>
  4. <script data-cfasync="false" type="text/javascript" src="https://app.shop.websites360.com/script.js?xxxxxxxx&data_platform=code" charset="utf-8"></script>
  5. <script type="text/javascript"> xSearch("id=my-search-xxxxxxxx"); </script>
  6. </div>

4. Replace 'xxxxxxxx' with your Store ID. Pro Tip: Use the Find & Replace feature!

Click here to learn how to find your Store ID.

5. Save the HTML block.


    • Related Articles

    • Embed Your Shop or Product Category on Your Website

      Once your Shop is set up within Marketing 360®, then you will want to embed your store and products on your website. You can embed your entire store on your site, or you can instead choose to embed individual categories. Regardless of which method ...

    • Import and Export Store Products

      Learn how to import and export your online store's product catalog using a CSV file. This guide covers how to prepare your file for bulk updates and how to manage the import/export process. 1. How to Import Your Products Importing your product ...

    • Add Product Ribbons or Callouts to the Shop App

      Ribbons are colored horizontal product labels that are displayed on product listings thumbnails and product details pages in your store. You can put any text you like on them (e.g. “Bestseller”, “20% Off”, “New”, “Christmas deal” or “Free Shipping”). ...

    • Add Products to Your Store

      There are two ways to add products to your store: manually or in bulk. Manual entry requires you to add each product one by one. However, if you’re transferring from another e-commerce solution or already have your products listed out in a ...

    • Tagging Products on Instagram

      You can give your customers a way to buy in your store without ever leaving the Instagram app by tagging products in your posts and stories. Instagram uses a Facebook Shop catalog to find and tag products. Once your products are tagged, customers can ...