When searching, my About page shows in the search result since I mention a few product brand names on it. How do I replace the search result image for my About page?
Thanks
Topic summary
Issue: In Shopify’s Dawn theme, the About page appears in on-site search results with a generic colored box thumbnail. The request is to set a custom thumbnail image for that page in search results.
Clarifications: Adding an image to the page description does not control the search result thumbnail. The store uses Dawn 3.0.0 (Online Store 2.0).
Proposed solution (consensus):
- Use a Pages metafield to hold a featured image (Settings > Custom data > Metafields > Pages > add file-type metafield, e.g., custom.featured_image).
- For each page, upload the image in the Metafields area.
- Edit theme code (sections/main-search.liquid or search.liquid) and, in the ‘page’ result type, render item.metafields.custom.featured_image instead of the default placeholder. This requires Liquid (Shopify’s templating language) edits.
Implementation details shared: A contributor posted step-by-step instructions and sample code that comments out the default ‘page’ block and inserts logic to display the metafield image when present. Another contributor offered to implement the Liquid changes.
Status: No confirmation that the fix worked; the thread remains open/without a marked solution.
Notes: Screenshots illustrate the red-box placeholder and admin locations; the code snippet is central to applying the fix.
1 Like
Hello @PLCollection ,
You can add the image to the description of collection admin as shown below:
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.
Thanks - but this was not my question. I know how to add an image to a page description. What I meant is where can I add the thumbnail image for the page when this page shows up in a search result.
Hello @PLCollection ,
Please let us know if you want to change the image here in your search results on your site?
If yes please follow my previous instructions.
If it is wrong please take a screenshot of the location you want to change and please share your store URL and password of front view.
So that I will check and let you know the exact solution here.
If you feel like my answer is helpful, please mark it as a SOLUTION. Let me know if you have any further questions.
Best regards.
Attached is a screen shot when searching for “Belperron”…how do I have a different image for About page red box – or is it just using one of the colors from the theme
?
Hello @PLCollection ,
Could you let us know if you use theme Dawn 2.0 of shopify?
If yes please follow my previous instructions.
if you use other theme let me know your theme and your screenshot desciption page
Please share your store URL and password of front view.
So that I will check and let you know the exact solution here.
Best regards.
Add a metafield for image for about page as shopify 2.0 supports metafields inbuilt.
and on search grid please use the image added by metafield on search.liquid file.
I removed password on my site pl-collection.com. If you search “Belperron”, you will see the issue I’m pointing out with the About page.
I forgot to mention I’m using Dawn 3.0.0 theme.
I see there is red box alng with About title on search page.
You need to add image through metafield on shopify backend then need to modify some liquid code of search.liquid file to call that image added from shopify backend.
If you can provide your store access I can help you with this.
did you ever get a solution to this? I have the exact same issue and would like a way to fix it… thank you
@andrewzimmerman
It needs to do some liquid coding on search.liquid file of your theme which I can fix it for you.
Let me know if you looking for fixing it on your store.
To implement this solution, you’ll need to:
- First, create a custom metafield for pages:
- Go to Settings > Custom data > Metafields
- Select “Pages” as the resource
- Add a new metafield with:
- Name: Featured Image
- Namespace and Key: (it will automatically generate to ‘custom.feature_image’)
- Description: Featured Image
- Type: file
- Add images to your pages:
- Edit each page
- Scroll down to the Metafields section
- Upload the desired featured image
The steps above will add the the option to add a feature image to pages.
- Now, Modify your theme code:
- Go to Online Store > Themes
- Click “Actions” > “Edit code”
- Find the main search page (usually in sections/main-search.liquid and comment the below code.
{% comment %}
{%- when 'page' -%}
###
{{ item.title | truncate: 50 | escape }}
{{- 'templates.search.page' | t -}}
{% endcomment %}
- Insert the code below, where the code above was, and save.
{%- when 'page' -%}
{% if item.metafields.custom.featured_image %}
{%- assign image = item.metafields.custom.featured_image -%}
{% endif %}
###
{{ item.title | truncate: 50 | escape }}
{{- 'templates.search.page' | t -}}
{% if item.metafields.custom.featured_image %}
###
{{ item.title | truncate: 50 | escape }}
{{- 'templates.search.page' | t -}}
{% endif %}
Let me know if that works for you.