I would like to achieve the below outcome:
I tried edit the code of these three file: index.json, featured-collection.liquid, base.css.
But no luck, the result show error image with attribute text.
For the index.json file, I added “heading_image”:
"featured_collection_LaVJqD": {
"type": "featured-collection",
"settings": {
"title": "<strong>最新上架<\/strong>",
"heading_size": "h2",
"description": "",
"show_description": false,
"description_style": "body",
"collection": "",
"products_to_show": 25,
"columns_desktop": 4,
"full_width": false,
"show_view_all": true,
"view_all_style": "solid",
"enable_desktop_slider": true,
"color_scheme": "",
"image_ratio": "adapt",
"image_shape": "default",
"show_secondary_image": false,
"show_vendor": false,
"show_rating": false,
"enable_quick_add": false,
"columns_mobile": "2",
"swipe_on_mobile": false,
"padding_top": 36,
"padding_bottom": 36,
**"heading_image": "shopify:\/\/shop_image\/logotesttest.jpg"**
}
For the featured-collection.liquid file, I added tag:
<div class="color-{{ section.settings.color_scheme }} isolate gradient">
<div class="collection section-{{ section.id }}-padding{% if section.settings.full_width %} collection--full-width{% endif %}">
<div class="collection__title title-wrapper title-wrapper--no-top-margin page-width{% if show_mobile_slider %} title-wrapper--self-padded-tablet-down{% endif %}{% if show_desktop_slider %} collection__title--desktop-slider{% endif %}">
{%- if section.settings.title != blank -%}
**<img alt="llogo" src="shopify:\/\/shop_images\/logotesttest.jpg" width="100" height="200" class="title-image">**
<h2 class="title inline-richtext {{ section.settings.heading_size }}{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{{ section.settings.title }}
</h2>
{%- endif -%}
{%- if section.settings.description != blank
or section.settings.show_description
and section.settings.collection.description != empty
-%}
<div class="collection__description {{ section.settings.description_style }} rte{% if settings.animations_reveal_on_scroll %} scroll-trigger animate--slide-in{% endif %}">
{%- if section.settings.show_description -%}
{{ section.settings.collection.description }}
{%- else -%}
{{ section.settings.description -}}
{%- endif %}
</div>
{%- endif -%}
</div>
At last, css file:
.title-image {
float: left; /* or right, depending on where you want the image */
margin-right: 10px; /* adjust spacing as needed */
}
appreciate if someone can help!