how to upload image on homepage (motion theme)

[richardlrnz]

 

hey guys, can someone explain me how i can add a image right under my hero banner in the middle of my homepage like in the picture below? and how i can move it and change the size etc. i got the motion theme. 

my onlineshop: https://barsenz.com

[Liquid_xPert_SJ · Accepted solution]

@richardlrnzwelcome to the Shopify Community,

if you want all these icon in one image than you can use image banner section to show all these images, Also if you want these icons to show individually with text and image then you need to create a custom section and display it wherever you need.

How you can add your custom section refer to the instruction below

Online Theme > Edit Code > Sections  > Add section and place the below code in that.

{%- for block in section.blocks -%}
  {%- case block.type -%}

    {%- when 'add_icon' -%}
      {%- assign icon = block.settings.icon -%}
      {{ icon | image_url: width: icon.width | image_tag: class: 'add_your_class_here', loading: 'lazy' }}

      {{ block.settings.icon_text }} 

  {%- endcase -%}
{%- endfor -%}

{% schema %}
  {
  "name": "Image Icon Section",
  "settings": [],
  "blocks": [
    {
      "name": "Add Icon",
      "type": "add_icon",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "icon_text",
          "label": "Icon text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Icon Section"
    }
  ]
}  
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

thanks

[Liquid_xPert_SJ · Accepted solution]

@richardlrnzwelcome to the Shopify Community,

if you want all these icon in one image than you can use image banner section to show all these images, Also if you want these icons to show individually with text and image then you need to create a custom section and display it wherever you need.

How you can add your custom section refer to the instruction below

Online Theme > Edit Code > Sections  > Add section and place the below code in that.

{%- for block in section.blocks -%}
  {%- case block.type -%}

    {%- when 'add_icon' -%}
      {%- assign icon = block.settings.icon -%}
      {{ icon | image_url: width: icon.width | image_tag: class: 'add_your_class_here', loading: 'lazy' }}

      {{ block.settings.icon_text }} 

  {%- endcase -%}
{%- endfor -%}

{% schema %}
  {
  "name": "Image Icon Section",
  "settings": [],
  "blocks": [
    {
      "name": "Add Icon",
      "type": "add_icon",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "icon_text",
          "label": "Icon text"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Image Icon Section"
    }
  ]
}  
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

thanks

[richardlrnz]

hello, i already got the image i just need to upload it like on the photo. i created the image on canva so can you just explain me how i can upload this image under my hero banner and coordinate it ? 

[Liquid_xPert_SJ · Accepted solution]

you can use image banner section from the theme customizer and upload there and drag it under the main banner.