Add SKU numbers to search results in Dawn theme

[loreen_sawatzky]

Hello Shopify community! 

I'm looking for some customizing the search results my site: https://rejuvenateresources.com/. Many customers search for products by SKU # and I'd like the search results to display the SKU # in the preview, as well as the results page.

I'd love some help if anyone has a solution! Thank you!

[ZestardTech]

Hello @loreen_sawatzky 

To add SKU numbers to search results in the Dawn theme on Shopify, you'll need to make some modifications to your theme's code. Here's a step-by-step guide:

1. From your Shopify admin, go to Online Store and click on Themes.
2. Find the Dawn theme and click on Actions, then select Edit code.

Note: It's always a good practice to create a backup of your theme before making any changes to the code.

1. In the theme code editor, locate the templates/search.liquid file.

2. Open the search.liquid file and find the section where the search results are displayed. It may look something like this:

{% for item in search.results %}
  <h3>{{ item.title }}</h3>
  <p>{{ item.description }}</p>
{% endfor %}

5.To add the SKU numbers, you can modify the code to include the SKU. Replace the existing code with the following:

{% for item in search.results %}
  <h3>{{ item.title }}</h3>
  <p>{{ item.description }}</p>
  <p>SKU: {{ item.variant.sku }}</p>
{% endfor %}

This code adds a new line that displays the SKU number of each product in the search results

6.Save the changes to the search.liquid file.

After saving the changes, the SKU numbers should be displayed alongside the product titles and descriptions in the search results on your Dawn theme. Make sure to test it on your store to verify that the SKU numbers are appearing as intended.

Note: The above code assumes that the SKU numbers are associated with the product variants. If your SKU numbers are stored in a different field or location, you may need to modify the code accordingly.

Remember to check for any syntax errors or unexpected display issues after modifying the code. If you encounter any difficulties, it's always a good idea to reach out to Shopify support or a developer for assistance.

[loreen_sawatzky]

Hello! Thank you for your prompt response! Here is what I found in the main-search.liquid section for the Dawn theme: 

Is this where I should be putting the code you sent? The structure looks different from your solution. Any help would be appreciated! 

Thank you!

[Moeed]

Hey @loreen_sawatzky 

To customize the search results on your Shopify site to display the SKU numbers, you'll need to make some modifications to your theme's code. Here's a general guide on how you can achieve this:

1. Backup your theme: Before making any changes, it's always a good idea to create a backup of your theme. This ensures that you have a copy of the original files in case anything goes wrong during the customization process.

2. Edit the search results template: In your Shopify admin, go to Online Store -> Themes -> Actions -> Edit Code. Look for the "search.liquid" file or any template file related to search results in your theme. This could vary depending on your theme, so you might need to explore the different template files to find the relevant one.

3. Locate the search result preview section: Within the search template file, locate the section where the search results are displayed. This is usually marked with HTML and Liquid code that generates the search results layout.

4. Add SKU number display: Within the search results loop, find the code responsible for displaying each search result item. You can modify this code to include the SKU number. Assuming your SKU number is stored in the product's "sku" property, you can use Liquid to output the SKU number within the search result item's preview.

   For example, you can add the following code to display the SKU number:

SKU: {{ item.sku }}

Customize the HTML and CSS around this code to match your desired layout and styling.

Save and test: After making the changes, save the file and preview the search results on your live site. Perform some test searches using SKU numbers to see if the SKU numbers are now displayed in the search result previews as intended.

Remember to thoroughly test the changes to ensure they don't negatively impact other aspects of your site's functionality or design. If you encounter any issues or need further assistance, don't hesitate to reach out to Shopify's support or consult with a Shopify expert for personalized guidance.

If I managed to help you then, don't forget to Like it and Mark it as Solution!

Best Regards,
Moeed

[Ujjaval]

@loreen_sawatzky by adding below code into predictive-search.liquid file

<p> {%- assign current_variant = product.selected_or_first_available_variant -%}
                    <span>Sku:{{ current_variant.sku }}</span> </p>

[7traderPk]

{%- assign current_variant = product.selected_or_first_available_variant -%}
                    <span>Sku:{{ current_variant.sku }}</span>

[greenonions]

Would this code let you search by SKU though?