adding logo next to section heading (can't show my image)

leannelam1pnl
New Member
11 0 0

I would like to achieve the below outcome:
螢幕擷取畫面 2024-01-17 110854.png

 

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.
螢幕擷取畫面 2024-01-17 123355.png

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 <img> 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!

 

 

Reply 1 (1)

leannelam1pnl
New Member
11 0 0

So far I uploaded the image to asset directory as logotesttest.jpg
And added below code to featured-collection liquid file, but can only display the url.
liquid {{ 'logotesttest.jpg' | asset_url | image_tag: 'alogo'}}