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

    • Import and Bulk-Upload Products to Your Store

      Products can always be added to your store one at a time using the + Add New Product button on your catalog page. However, there are times when adding many products at once is highly beneficial. You can add products in bulk by importing a CSV file ...

    • 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

      You can import and export your store's catalog on your Shop app. This makes it easy to make bulk updates to products and categories. Import your products If you would like to bulk-upload products to your store, you can enter your product details in a ...

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