Shopify themes, liquid, logos, and UX
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:
The steps above will add the the option to add a feature image to pages.
{% comment %}
{%- when 'page' -%}
<div class="article-card-wrapper card-wrapper underline-links-hover">
<div
class="card card--card card--text ratio color-{{ settings.blog_card_color_scheme }}"
style="--ratio-percent: 100%;"
>
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ item.url }}" class="full-unstyled-link">
{{ item.title | truncate: 50 | escape }}
</a>
</h3>
</div>
<div class="card__badge {{ settings.badge_position }}">
<span class="badge color-{{ settings.color_schemes | first }}">
{{- 'templates.search.page' | t -}}
</span>
</div>
</div>
</div>
</div>
{% endcomment %}
{%- when 'page' -%}
<div class="article-card-wrapper card-wrapper underline-links-hover">
<div class="card article-card card--standard{% if item.metafields.custom.featured_image %} card--media{% endif %}" style="--ratio-percent: 100%;">
<div class="card__inner color-{{ settings.blog_card_color_scheme }} gradient ratio" style="--ratio-percent: 100%;">
{% if item.metafields.custom.featured_image %}
<div class="article-card__image-wrapper card__media">
<div class="article-card__image media media--hover-effect">
{%- assign image = item.metafields.custom.featured_image -%}
<img
srcset="{%- if image.width >= 165 -%}{{ image | image_url: width: 165 }} 165w,{%- endif -%}
{%- if image.width >= 360 -%}{{ image | image_url: width: 360 }} 360w,{%- endif -%}
{%- if image.width >= 533 -%}{{ image | image_url: width: 533 }} 533w,{%- endif -%}
{%- if image.width >= 720 -%}{{ image | image_url: width: 720 }} 720w,{%- endif -%}
{%- if image.width >= 1000 -%}{{ image | image_url: width: 1000 }} 1000w,{%- endif -%}
{%- if image.width >= 1500 -%}{{ image | image_url: width: 1500 }} 1500w,{%- endif -%}
{{ image | image_url }} {{ image.width }}w"
src="{{ image | image_url: width: 533 }}"
sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 100 | divided_by: 2 }}px, (min-width: 750px) calc((100vw - 130px) / 2), calc((100vw - 50px) / 2)"
alt="{{ image.alt | escape }}"
class="motion-reduce"
loading="lazy"
width="{{ image.width }}"
height="{{ image.height }}"
>
</div>
</div>
{% endif %}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ item.url }}" class="full-unstyled-link">
{{ item.title | truncate: 50 | escape }}
</a>
</h3>
</div>
<div class="card__badge top right">
<span class="badge color-{{ settings.color_schemes | first }}">
{{- 'templates.search.page' | t -}}
</span>
</div>
</div>
</div>
{% if item.metafields.custom.featured_image %}
<div class="card__content">
<div class="card__information">
<h3 class="card__heading">
<a href="{{ item.url }}" class="full-unstyled-link">
{{ item.title | truncate: 50 | escape }}
</a>
</h3>
</div>
<div class="card__badge top right">
<span class="badge color-{{ settings.color_schemes | first }}">
{{- 'templates.search.page' | t -}}
</span>
</div>
</div>
{% endif %}
</div>
</div>
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
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024