Add the Product ID/SKU to My Search Results
As described in a previous guide, you can tailor your search function so that results are returned based on product ID, MFGID, and several other parameters included in the product listing.
By default, when a search is made on your site, the search results page will display each of the matching items with the following listing areas:
Product Thumbnail
Product Name
Product Category
Product Short Description
Product Availability
Free Shipping (if applicable)
Product Pricing
Add to cart buttons
However, your specific product offering and setup may require customers to search by the specific product SKU/ID information. For example, a product like printer inks or storage containers where the products are similar in appearance, but their SKUs are somewhat unique.
If this is the case for your products, then you will need to edit your search results template also to display the SKU number within the search results. This way, your customers have a better way to find the specific product they are looking for when the results come in.
In the example shown here, a search was made on the store for the SKU number "ID-SKU-1." However, since the text for the SKU in question is similar to another SKU in the store, the search result returns two products - "ID-SKU-1" and "ID-SKU-10."
This is an overly simplified scenario, but imagine if the store had hundreds of products with similar SKUs! You'll want to help your customers find the right product by also displaying the Product SKU. This can be done by editing the store's search.html template file.
Editing the Template
Using the left navigation menu:
Go to Settings > Design > Themes & Styles.
Click on the Edit Template (HTML) button.
This will take you to the template editor for your store's specific design theme and will show you a list of your theme's HTML templates. Within this list, you will see your theme's frame.html file as well as any other unique templates that the site is using.
3. If you see a search.html file in this list, look to the far right of it and click on its Action > Edit button to open it up. On the other hand, if you don't have any search.html templates already listed for your theme, click on the drop-down menu at the top and select the "templates/common" folder. This will display a listing of all available templates.
4. Within the common folder, locate the search.html template and click its Action > Edit button.
You should now see the template's HTML coding.
Using CTRL-F on your keyboard, look for the following bit of code:
<a href="product.asp?itemid=[catalogid]">[name]</a>
You'll be adding a line break and the dynamic [id] tag to this code right after the "</a>" tag so that it looks like this:
<a href="product.asp?itemid=[catalogid]">[name]</a><br />[id]
Click Save at the top right of the screen and your search results should now display the product images and names along with their respective ID/SKU values.