|
As described in a previous article, 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 in order to also 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."
Now, this is an overly simplified scenario, but imagine if the store had hundreds of products with similar SKUs! You'll definitely 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 hand 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.
- 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 located along the top and select the "templates/common" folder. This will display a listing of all available templates.
Tip
If you're using an HTML5 theme, the common folder will be labeled "templates/common-html5"
- 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.
Please Note
The information in this article is provided solely as a courtesy and to offer basic instructions on making very simple changes to your store's HTML templates.
Please understand that - regardless of how simple the changes may be - HTML changes and troubleshooting fall outside the scope of our support department. The Shift4Shop support team is neither trained, qualified, nor allowed to make these changes for you. The boundary of our scope in this matter is limited to providing these instructions and helping you reset the template if the changes don’t work as you wanted.
If you are uncomfortable with making changes to your site’s HTML, please contact your sales representative and inquire about our HTML and design services which can make these changes for you.
Thank you for your understanding
|