Hi,
I’ve been trying to figure out how to add a custom image to page results in site search (see image below). My desired outcome is to get a custom image as background for the page result instead of the default solid white. I tried to implement some inline CSS but I didn’t get it to work. You can find my store at https://www.algodonblanco.es/
I would be very thankful if you could help me with this!
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.
Dear BlackUmbrella,
I have the same issue with Craft theme (no featured image associated to pages > no image but a solid color in search result). I implemented your modifications but it is not working. Instead the solid color for a specific page, the page becomes invisible (no text no image).
Do you have an idea on how to add a featured image to pages in Craft Theme?
Thank you very much for your help,
Audrey
Hi @AudreyD . Solution for Craft Theme.
Remember to follow the metafields step from above. That will add an main image to your page.
Online Store > Themes > Edit Code > main-search.liquid.
Wrap the code below between {% comment %} and {% endcomment %}.
{%- when 'page' -%}
###
{{ item.title | truncate: 50 | escape }}
{{- 'templates.search.page' | t -}}
Insert the following code in place of the previous code, leaving the previous code commented out:
{%- when 'page' -%}
{%- if item.metafields.custom.featured_image -%}
{{ item.metafields.custom.featured_image | image_url: width: 533 | image_tag:
loading: 'lazy',
class: 'motion-reduce',
width: 533,
height: 533
}}
{%- endif -%}
###
{{ item.title | truncate: 50 | escape }}
Page
###
{{ item.title | truncate: 50 | escape }}